Замена элементов Javascript Array элементом из другого массива

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