JavaScript push方法异常：数组对象重复问题求助

运行以下JavaScript代码时，push执行前的console.log能输出两个不同的对象，但最终返回的winnerArr数组里两个元素都是最后一个对象{seat: 3, ticketCost: 49}，和预期不符：

function pickWinners(numbers) {  
    const winnerArr = [];
    const winnerObj = {};
    for(let i = 0; i < numbers.length; i++) {
        if(numbers[i] % 2 != 0 && i % 2 != 0) {
            winnerObj.seat = i;
            winnerObj.ticketCost = numbers[i];
            console.log(winnerObj);
            winnerArr.push(winnerObj);
        }
    }
    return winnerArr;
}

pickWinners([6, 7, 12, 49])

console.log输出结果（符合预期）：

Object { seat: 1, ticketCost: 7 }   
Object { seat: 3, ticketCost: 49 }

返回的数组结果（不符合预期）：

0: Object { seat: 3, ticketCost: 49 }  
1: Object { seat: 3, ticketCost: 49 }

期望返回的数组和console.log输出的结果一致。

原因分析 #

这是因为对象是引用类型——你在循环外只创建了一个winnerObj对象，每次循环里修改的都是这个对象的属性值，而winnerArr.push(winnerObj)其实是把这个对象的引用地址放进了数组里。

也就是说，数组里的两个元素指向的是同一个内存地址的对象。console.log看起来正确，是因为执行console.log时，对象的属性值确实是当前循环的seat和ticketCost；但当循环结束后，这个唯一的对象已经被最后一次循环的属性值覆盖了，所以你最后查看数组时，两个元素显示的都是最后修改后的对象内容。

解决方案 #

每次符合条件时，创建一个新的对象，而不是复用同一个：

function pickWinners(numbers) {  
    const winnerArr = [];
    for(let i = 0; i < numbers.length; i++) {
        if(numbers[i] % 2 != 0 && i % 2 != 0) {
            // 每次循环创建新对象
            const winnerObj = {
                seat: i,
                ticketCost: numbers[i]
            };
            console.log(winnerObj);
            winnerArr.push(winnerObj);
        }
    }
    return winnerArr;
}

pickWinners([6, 7, 12, 49])

这样数组里的每个元素都是独立的对象，不会互相影响，最终返回的数组就和console.log的结果一致了。

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