JavaScript中如何筛选数组对象：移除匹配ID及taskId为null的元素

需求说明 #

需要处理两个对象数组arr1和arr2，最终返回arr1中剩余的对象数组，移除规则如下：

• 移除arr1中taskId与arr2任意对象的id相等的元素
• 移除arr1中taskId为null的元素

现有代码问题 #

你尝试的代码：

const result = arr2.map(async task => {!arr1.some(arr1 => arr1.taskId === task.id)})

存在几个关键问题：

• 使用map会生成和arr2长度一致的数组，而不是过滤后的arr1
• 不必要的async关键字，这里没有异步操作需求
• 逻辑上仅做了存在性判断，没有对arr1进行过滤筛选

正确实现方案 #

思路 #

1. 先提取arr2中所有id存入集合（Set），集合的查找效率远高于数组遍历，适合批量判断
2. 使用filter方法遍历arr1，保留同时满足以下两个条件的元素：
   • taskId不为null
   • taskId不在arr2的id集合中

代码实现 #

// 提取arr2的所有id到集合中
const arr2Ids = new Set(arr2.map(item => item.id));

// 过滤arr1得到结果
const result = arr1.filter(item => {
  return item.taskId !== null && !arr2Ids.has(item.taskId);
});

示例验证 #

用你提供的示例数组测试：

var arr1 =[
  {
    "name": "sample task",
    "memberIds": [981,983],
    "dueOn": "2022-08-31",
    "taskId": 10
  },
  {
    "name": "skills one more",
    "memberIds": [981,983,984],
    "dueOn": "2022-08-31",
    "taskId": null
  },
  {
    "name": "new task one",
    "memberIds": [982,983],
    "dueOn": "2022-08-2",
    "taskId": 15
  }
]
var arr2 =[
  {
    "id": 10,
    "createdAt": "2022-08-02T09:10:07.000Z",
    "createdBy": 21,
    "updatedAt": null,
    "updatedBy": null,
    "statusId": 6207,
    "caseGoalId": 11,
    "name": "sample task",
    "dueOn": "2022-08-31"
  }
]

运行代码后，result的输出与预期完全一致：

[
  {
    "name": "new task one",
    "memberIds": [982,983],
    "dueOn": "2022-08-2",
    "taskId": 15
  }
]

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