javascript - 为什么这两个空数组数组的填充方式不同？

Question

我有这个代码。我什至把 console.logs 用来调试它。但我真的不明白为什么他们的行为方式不同。为什么 result1 数组用最后一个数组值填充所有内部数组？

var myMatrix = [
  [0, 1, 2, 3],
  [4, 5, 6, 7],
  [8, 9, 10, 11],
  [12, 13, 14, 15]
];

function rotateMatrixClockwise(matrix) {
  var long = matrix.length;
  var result1 = new Array(long).fill([]);
  var result2 = [ [], [], [], [] ];
  console.log("Empty result1:");
  console.log(result1);
  console.log("Empty result2:");
  console.log(result2);
  for (var row = 0; row < long; row++) {
    for (var col = 0; col < long; col++) {
      result1[row][col] = matrix[long - col - 1][row];
      result2[row][col] = matrix[long - col - 1][row];
    }
  }
  console.log("Result1:");
  console.log(result1);
  console.log("Result2:");
  console.log(result2);
}

rotateMatrixClockwise(myMatrix);

Answer 1

您正在用数组中的相同对象引用填充数组

var result1 = new Array(long).fill([]);
//                                 ^^ same array for all elements

以后的任何赋值都发生在同一个数组中。

在工作版本中，

var result2 = [[], [], [], []];
//             ^^  ^^  ^^  ^^  four different arrays

你有四个不同的数组，它们没有引用同一个数组。

Array.fill 的引用声明静态行为，而在 Javascript 中，对象通过引用传递。

The fill() method fills all the elements of an array from a start index to an end index with a static value.

var myMatrix = [
  [0, 1, 2, 3],
  [4, 5, 6, 7],
  [8, 9, 10, 11],
  [12, 13, 14, 15]
];

function rotateMatrixClockwise(matrix) {
  var array = [];
  var long = matrix.length;
  var result1 = new Array(long).fill(array);
  var result2 = [[], [], [], []];
  console.log("Empty result1:");
  console.log(result1);
  console.log("Empty result2:");
  console.log(result2);
  for (var row = 0; row < long; row++) {
    for (var col = 0; col < long; col++) {
      result1[row][col] = matrix[long - col - 1][row];
      result2[row][col] = matrix[long - col - 1][row];
    }
  }
  console.log("Result1:");
  console.log(result1);
  console.log("Result2:");
  console.log(result2);
  console.log('array', array);
}

rotateMatrixClockwise(myMatrix)