如何修改JS对象数组映射代码，匹配提取outputName字段

需求背景 #

我有两个对象数组：

输入数据 #

const formulas = [ 
  { "formulaID": "1", "versionID": 1, "formulaClass": 3, "formulaType": "34", "outputName": "Chocolate Milk 2%" }, 
  { "formulaID": "4", "versionID": 1, "formulaClass": 3, "formulaType": "17", "outputName": "Hazelnut Creamer" }, 
  { "formulaID": "6", "versionID": 1, "formulaClass": 3, "formulaType": "23", "outputName": "White Milk 2%" } 
];
const yields = [ 
  { "formulaID": "4", "versionID": 1, "yieldFactor": 0.93 }, 
  { "formulaID": "4", "versionID": 2, "yieldFactor": 0.98 }, 
  { "formulaID": "6", "versionID": 1, "yieldFactor": 0.95 }, 
  { "formulaID": "7", "versionID": 1, "yieldFactor": 0.85 } 
];

我想要生成这样的输出数组：

预期输出 #

const result = [ 
  { "formulaID": "7", "versionID": 1, "yieldFactor": 0.85, "outputName": "" }, 
  { "formulaID": "4", "versionID": 1, "yieldFactor": 0.93, "outputName": "Hazelnut Creamer" }, 
  { "formulaID": "4", "versionID": 2, "yieldFactor": 0.98, "outputName": "" }, 
  { "formulaID": "6", "versionID": 1, "yieldFactor": 0.95, "outputName": "White Milk 2%" } 
];

尝试的代码及问题 #

我写了以下代码，结果接近预期，但无法只提取outputName字段——当前返回的是匹配到的整个对象数组：

const result = yields.map(yld => ({ 
  formulaID: yld.formulaID, 
  versionID: yld.versionID, 
  yieldFactor: yld.yieldFactor, 
  outputName: formulas.filter(f => (f.formulaID + '-' + f.versionID).includes(yld.formulaID + '-' + yld.versionID)) 
}));
console.log(result);

请问如何修改代码，使匹配时显示对应的outputName，无匹配时outputName为空字符串？

你的思路其实没问题，只是filter返回的是匹配到的对象数组，而我们只需要单个对象的outputName字段，所以稍微调整下就能解决啦！

方式一：直接修改现有代码（简单直观） #

把filter换成find——因为每个formulaID+versionID应该是唯一的，find会返回第一个匹配的对象，找不到就返回undefined。然后我们就可以轻松提取outputName，没匹配到就设为空字符串：

const result = yields.map(yld => {
  // 找到对应公式对象
  const matchedFormula = formulas.find(f => 
    f.formulaID === yld.formulaID && f.versionID === yld.versionID
  );
  // 拼接结果，用展开运算符简化代码
  return {
    ...yld, // 直接把yld的所有属性搬过来，不用手动写每个字段
    outputName: matchedFormula ? matchedFormula.outputName : ''
  };
});

这里还用到了对象展开运算符...yld，比你之前手动写三个字段要简洁得多，以后字段变了也不用改这部分代码～另外，直接用全等判断比拼接字符串更严谨，能避免一些奇怪的匹配问题。

方式二：先建索引（大数据量推荐） #

如果你的数组数据量很大，每次map都遍历整个formulas数组会有点慢。这时候可以先给formulas建个索引映射，之后查找就是瞬间的事：

// 先把formulas转成以"formulaID-versionID"为键的映射表
const formulaOutputMap = new Map();
formulas.forEach(formula => {
  const key = `${formula.formulaID}-${formula.versionID}`;
  formulaOutputMap.set(key, formula.outputName);
});

// 再生成结果数组
const result = yields.map(yld => {
  const key = `${yld.formulaID}-${yld.versionID}`;
  return {
    ...yld,
    outputName: formulaOutputMap.get(key) || ''
  };
});

这种方式只需要遍历formulas一次，之后每次查找都是O(1)的时间复杂度，数据越多越能体现优势～

两种方法跑出来的结果都是你想要的，选哪种就看你的实际数据规模啦！

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