Изменение значений в вложенных массивах JS

Question

Следующий код должен создать пустой массив, содержащий 7 пустых массивов, эффективно сетку 7x7.

Доступ к элементам в вложенных массивах работает нормально, но при попытке изменить их значения изменяется значение всех элементов в одном столбце (поэтому изменение [1] [1] также изменяется [0] [1], [2] [ 1] и т. Д.). Я не понимаю, почему.

var usage = new Array(7).fill(new Array(7).fill(0)); 

usage[1][1] += 1; 

https://jsfiddle.net/v3o4rwsz/

Answer 1

Это легко ловушку попасть в. Ваш код эквивалентен:

var innerArray = [0,0,0,0,0,0,0]; // .fill(0) 
var usage = [innerArray, innerArray, innerArray, innerArray, 
      innerArray, innerArray, innerArray]; // .fill(innerArray) 

console.log(usage[0]==innerArray); // true 
console.log(usage[1]==innerArray); // true 

Чтобы получить нужный результат, необходимо создать новый массив для каждого элемента в использовании, например:

var usage = []; 
for (var i=0; i<7; i++) { 
    usage.push(new Array(7).fill(0)); 
} 

Answer 2

Содержание первого fill только оценивая один раз - создавая второй массив, а затем он дублирует этот массив 7 раз, поэтому все они связаны.

Это эквивалентно:

var t1 = new Array(7).fill(0); 

var t2 = t1; 
var t3 = t1; 
var t4 = t1; 
var t5 = t1; 
var t6 = t1; 
var t7 = t1; 

t2[3] = "duplicate" 

console.log(t1); 
console.log(t2); 
console.log(t3); 

который будет показывать то же значение в t1 для t7.

Answer 3

Я считаю, что такое поведение вызвано использованием .fill(). Если вы посмотрите на определение этого function here вы увидите, что он заполняет массив с статическим значением

Это означает, что когда вы ссылаетесь usage[1][1] вы ссылаетесь тот же массив, который существует в usage[0][1], usage[2][1] и так далее.

Вы можете заполнить массив циклом for, как показано ниже.

var usage2 = new Array(); 

for(var i=0;i<7;i++) { 
    usage2.push(new Array(7).fill(0)); 
} 

Теперь, когда вы проверить значения, которые вы увидите ожидаемый результат, где только один массив, изменяется, как на скриншоте ниже моего Chrome консоли.