JS/TS forEach循环中Array.concat覆盖数组值问题排查修复

代码出现记录被覆盖的问题，核心是JavaScript/TypeScript里对象是引用类型：

• template.map()回调里拿到的record是template数组存储的原对象引用，不是独立的新对象，直接修改record.State，改动的是模板里的固定原对象
• 之前concat到totalRecords里的元素，全是指向这两个模板对象的引用，没有生成独立副本。最后一轮循环把State改成"UP"后，所有引用指向的对象值都会同步更新成UP，之前存的BR记录自然就被覆盖了
• 循环内打印cc看着正常，是因为打印操作发生在当下，后续循环修改原对象的操作还没执行，等最终打印totalRecords时，所有对象已经被改成最后一次循环设置的值了

在map遍历模板时，先对原模板对象做浅拷贝生成新对象，再给新对象设置对应的State值，不要直接改动原模板对象，修改后的可运行代码如下：

const states = ["BR", "UP"];
const template = [
    {
      "State": "",
      "allotment": 25622
    },
    {
      "State": "",
      "expenditure": 1254
    }
  ];

let totalRecords: any[] = [];
states.forEach(state=>{
  // 用对象展开运算符做浅拷贝，基于副本修改属性，不改动原模板
  const cc = template.map(record => ({...record, State: state}))
  totalRecords = totalRecords.concat(cc);
})
console.log(totalRecords);

运行上述代码就能得到预期的输出结构。

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