JavaScript如何通过arr1的field值提取arr2的对应字段生成新数组

原代码问题分析 #

你的代码无法得到正确结果的核心原因如下：

• 没有在每次处理arr2的新元素时重置存储新对象的变量，导致后一个元素的属性会覆盖前一个元素的属性
• 向结果数组中追加的是单个属性值，而非组装完成的完整对象
• 未显式声明final、last、newObj等变量，会造成全局变量污染，进一步导致逻辑异常

正确实现方式 #

步骤说明 #

1. 先从arr1中提取所有field值，组成待保留的键名列表
2. 遍历arr2的每一个元素，为每个元素生成仅保留待保留键名的新对象
3. 将所有新对象组合为最终结果数组

基础循环实现（和你原有写法逻辑接近） #

// 提取需要保留的键名
const keepKeys = arr1.map(item => item.field)
const result = []

for (let i = 0; i < arr2.length; i++) {
  const originItem = arr2[i]
  const filteredItem = {}
  // 仅保留匹配的属性
  for (let j = 0; j < keepKeys.length; j++) {
    const key = keepKeys[j]
    filteredItem[key] = originItem[key]
  }
  result.push(filteredItem)
}

console.log(result)

简洁ES6实现 #

const keepKeys = arr1.map(item => item.field)
const result = arr2.map(originItem => 
  Object.fromEntries(
    keepKeys.map(key => [key, originItem[key]])
  )
)

console.log(result)

以上两种实现运行后都能得到你期望的输出结果。

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