JavaScript 循環中對象引用陷阱：為什麼數組裡全是最後一項數據？

JavaScript 循環中對象引用陷阱：為什麼數組裡全是最後一項數據？

現象：循環中創建對象並推入數組，結果數組所有元素指向同一個對象（最後一次賦值的值）。

錯誤代碼

var datas = [];
var data = {}; // 錯誤：循環外創建，所有迭代共用同一對象
$(".baby-panel").each(function() {
    data.id = $(this).find(".babyid").attr("baby_id");
    data.name = $(this).find(".babyname input").val().trim();
    datas.push(data); // 推入的是同一引用
});

正確寫法：循環內創建新對象

var datas = [];
$(".baby-panel").each(function() {
    var data = {}; // 正確：每次迭代創建新對象
    data.id = $(this).find(".babyid").attr("baby_id");
    data.name = $(this).find(".babyname input").val().trim();
    datas.push(data);
});

原理解析

• JavaScript 對象為引用類型，變量存儲的是堆內存地址。
• 循環外 var data = {} 僅創建**一個**對象，循環內反覆修改其屬性，push 的是同一地址。
• 循環內創建，每次分配新內存，push 的是不同地址，數組元素相互獨立。

替代方案：Object.assign / 展開運算符

// 若需基於模板對象複製
var template = {default: true};
datas.push(Object.assign({}, template, {id: 1, name: 'A'}));
// 或 ES6
datas.push({...template, id: 1, name: 'A'});

牢記：引用類型賦值傳遞的是地址，循環中需主動創建新實例。