JavaScript数组已推入对象被意外修改：HL标签元素值异常排查

问题原因 #

JS中数组属于引用类型，你代码中hlp、hli都是从map.structure里取的固定模板对象，每次调用hl_I函数时，let elements = hl[x]这行代码只是获取了模板中数组的引用，并没有创建新的数组副本。你后续修改elements[0]的时候，本质是直接修改了模板里的原始数组，所有之前已经推入obj数组、引用了同一份数组的对象自然会同步更新，最后所有HL标签的elements都变成了最后一次修改的值。

修复方案 #

每次使用模板数组时，先创建一个浅拷贝，再进行修改和推入操作，修改hl_I函数里的elements赋值逻辑即可：

let hlcount = 1;
function hl_I(hl){
  for(x in hl){
    let tag = x;
    // 这里创建数组的浅拷贝，不再复用原始模板的引用
    let elements = [...hl[x]];
    if( tag == "HL"){
      console.log(hlcount);
      elements[0] = hlcount;
    }
    obj.push({"tag":tag, "elements":elements});
    }
    hlcount++;
}

如果你的elements数组里还有嵌套的引用类型，可以根据场景换用深拷贝方式，当前你的场景里都是基础类型值，浅拷贝就足够满足需求。

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