TypeScript 中获取两个数组之间的差异
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
方法的函数会被数组中的每个元素调用。
在每次迭代中,我们检查该元素是否不包含在另一个数组中。
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']
的返回值。
要解决这个问题,我们需要调用两次
getDifference
方法,然后合并结果。
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);
这是我们为使它正常工作所做的工作:
- 在第一个数组上调用
filter
方法,只返回第二个数组中不包含的元素。 - 在第二个数组上调用
filter
方法,只返回第一个数组中不包含的元素。 - 我们使用扩展运算符
...
语法将两个数组的结果合并到第三个数组中。
考虑展开运算符 ...
的一种简单方法是,我们将一个数组的值解包到另一个数组中。
现在我们的示例已经完成并返回两个数组之间的差异。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供,仅供学习和研究使用。如您对本站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。