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

Question

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

  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 中第一项的副本 - 相反，它只是另一个引用 em> 到内存中的同一个对象。因此，当您更改 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);