JS两个数组比较,删除重复值的巧妙方法(推荐)

JS两个数组比较，删除重复值是一个常见的问题。以下是一个使用巧妙方法的攻略：

步骤1：创建两个待比较的数组

首先，您需要定义两个数组，分别是要比较的源数组和目标数组。例如：

const sourceArray = [1, 2, 3, 4, 5];
const targetArray = [3, 4, 5, 6, 7];

步骤2： 使用filter方法进行比较

接下来，您可以使用数组的filter方法来比较两个数组，并返回不同的部分。这个方法遍历源数组，并返回一个新的数组，该数组只包含目标数组中没有的元素。例如：

const difference = sourceArray.filter(x => !targetArray.includes(x));

在这个示例中，我们使用箭头函数来检查源数组中的每个元素是否包含在目标数组中。如果元素不在目标数组中，则将其包含在返回的新数组中。

步骤3： 删除重复值

最后，您可以使用set对象来删除新数组中的重复项。set对象是一种以键值对形式储存唯一值的集合，在这里我们用它来去掉新数组中的重复项。例如：

const uniqueDifference = [...new Set(difference)];

在这个示例中，我们使用扩展运算符来将set对象转换为数组，并创建一个新的唯一值数组。

示例1：字符串数组比较

下面是一个使用字符串数组的示例。我们将比较两个字符串数组，并删除重复值。

const sourceArray = ['apple', 'banana', 'pear', 'orange'];
const targetArray = ['pear', 'orange', 'grape', 'banana'];

const difference = sourceArray.filter(x => !targetArray.includes(x));
const uniqueDifference = [...new Set(difference)];

console.log(uniqueDifference); // ["apple"]

在这个示例中，我们使用同样的方法，只不过是将源数组和目标数组换成了一个字符串数组。

示例2：对象数组比较

下面是一个使用对象数组的示例。我们将比较两个对象数组，并删除重复值。在这个示例中，我们使用对象的id属性来唯一标识每个对象。

const sourceArray = [{id: 1, name: 'apple'}, {id: 2, name: 'banana'}, {id: 3, name: 'pear'}, {id: 4, name: 'orange'}];
const targetArray = [{id: 3, name: 'pear'}, {id: 4, name: 'orange'}, {id: 5, name: 'grape'}, {id: 6, name: 'pineapple'}];

const difference = sourceArray.filter(x => !targetArray.some(y => y.id === x.id));
const uniqueDifference = [...new Set(difference)];

console.log(uniqueDifference); // [{id: 1, name: 'apple'}, {id: 2, name: 'banana'}]

在这个示例中，我们使用some方法来比较id属性，而不是includes方法。some方法遍历目标数组中的每个元素，如果任何一个元素的id属性等于源数组中的元素，则返回true。我们使用filter方法来保存源数组中那些在目标数组中不存在的元素，然后使用set对象来去掉重复值。

这就是使用巧妙方法比较JS的两个数组，并删除重复项的攻略！