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

【问题标题】：Javascript: Pushing in an Empty 3d ArrayJavascript：推入一个空的 3d 数组
【发布时间】：2020-10-06 16:40:57
【问题描述】：

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

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

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

在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 数组的错误方法，请建议一种方法，以便它提供预期的输出。

【问题讨论】：

这能回答你的问题吗？ Array.fill gives same object repeated. why?
@Ivar 如果分解，是的。但我认为如果有人有这样的问题，他们不会知道 fill() 是罪魁祸首。他们可能会用这个短语进行搜索。这确实回答了这个问题，我同意。
这就是为什么我们在as a signpost 周围保留这样的问题。 :)
@Ivar 好的，这是一件好事，我很难找到为什么我会遇到这个问题，而且不清楚我们无法正确表达它，他们只会描述更大的图景，它可能会帮助陷入类似情况的人，谢谢。

标签： javascript arrays push

【解决方案1】：

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

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

用来填充数组的值。（注意数组中的所有元素都是这个精确值。）

还有（数组是一个对象）：

如果第一个参数是一个对象，则数组中的每个槽都会引用该对象。

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

【讨论】：

非常感谢，我从另一个答案中找到了这种创建空数组的方法，他们应该提到这可能发生。

【解决方案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)

【讨论】：

非常感谢，我从另一个答案中找到了这种创建空数组的方法，他们应该提到这可能发生。