TypeScript：如何获取两个对象数组的差异ID？

原代码问题 #

• 使用for...in遍历数组：for...in会遍历数组原型链上的属性，不适合用于数组元素的遍历，推荐使用数组方法或for...of。
• 条件判断错误：代码中arr1[m].id == arr1[n].id应为arr1[m].id == arr2[n].id，否则完全无法正确对比两个数组的id。
• 逻辑方向颠倒：需求是获取不存在于arr2的id，但原代码是将存在于arr2的项加入结果，与需求相反。

符合TypeScript最佳实践的实现 #

实现思路 #

1. 先提取arr2中的所有id存入Set，利用Set的O(1)查找效率提升性能。
2. 过滤arr1中id不在该Set内的元素，再映射为id数组。

完整代码 #

// 定义类型，符合TypeScript规范
interface Item {
  id: string;
}

const arr1: Item[] = [
    { "id": "1" },
    { "id": "4" },
    { "id": "7" },
    { "id": "5" }
];

const arr2: Item[] = [
    { "id": "1" },
    { "id": "5" }
];

// 提取arr2的id到Set
const arr2Ids = new Set(arr2.map(item => item.id));

// 过滤并映射得到结果
const result = arr1
  .filter(item => !arr2Ids.has(item.id))
  .map(item => item.id);

console.log(result); // 输出: ["4", "7"]

代码说明 #

• 定义Item接口：明确数组元素的类型，符合TypeScript的类型安全要求。
• 使用Set存储id：相比嵌套循环的O(n*m)时间复杂度，此方法的时间复杂度为O(n+m)，性能更优。
• 使用数组方法filter和map：函数式编程风格更简洁易读，符合现代JS/TS的编码规范。

内容的提问来源于stack exchange，提问作者CodePro