增量运算符中的奇怪行为

Question

我正在玩javascript尝试创建一个像这样的经典螺旋矩阵：

01 02 03 04
12 13 14 05
11 16 15 06
10 09 08 07

但是当我调试我的代码时，我发现了一些奇怪的东西： [1][x]为j

时，矩阵数组填充空格0

这怎么可能？

这种行为的解释是什么？

这是一段代码：

var draw = function(direction, dim) {
    var directions = ['right', 'down', 'left', 'up'];
    var __matrix = Array(dim[0]).fill(Array(dim[1]).fill(0));
    var fill = {};

  fill.right = function(nextIndex, matrix, j, i, value) {
    if(value === (dim[0] * dim[1])) { return matrix; }
    if(matrix[j][i] === 0) { matrix[j][i++] = value++; }
    else { i--; nextIndex++; }
    debugger;
    return fill[directions[nextIndex]].apply({}, arguments);
  }

  fill.down = function() { }; //todo
  fill.left = function() { }; //todo
  fill.up = function() { }; //todo

  return fill[direction](directions.indexOf(direction), __matrix, 0, 0, 1);
};

console.log(draw('right', [4,4]));

Answer 1

这与增量运算符无关。您正在写0索引，只是碰巧矩阵数组中的每个数组都是相同的数组引用。

var arr = Array(4).fill(Array(4).fill(0))
//arr[0] === arr[1] === arr[2] === arr[3]
arr[0][0] = 'Hey';
console.log(arr[1][0]) //also 'Hey'

Answer 2

在此行中显示您的问题

Array(dim[0]).fill(Array(dim[1]).fill(0));

Array.fill生成数组的浅副本

当您更改数组的一个元素时，它将影响所有元素，因为它引用同一个对象。

见下面的例子：

＆＃13;

＆＃13;

var matrix = Array(5).fill(Array(5).fill(0));

document.write('<br>before <pre>' + JSON.stringify(matrix) + '</pre>') ;

matrix[1][0] = 1;

document.write('<br>after <pre>' + JSON.stringify(matrix) + '</pre>') ;

＆＃13;

＆＃13;

＆＃13;

Answer 3

很难回答这样的问题，对不起...... 我试着在被起诉的陈述（console.log()）之前和之后加上一些matrix[j][i++] = value++;，以了解发生了什么......