JavaScript对象数组循环赋值错误：如何添加多值columns属性

原始数据 #

var lab =[
  { label: '1', value: 42 },
  { label: '2', value: 55 },
  { label: '3', value: 51 },
  { label: '4', value: 22 } 
];

var val = [ 
  { label: '1', value: 42 },
  { label: '2', value: 55 },
];

期望结果 #

为lab数组的每个对象添加columns属性，值为val数组中所有value组成的数组：

[ 
  { label: '1', value: 42, columns: [42,55] },
  { label: '2', value: 55, columns:[42,55] },
  { label: '3', value: 51, columns: [42,55] },
  { label: '4', value: 22, columns: [42,55] } 
]

错误代码及运行结果 #

错误代码：

lab.forEach(labs=>{
    val.forEach(vals=>{
        labs["columns"]=vals.value
    })
})
console.log(lab)

运行结果：

[ 
  { label: '1', value: 42, columns: 55 },
  { label: '2', value: 55, columns: 55 },
  { label: '3', value: 51, columns: 55 },
  { label: '4', value: 22, columns: 55 } 
]

逻辑错误分析 #

你的嵌套循环核心错误是每次遍历val元素时，都用单个vals.value直接覆盖labs.columns的值，而非将值添加到数组中：

• 遍历val第一个元素时，labs.columns被设为42
• 遍历val第二个元素时，又将labs.columns覆盖为55
• 最终每个lab对象的columns只会保留val最后一个元素的value，而非期望的数组

正确写法 #

方案1：提前提取值数组（效率更高） #

先一次性提取val中所有value组成数组，再遍历lab添加属性，避免重复遍历val：

// 仅提取一次val的value数组
const valValues = val.map(item => item.value);
// 给每个lab对象添加columns属性
lab.forEach(labs => {
    labs.columns = [...valValues]; // 用展开运算符做浅拷贝，避免后续修改影响所有对象
});
console.log(lab);

方案2：嵌套循环中维护数组 #

若坚持用嵌套forEach，需先初始化空数组，再将值逐个推入：

lab.forEach(labs=>{
    labs.columns = []; // 先初始化空数组
    val.forEach(vals=>{
        labs.columns.push(vals.value); // 向数组添加值而非覆盖
    })
})
console.log(lab)

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