使用JavaScript reduce方法筛选id为3的数据出错，请求排查

我有如下车辆保险信息的data数组：

const data = [
  {"amount": "600,000", "cover": null, "id": "1", "img": "636e56de36301.1.png", "make": "bmw", "model": "bmw", "name": "APA", "policy": "Motor Insurance", "rate": "6"},
  {"amount": "300,000", "cover": null, "id": "2", "img": "63723574a81ce.1.png", "make": "ferrari", "model": "ferrari", "name": "CIC", "policy": "Motor Insurance", "rate": "3"},
  {"amount": "450,000", "cover": null, "id": "3", "img": "63723726cb1df.1.png", "make": "audi", "model": "audi", "name": "Mayfair Insurance", "policy": "Motor Insurance", "rate": "4.5"}
]

我用以下代码尝试筛选出id为3的元素：

const data = [
  {"amount": "600,000", "cover": null, "id": "1", "img": "636e56de36301.1.png", "make": "bmw", "model": "bmw", "name": "APA", "policy": "Motor Insurance", "rate": "6"},
  {"amount": "300,000", "cover": null, "id": "2", "img": "63723574a81ce.1.png", "make": "ferrari", "model": "ferrari", "name": "CIC", "policy": "Motor Insurance", "rate": "3"},
  {"amount": "450,000", "cover": null, "id": "3", "img": "63723726cb1df.1.png", "make": "audi", "model": "audi", "name": "Mayfair Insurance", "policy": "Motor Insurance", "rate": "4.5"}
]

const id = ['3']

const provider = data.reduce((prv, item) => {
    if(id.includes(item.id)){
      return prv 
    }
    return prv
 });
console.log('This is provider' ,provider);

但实际返回的却是id为1的元素，输出结果：

This is provider {"amount": "600,000", "cover": null, "id": "1", "img": "636e56de36301.1.png", "make": "bmw", "model": "bmw", "name": "APA", "policy": "Motor Insurance", "rate": "6"}

请问我哪里出错了？

你的代码存在两个核心错误：

1. 未指定reduce的初始值：调用reduce时如果不传第二个参数，初始的prv会默认取数组的第一个元素（也就是id为1的对象）。
2. 逻辑完全错误：无论当前item的id是否匹配，你都直接返回prv，完全没有对匹配到的元素做任何处理，最终结果自然就是初始的第一个元素。

方案1：用find（最适合查找单个匹配元素） #

find方法会返回数组中第一个满足条件的元素，完全契合你查找单个id为3的元素的需求：

const data = [/* 你的数组数据 */]
const targetId = '3'; // 单个id无需用数组，直接用字符串即可

const provider = data.find(item => item.id === targetId);
console.log('This is provider', provider);

方案2：修正reduce的用法（若必须使用reduce） #

如果坚持使用reduce，需要指定初始值，并在匹配到元素时更新返回值：

const data = [/* 你的数组数据 */]
const id = ['3'];

const provider = data.reduce((prv, item) => {
    if(id.includes(item.id)){
      return item; // 匹配到则返回当前item
    }
    return prv; // 未匹配到则保持之前的prv（初始值设为null表示默认无匹配）
}, null); // 必须指定初始值

console.log('This is provider', provider);

方案3：用filter（若需查找多个匹配元素） #

如果你的id数组可能包含多个id，需要筛选出所有匹配元素，使用filter更合适：

const data = [/* 你的数组数据 */]
const ids = ['3'];

const providers = data.filter(item => ids.includes(item.id));
console.log('These are providers', providers);

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