用其他数组中的元素替换Javascript数组中的元素

Question

我有以下简单的代码，使用Java Array

  var fruits = [["Banana", "Orange", "Apple", "Mango"]];
  var names  =  ["Adam", "Emma", "Joe", "David"];                
  var newArray=[];

  for (var i = 0 ; i < 4 ; i++){      
    newArray[i] = fruits[0];    // Copy fruits[] into newArray[] 
    newArray[i][1] = names[i];  // Then replace the 2nd element with names[]    
  } 

欲望的结局是这样的...

newArray[0] = ["Banana", "Adam" , "Apple", "Mango"]
newArray[1] = ["Banana", "Emma" , "Apple", "Mango"]
newArray[2] = ["Banana", "Joe"  , "Apple", "Mango"]
newArray[3] = ["Banana", "David", "Apple", "Mango"]

但是我得到了最终结果，无法弄清为什么...

newArray[0] = ["Banana", "David" , "Apple", "Mango"]
newArray[1] = ["Banana", "David" , "Apple", "Mango"]
newArray[2] = ["Banana", "David" , "Apple", "Mango"]
newArray[3] = ["Banana", "David" , "Apple", "Mango"]

我对JS只是一个新手，所以认为这可以归结为简单的事情，但在现阶段，这是一堵无法通过的砖墙。 您的帮助将不胜感激。

Answer 1

问题是：

newArray[i] = fruits[0];    // Copy fruits[] into newArray[] 

newArray[i]不是fruits第一项的副本 -而是内存中同一对象的另一个引用 。 因此，当您更改newArray[i] ，还更改了fruits[0] ，并且还更改了其他所有对fruits[0]具有相同引用的变量，即newArray 每个项目。

在每次迭代中显式克隆fruits[0] ：

 var fruits = [ ["Banana", "Orange", "Apple", "Mango"] ]; var names = ["Adam", "Emma", "Joe", "David"]; var newArray = []; for (var i = 0; i < 4; i++) { newArray[i] = [...fruits[0]]; newArray[i][1] = names[i]; } console.log(newArray); 

[...fruits[0]]是扩展语法-它创建fruits[0]的浅表副本。

不过，您可能会考虑使用.map ，当您根据另一个元素的每个元素创建新数组时， .map更为合适：

 var fruits = [ ["Banana", "Orange", "Apple", "Mango"] ]; var names = ["Adam", "Emma", "Joe", "David"]; const newArray = names.map((name) => { const arr = [...fruits[0]]; arr[1] = name; return arr; }); console.log(newArray); 

或者，不扩散，使用slice ：

 var fruits = [ ["Banana", "Orange", "Apple", "Mango"] ]; var names = ["Adam", "Emma", "Joe", "David"]; const newArray = names.map((name) => { const arr = fruits[0].slice(); arr[1] = name; return arr; }); console.log(newArray);