TypeScript 中获取两个数组之间的差异

TypeScript 2月前 28

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

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

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

function getDifference<T>(a: T[], b: T[]): T[] {
  return a.filter((element) => {
    return !b.includes(element);
  });
}

// ?️ const diff: string[]
const diff = getDifference(arr1, arr2);

console.log(diff); // ?️ ['c', 'd']

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

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

我们在函数声明中使用了泛型。泛型就像变量，但适用于类型。

这使我们能够更好地输入函数的返回类型。我们基本上是在告诉 TypeScript 它接受 2 个 T[] 类型的参数并返回一个 T[] 类型的值。

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

function getDifference<T>(a: T[], b: T[]): T[] {
  return a.filter((element) => {
    return !b.includes(element);
  });
}

// ?️ const diff: string[]
const diff = getDifference(arr1, arr2);

console.log(diff); // ?️ []

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

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

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

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

function getDifference<T>(a: T[], b: T[]): T[] {
  return a.filter((element) => {
    return !b.includes(element);
  });
}

// ?️ const diff: string[]
const diff = [
  ...getDifference(arr1, arr2),
  ...getDifference(arr2, arr1)
];

// ?️ ['c', 'd']
console.log(diff);