Das Einschieben in ein Array führt zu einem unerwarteten Ergebnis

Question

Das folgende Code-Snippet liefert unerwartete (zumindest für mich) Ergebnisse.

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>

Die Fragen sind:
1) warum output1 nicht ähnlich sieht nach OUTPUT2 (während ihrer Entstehung sehr ähnlich ist)?
2) gibt es eine Möglichkeit, in array wie array.push (obj) (die Art, wie output2 gefüllt ist) zu drücken und das Ergebnis wie output1 zu erhalten (alle Werte aus dem ursprünglichen Array wären da)?

Answer 1

1) Warum sieht output1 nicht ähnlich wie output2 (während ihre Erstellung sehr ähnlich ist)?

Dies hat mit closure in JavaScript zu tun.

Ihr output2 Array enthält zwei Referenzen zum doc Objekt. Diese Referenzen zeigen alle auf die gleiche Instanz von doc.

Also von der Zeit Ihre Aufgabe alles getan ist und Sie drucken den Inhalt output2, merkt man, dass es nur die Werte von doc druckt, die

ist

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

2) ist es eine Möglichkeit, wie array.push (obj) in ein Array zu pushen (die Art, wie output2 gefüllt ist) und das Ergebnis wie output1 zu erhalten (alle Werte aus dem ursprünglichen Array wären da)?

Der einfachste Weg, dies zu tun, ist eine neue Instanz von doc jedes Mal, wenn Sie es verwenden möchten, erstellen Schließung zu vermeiden:

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); 
}); 

Answer 2

Versuchen Sie folgendes:

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>

Sie sollten eine neue doc object jeder Iteration erstellen ... Sie wurden Referenzierung das gleiche Objekt, damit es die neuesten Werte in es haben würde ...