如何遍历两个JS对象数组按fieldname匹配生成指定结构的新数组

问题原因 #

你的原有代码采用双重循环全量匹配，只要fieldname相等就拼接数据，会出现同fieldname下的所有元素交叉匹配的问题：比如2条Black的Profiles和2条Black的productimg会生成4条Black的拼接结果，最终总长度为8，不符合预期的同fieldname下按顺序一一对应的需求。

可行实现方案 #

我们可以先对两个数组按fieldname分组，再对同组内的元素按索引一一对应拼接，逻辑更稳定，也兼容后续数组元素顺序调整、同fieldname下元素数量变化的场景：

// 1. 对productimg按fieldname分组
const imgGroup = productimg.reduce((group, item) => {
  group[item.fieldname] = group[item.fieldname] || []
  group[item.fieldname].push(item)
  return group
}, {})

// 2. 对Profiles按fieldname分组
const profileGroup = Profiles.reduce((group, item) => {
  group[item.fieldname] = group[item.fieldname] || []
  group[item.fieldname].push(item)
  return group
}, {})

const finalarray = []
// 3. 同分组内按索引一一匹配拼接
Object.keys(imgGroup).forEach(field => {
  const imgList = imgGroup[field]
  const profileList = profileGroup[field]
  imgList.forEach((img, idx) => {
    finalarray.push({
      filename: profileList[idx].filename,
      keyId: img.keyId,
      objId: img.objId,
      fieldname: field
    })
  })
})

执行上述代码后得到的finalarray就是你需要的预期结果。

如果你能保证两个数组的元素顺序严格一一对应（第n个Profiles元素对应第n个productimg元素），也可以用更简单的遍历方式：

const finalarray = Profiles.map((profile, idx) => {
  const img = productimg[idx]
  return {
    filename: profile.filename,
    keyId: img.keyId,
    objId: img.objId,
    fieldname: profile.fieldname
  }
})

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