推對象轉換成數組作爲預期不起作用

Question

我的目標是創建一個這樣的數組：

[{"str":"a","number":1},{"str":"a","number":2},{"str":"b","number":1},{"str":"b","number":2}] 

所以我寫了這個JavaScript

abc = ["a","b"] 
num = [1,2] 
arr = [] 
a = {} 
for (var i in abc) 
    { 
    str = abc[i] 
    a.str = str; 
    for(var x in num) 
     { 
     number = num[x] 
     a.number = number 
     console.log(a) 
     arr.push(a) 
     } 
    } 

控制檯日誌看起來不錯，但數組看起來像這樣：

[{"str":"b","number":2},{"str":"b","number":2},{"str":"b","number":2},{"str":"b","number":2}] 

任何人都可以解釋這一點嗎？

Answer 1

發生這種情況是因爲您實際上正在使用對同一對象的引用，因此一次又一次地修改相同的對象。

要修復它，你必須在你想使用不同的迭代的每個迭代中聲明一個新的對象。

嘗試這樣：

var abc = ["a", "b"]; 
 
var num = [1, 2]; 
 
var arr = []; 
 

 
for (var i in abc) { 
 
    for (var x in num) { 
 
    var a = {}; 
 
    a.str = abc[i]; 
 
    a.number = num[x]; 
 
    arr.push(a); 
 
    } 
 
} 
 

 
console.log(arr);

另外，不要忘記用var或let與;聲明變量，結束您的語句。

Answer 2

如評論中所述，您已將a對象多次推入arr，而不是添加四個單獨的對象。要解決此問題，您可以在for (var x in num)循環中聲明a，每次作爲新對象（使用const或let）。但我已經進一步簡化了它，請參閱下面的代碼。

要遍歷JavaScript數組，您應該使用.forEach方法。

​​3210

Answer 3

abc = ["a","b"] 
num = [1,2] 
arr = [] 

for (var i in abc) 
    { 

    for(var x in num) 
     { 
     a = {} ---------------- Reset "a" 
     str = abc[i] --------------------- 1 
     a.str = str; --------------------- 2 
     number = num[x] 
     a.number = number 
     console.log(a) 
     arr.push(a) 
     } 
    } 

console.log(arr) 

//移動1和2中的第二循環

Answer 4

內使用地圖：

let tempArray = abc.map((e,i) => { return num.map((ee,ii) => { return {"str": e, "number": ee }; }) }); 
$.merge(tempArray[0], tempArray[1]);