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时，我会进入控制台：

[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函数

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>

Answer 2

将对象添加到数组时，您不是要添加对象本身，而是添加对象的引用。更新对象本身也将反映在数组中，因为数组只是“指向”对象。由于您的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}

将对象添加到数组会导致重复

2 个答案: