如何通过复选框选中的ID值过滤API返回的对象数组数据？

原代码的问题分析 #

• 直接对parsedData调用filter，但API返回的数组数据在items字段中，应该操作parsedData.items
• 过滤条件语法错误：用了赋值运算符=而非比较运算符，且错误使用中文and，同时逻辑上不能要求一个ID同时等于两个值
• 变量data定义在if/else块内部，外部无法访问该变量
• 冗余的深拷贝：如果this.apiData已经是JavaScript对象，JSON.parse(JSON.stringify())不是必需的，除非你需要完全隔离原数据避免修改

正确实现代码 #

// 直接使用apiData的items数组，如需深拷贝可保留JSON.parse步骤
const items = this.apiData.items;
let filteredData;

if (this.multipleSelection.length > 0) {
    // 判断当前元素的Id是否在选中的ID数组中
    filteredData = items.filter(el => this.multipleSelection.includes(el.Id));
} else {
    // 未选中任何选项时返回原数组，用展开运算符浅拷贝避免修改原数据
    filteredData = [...items];
}

补充说明 #

• 使用Array.prototype.includes()可以简洁判断ID是否在选中集合中，适合处理多值匹配场景
• 如果multipleSelection是字符串数组（比如复选框返回的是字符串类型ID），需要先转成数字再匹配：this.multipleSelection.map(Number).includes(el.Id)
• 若需要更复杂的多条件组合（比如同时匹配Status和ID），可以在filter回调中添加逻辑，例如：

  filteredData = items.filter(el => {
      return this.multipleSelection.includes(el.Id) && el.Status === "Awaiting Funds";
  });
  

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