將對象添加到陣列會導致重複

Question

我知道它的基本原理但陷入困境。我試圖將對象添加到數組：

的Html

<p> 
    <label> 
    <input type="text" name="test1" id="test1" /> 
    </label> 
</p> 
<p> 
    <label> 
    <input type="text" name="test2" id="test2" /> 
    </label> 
</p> 

腳本

var res = {}; 
    var array_res = []; 
function init(){ 
    x= $('#test1').val(); 
    res['x'] = x; 
    y= $('#test2').val(); 
    res['y'] = y;  

    array_res.push(res); 

    return array_res 
} 
$('#btn').click(function(){ 
init(); 
console.log(array_res); 
    }); 

當第一加法X = 1且y = 2 I在控制檯得到：

[Object { x="1", y="2"}] 

接下來我嘗試插入x = 3和y = 4，然後我得到：

[Object { x="3", y="4"}, Object { x="3", y="4"}] 

代替

[Object { x="1", y="2"}, Object { x="3", y="4"}] 

這是爲什麼？我嗅到它的一個對象實例問題，但無法弄清楚該怎麼做。在此先感謝

Answer 1

當一個對象添加到一個數組，你不添加對象本身，而是參考到它。更新對象本身也會反映在數組中，因爲數組只是「指向」對象。因爲您的res對象在全局範圍內聲明，所以第二次調用init()將會打破array_res中指向的以前的值。

考慮這個簡短的演示：https://jsfiddle.net/35uu7bje/

var obj = {a: 5, b: 10}; 
var arr = []; 

arr.push(obj); 
console.log("Object in array before update"); 
console.log(arr[0]); 
// Displays {a: 5, b: 10} 

obj.a = 25; 
console.log("Object in array after update"); 
console.log(arr[0]); 
// Displays {a: 25, b: 10} 

爲了解決這個問題，你應該聲明的功能範圍res所以每個新調用創建的，而不是回收舊的一個新對象：

// Do NOT declare res here 
// Doing so will cause every entry in array_res to point to one instance of this object 
// var res = {}; 
var array_res = []; 

function init(){ 
    // Declare it here so each call creates a new res object 
    var res = {}; 

還應該注意的是，因爲通過引用傳遞對象，將對象作爲參數傳遞給函數允許修改原始對象：

var obj = {a: 5, b: 10}; 

function f(some_obj) { 
    some_obj.a = 25; 
} 

console.log(obj); // {a: 5, b: 10} 
f(obj); 
console.log(obj); // {a: 25, b: 10} 

Answer 2

移動res變量init功能

var array_res = []; 
 

 
function init() { 
 
    
 
    var res = {}; 
 
    x = $('#test1').val(); 
 
    res['x'] = x; 
 
    y= $('#test2').val(); 
 
    res['y'] = y;  
 

 
    array_res.push(res); 
 

 
    return array_res 
 
} 
 

 
$('#btn').click(function(){ 
 
    init(); 
 
    
 
    console.log(array_res); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    <label> 
 
    <input type="text" name="test1" id="test1" /> 
 
    </label> 
 
</p> 
 

 
<p> 
 
    <label> 
 
    <input type="text" name="test2" id="test2" /> 
 
    </label> 
 
</p> 
 

 
<button id="btn">Add</button>