为什么 JavaScript 的 `Array.fill()` 创建共享引用而不是副本，以及 `Array.from()` 如何解决这个问题？

Array.fill() 通过引用创建隐藏副本，而不是通过值

在 JavaScript 中使用 Array.fill 时，可能会遇到一种情况，其中存在多个内部数组矩阵引用相同的底层数组对象。尝试修改单个元素时，这可能会导致意外行为。

问题

例如，考虑以下代码片段：

let m = Array(6).fill(Array(12).fill(0));

此代码旨在创建一个 6x12 矩阵，其中每个元素都初始化为 0。但是，有一个微妙的问题：

m[0][0] = 1;
console.log(m[1][0]); // Outputs 1 instead of 0

之后将 m[0][0] 设置为 1，我们期望 m[1][0] 保持为 0。然而，控制台显示 1。这是因为所有内部数组实际上都引用相同的底层数组对象。

解决方案：Array.from() 来救援

要解决此问题并实现真正的按值复制，可以使用Array.from():

let m = Array.from({length: 6}, e => Array(12).fill(0));

此方法为外部数组中的每个元素创建一个新数组，确保所有内部数组都是不同的对象。因此，修改一个元素不会影响其他元素：

m[0][0] = 1;
console.log(m[0][0]); // Expecting 1
console.log(m[0][1]); // Expecting 0
console.log(m[1][0]); // Expecting 0

以上是为什么 JavaScript 的 `Array.fill()` 创建共享引用而不是副本，以及 `Array.from()` 如何解决这个问题？的详细内容。更多信息请关注PHP中文网其他相关文章！