迹忆客 专注技术分享

JavaScript 中要获得两个数组之间的差异：

1. 使用 filter() 方法迭代第一个数组。
2. 检查每个元素是否不包含在第二个数组中。
3. 重复这些步骤，但这次遍历第二个数组。

const arr1 = ['a', 'b', 'c', 'd'];
const arr2 = ['a', 'b'];

function getDifference(a, b) {
  return a.filter(element => {
    return !b.includes(element);
  });
}

// 👇️ ['c', 'd']
console.log(getDifference(arr1, arr2));

我们传递给 Array.filter 方法的函数会被数组中的每个元素调用。

在每次迭代中，我们检查该元素是否不包含在另一个数组中。

filter 方法返回一个包含满足条件的元素的数组，换句话说，第一个数组中不包含在第二个数组中的元素。

但是 ，这不会返回数组之间的完整差异，因为我们只检查第一个数组中的元素是否不包含在第二个数组中。 我们没有检查第二个数组中的元素是否不包含在第一个数组中。

const arr1 = ['a', 'b'];
const arr2 = ['a', 'b', 'c', 'd'];

function getDifference(a, b) {
  return a.filter(element => {
    return !b.includes(element);
  });
}

// 👇️ []
console.log(getDifference(arr1, arr2));

这是相同的代码，但是我们交换了 arr1 和 arr2 变量的值。 现在 arr2 包含 4 个元素。

因为我们只迭代 arr1，它只有 2 个元素都包含在 arr2 中，所以该方法返回一个空数组。

我们本来期望 ['c', 'd'] 的返回值。

要解决这个问题，我们需要调用两次 getDifference 方法，然后合并结果。

const arr1 = ['a', 'b'];
const arr2 = ['a', 'b', 'c', 'd'];

function getDifference(a, b) {
  return a.filter(element => {
    return !b.includes(element);
  });
}

const difference = [
  ...getDifference(arr1, arr2),
  ...getDifference(arr2, arr1)
];

console.log(difference); // 👉️ ['c', 'd']

这是我们为使它正常工作所做的工作：

1. 在第一个数组上调用 filter 方法，只返回第二个数组中不包含的元素。
2. 在第二个数组上调用 filter 方法，只返回第一个数组中不包含的元素。
3. 我们使用扩展运算符 (...) 语法将两个数组的结果合并到第三个数组中。

考虑展开运算符 ... 的一种简单方法是，我们将一个数组的值解包到另一个数组中。

现在我们的示例已经完成并返回两个数组之间的差异。