Array Push仅存入数组最后一个值的原因及解决方法

问题现象 #

需要根据selected数组里的员工ID，给每个员工生成一条相同的时间工作信息，存入currentJob.time数组，但运行后所有条目的employeeID都变成了数组最后一个值01SANJAC。

初始代码如下：

selected = [ "01PILGAR", "01DERREX", "01SANJAC" ]

updatePersonnelTime() {
        console.log("updatePersonnelTime", this.time);
        var newtime = this.time;
        newtime.controlDateTime = new Date();
        if(!this.currentJob.time){
            this.currentJob.time = [];
        }
        for (let i=0; i < this.selected.length; i++){
            newtime.employeeID = this.selected[i];
            console.log('this.selected[i]: ', this.selected[i]);
            
            this.currentJob.time.push(newtime); 
            console.log('this.time: ', this.currentJob);
            
        }
        this.updateJob();
        this.timeRows = this.currentJob.time
        
    },

最终输出结果：

[ 
{ "task": "1000", "inout": { "label": "In", "value": 1 }, "time": "08:00", "detailNotes": "time", "officeNotes": "office time", "controlDateTime": "2021-09-17T14:54:13.371Z", "employeeID": "01SANJAC" }, 
{ "task": "1000", "inout": { "label": "In", "value": 1 }, "time": "08:00", "detailNotes": "time", "officeNotes": "office time", "controlDateTime": "2021-09-17T14:54:13.371Z", "employeeID": "01SANJAC" }, 
{ "task": "1000", "inout": { "label": "In", "value": 1 }, "time": "08:00", "detailNotes": "time", "officeNotes": "office time", "controlDateTime": "2021-09-17T14:54:13.371Z", "employeeID": "01SANJAC" } 
]

原因说明 #

这是JavaScript对象引用传递的特性导致的：

• 代码中newtime是直接指向this.time的引用，全程只操作同一个内存地址的对象
• 每次循环修改newtime.employeeID，都是修改同一个对象的属性
• push(newtime)只是把同一个对象的内存地址存入数组，并没有生成新的独立对象
• 循环结束后最后一次修改的employeeID是01SANJAC，数组中所有引用指向的都是同一个对象，所以读取到的employeeID都是最后一次修改的值
• 控制台打印时看到每次push的值正确，是因为部分浏览器的对象日志是延迟读取属性的，点开查看详情时循环已经执行完毕，显示的是最终修改后的结果。

解决方案 #

你采用的Object.assign方案是正确的，代码如下：

updatePersonnelTime() {
        console.log("updatePersonnelTime", this.time);
        var newtime = this.time;
        newtime.controlDateTime = new Date();
        if(!this.currentJob.time){
            this.currentJob.time = [];
        }
        for (let i=0; i < this.selected.length; i++){
            newtime.employeeID = this.selected[i];
            console.log('this.selected[i]: ', this.selected[i]);
            
// added 'Object.assign in the push
            this.currentJob.time.push(Object.assign({}, newtime)); 
            console.log('this.time: ', this.currentJob);
            
        }
        this.updateJob();
        this.timeRows = this.currentJob.time
        
    },

原理是Object.assign({}, newtime)会生成一个全新的独立对象，把newtime的属性复制到新对象中，每次push的都是互不干扰的新对象，所以每个条目的employeeID都会保留循环时对应的值。

如果后续需要修改嵌套属性比如inout的内容，Object.assign的浅拷贝会存在嵌套对象引用共享的问题，可以换成深拷贝方案比如JSON.parse(JSON.stringify(newtime))生成完全独立的对象。

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