如何在JavaScript中使用find()方法实现分类堆叠dataCount数值？

我来帮你搞定这个需求！你想要按serie分组，每个组对应所有categoria的dataCount值，没有匹配项就填0对吧？先给你理清楚find()的正确用法，再给你两种可行的实现方案。

首先明确你的原始数据和目标：
你的table数组：

const table = [
  {categoria: "CHILE", serie: "SERVICIOS", dataCount: 1},
  {categoria: "AUSTRALIA", serie: "CONSTRUCCION", dataCount: 1},
  {categoria: "EEUU", serie: "SERVICIOS", dataCount: 1},
  {categoria: "EEUU", serie: "CONSTRUCCION", dataCount: 4},
  {categoria: "ESPAÑA", serie: "CONSTRUCCION", dataCount: 22},
  {categoria: "ESPAÑA", serie: "SERVICIOS", dataCount: 14},
  {categoria: "EEUU", serie: "AUTOPISTAS", dataCount: 3}
];

已定义的分类数组：

const series = ["SERVICIOS", "CONSTRUCCION", "AUTOPISTAS"];
const categorias = ["CHILE", "AUSTRALIA", "EEUU", "ESPAÑA"];

方法一：用find()配合嵌套循环（修正你的原始思路） #

你原来的问题在于不知道如何在find()里传入当前的serie和categoria——其实利用JavaScript的闭包特性，回调函数可以直接访问外部循环的变量。另外，尽量避免重复调用find()（会重复遍历数组），把结果存起来复用：

const result = {};

// 遍历每个serie
for (const serie of series) {
  const dataCountArray = [];
  // 遍历每个categoria
  for (const categoria of categorias) {
    // 查找同时匹配当前serie和categoria的项
    const matchedItem = table.find(item => {
      return item.serie === serie && item.categoria === categoria;
    });
    // 找到就取dataCount，否则填0
    dataCountArray.push(matchedItem ? matchedItem.dataCount : 0);
  }
  // 把当前serie对应的数组存入结果
  result[serie] = dataCountArray;
}

console.log(result);

运行后得到的结果就是你要的：

{
  SERVICIOS: [1, 0, 1, 14],
  CONSTRUCCION: [0, 1, 4, 22],
  AUTOPISTAS: [0, 0, 3, 0]
}

方法二：先构建映射表（优化性能） #

如果你的table数组很大，多次调用find()会重复遍历数组，效率较低。可以先把table转换成一个映射表，之后的查找都是O(1)的速度：

// 先创建一个映射表，用`serie-categoria`作为唯一键，存对应的dataCount
const dataMap = new Map();
table.forEach(item => {
  const key = `${item.serie}-${item.categoria}`;
  dataMap.set(key, item.dataCount);
});

const result = {};
// 遍历每个serie，用map快速生成对应的dataCount数组
series.forEach(serie => {
  result[serie] = categorias.map(categoria => {
    const key = `${serie}-${categoria}`;
    // 找到就取对应值，否则返回0
    return dataMap.get(key) || 0;
  });
});

console.log(result);

这个方法只需要遍历table一次，后续的查找操作都非常快，适合数据量大的场景。

另外提醒一下：尽量不要用for...in遍历数组，它是用来遍历对象属性的，遍历数组推荐用for...of、forEach或者map，避免意外遍历到原型链上的属性。

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