Javascript：推入一个空的 3d 数组

Question

我创建一个空的 3x3x1 3D 数组

[
  [[],[],[]],
  [[],[],[]],
  [[],[],[]]
]

现在，位置 arr[1][1] 的元素是 []，所以，如果我执行 arr[1][1].push(1) 它应该在位置 arr[1][1][= 插入 1 21=]

在JS中创建一个空的3x3x1数组有2种方法，代码如下，

var arr1 = [...new Array(3)].map(e => [...new Array(3)].fill([]));
var arr2 = [[[],[],[]],[[],[],[]],[[],[],[]]];
arr1[1][1].push(1);
arr2[1][1].push(1);
console.log(arr1)
console.log(arr2)

即。通过快捷方式和另一个手动，arr1和arr2应该是相同的，所以输出应该是相同的，但是输出如下，

[[[], [], []], [[1], [1], [1]], [[], [], []]]

[[[], [], []], [[], [1], []], [[], [], []]]

为什么第一个数组给出这样的输出？两者不一样吗？

我希望输出为第二种形式，如果这是创建空 3x3x1 数组的错误方法，请建议一种能够提供预期输出的方法。

Answer 1

再使用一张嵌套地图。我认为 fill 调用将在每个第二维中用 same 数组填充第一个 map 而不是唯一的数组，这意味着第二维都是参考同一个数组。

来自 fill 的文档甚至注意到 value 将完全相同：

Value to fill the array with. (Note all elements in the array will be this exact value.)

另外（数组是一个对象）：

If the first parameter is an object, each slot in the array will reference that object.

const arr1 = [...new Array(3)].map(e => [...new Array(3)].fill([]));
const arr2 = [[[],[],[]],[[],[],[]],[[],[],[]]];
const arr3 = [...new Array(3)].map(() => [...new Array(3)].map(() => []));

arr1[1][1].push(1);
arr2[1][1].push(1);
arr3[1][1].push(1);

console.log(JSON.stringify(arr1)); // [[[],[],[]],[[1],[1],[1]],[[],[],[]]]
console.log(JSON.stringify(arr2)); // [[[],[],[]],[[],[1],[]],[[],[],[]]]
console.log(JSON.stringify(arr3)); // [[[],[],[]],[[],[1],[]],[[],[],[]]]

换句话说：

const expandedArr1 = [...new Array(3)].map(() => {
  /*
   * From MDN fill documentation:
   * Value to fill the array with. (Note all elements in the array will be this exact value.)
   */
  return [...new Array(3)].fill([]); // Every element will get this exact value (reference)
});

// They are the same reference:
console.log(expandedArr1[1][1] === expandedArr1[1][2]);

Answer 2

之所以会出现这种情况，是因为fill方法在三者中都填充了“精确值”。

MDN：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill 参见参数值说明中的注释。

var arr1 = [...new Array(3)].map(e => [...new Array(3)].map(e=>[])); // Note that i have used a map with a function returning an array([]) instead of your fill method
var arr2 = [[[],[],[]],[[],[],[]],[[],[],[]]];
arr1[1][1].push(1);
arr2[1][1].push(1);
console.log(arr1)
console.log(arr2)

Javascript：推入一个空的 3d 数组

Javascript: Pushing in an Empty 3d Array

javascript

arrays

push