JavaScript中向数组推入对象出现值重复问题求助

问题根源 #

你遇到的核心问题是JavaScript中对象属于引用类型：两次调用arrMap.map时，直接修改了arrMap数组内的原始对象，而非创建新对象。第一次map操作将原对象的field_value设为BUILDING1并推入arrValues，第二次map又对同一个原对象的field_value修改为BUILDING2。由于arrValues中两个对象的values字段指向的是同一个对象引用，最终显示的都是最后一次修改的值。

解决方法 #

在map函数内部创建新对象，复制原对象的所有属性后再添加field_value，避免修改原数组的对象。可以使用对象展开语法（...）或Object.assign实现属性复制。

修改后的代码 #

let arrMap = [{
  "field_desc": "Building Name",
  "type": "string"
}]
let objFind = {
  values: [
    ["BUILDING1", "BUILDING2"],
    []
  ]
}

let arrValues = [];

// 生成第一个行对象
arrValues.push({
  row: 0,
  values: arrMap.map(element => ({
    ...element, // 复制原对象的所有属性
    field_value: objFind.values[0][0]
  }))
});

// 生成第二个行对象
arrValues.push({
  row: 1,
  values: arrMap.map(element => ({
    ...element,
    field_value: objFind.values[0][1]
  }))
});

console.log(arrValues);

验证结果 #

运行修改后的代码，输出将与预期一致：

[{
  "row": 0,
  "values": [{
    "field_desc": "Building Name",
    "type": "string",
    "field_value": "BUILDING1"
  }]
}, {
  "row": 1,
  "values": [{
    "field_desc": "Building Name",
    "type": "string",
    "field_value": "BUILDING2"
  }]
}]

内容的提问来源于stack exchange，提问作者bob-bobberson3rd