推入数组会产生意外的结果

Pushing into array gives unexpected result

本文关键字：意外 结果 数组      更新时间：2023-09-26

下面的代码片段返回了意外的（至少对我来说）结果。

var input = [['one','two'],['three','four']];
    var doc = {};
    var output1 = [], output2 = [];
    input.forEach(function(x){
        doc.firstValue = x[0];
        doc.secondValue = x[1];
        output1.push({firstValue:x[0],secondValue:x[1]});
        output2.push(doc);
        
    })
$('#output1').html(JSON.stringify(output1));
$('#output2').html(JSON.stringify(output2));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
output1 is:
<div id='output1'></div>
output2 is:
<div id='output2'></div>

问题是：
1） 为什么output1看起来与output2不相似（而它们的创建非常相似）
2） 有没有一种方法可以推入类似array.prush（obj）的数组（output2的填充方式）并获得类似output1的结果（初始数组中的所有值都会存在）？

1） 为什么output1看起来与output2不相似（而它们的创建非常相似）？

这与JavaScript中的闭包有关。

output2数组包含对doc对象的两个引用。这些引用都指向doc的相同实例。

所以，当你的任务全部完成，打印output2的内容时，你会意识到它只是打印doc的值，这就是

{
   "firstValue":"three",
   "secondValue":"four"
}

2） 有没有一种方法可以推入类似array.prush（obj）的数组（output2的填充方式）并获得类似output1的结果（初始数组中的所有值都会存在）？

最简单的方法是每次使用doc来避免关闭时创建一个新的实例：

var output1 = [], output2 = [];
input.forEach(function(x){
    // Declare and define `doc` here to get unique references.
    var doc = {};
    doc.firstValue = x[0];
    doc.secondValue = x[1];
    output1.push({firstValue:x[0],secondValue:x[1]});
    output2.push(doc); 
});

试试这个：

var input = [['one','two'],['three','four']];
    var doc = {};
    var output1 = [], output2 = [];
    input.forEach(function(x){
        doc = {}; //this is the added line
        doc.firstValue = x[0];
        doc.secondValue = x[1];
        output1.push({firstValue:x[0],secondValue:x[1]});
        output2.push(doc);
        
    })
$('#output1').html(JSON.stringify(output1));
$('#output2').html(JSON.stringify(output2));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
output1 is:
<div id='output1'></div>
output2 is:
<div id='output2'></div>

您应该在每次迭代中创建一个新的doc object。。。你引用了同一个对象，所以它会有最新的值…

相关文章：