在 ES6 中，Array 原型上添加了一个 fill() 方法，可以对数组进行填充。ES9 对它进行了一些更新，在处理嵌套数组或具有默认值数组时，我们可能会面临一些问题。在本文中，我们将学习如何解决在 ES9 中使用 Array.prototype.fill() 时可能会遇到的问题。
问题 1：嵌套数组
在 ES6 中，fill() 方法不适用于嵌套数组，它仅适用于元素相同的简单数组。但在 ES9 中，fill() 方法将递归地应用于嵌套的数组，以填充所有子数组。
const arr = new Array(3).fill([1, 2]); console.log(arr); // [[1, 2], [1, 2], [1, 2]] arr[0][0] = 3; console.log(arr); // [[3, 2], [3, 2], [3, 2]]
在上面的示例中，我们将一个长度为 3 的数组填充为一个包含两个元素的数组。结果是一个包含三个相同的数组的新数组。如果我们修改任何一个嵌套数组的元素，则所有嵌套数组的元素都将改变。
因此，我们需要注意如何使用 fill() 方法来填充数组，特别是在嵌套数组的情况下。
问题 2：默认值数组
在填充数组时，我们可能需要不同的默认值。在 ES9 中，我们可以为数组的不同区间设置不同的默认值。但是，我们在使用 Array.prototype.fill() 时，可能会遇到这个问题。
const arr = new Array(5).fill(0, 1, 3); console.log(arr); // [undefined, 0, 0, undefined, undefined]
在上面的示例中，我们想要将数组的第 2 个至第 4 个元素填充为 0。但实际上，只有第 2 和第 3 个元素被填充为 0，其他元素则是未定义的。
这是因为 fill() 方法使用“浅层克隆”的方式来填充数组。这就意味着它只填充了数组的引用，并没有填充数组元素的值。因此，在使用 fill() 方法时，我们应该始终为数组的所有元素设置默认值，而不仅仅是某些元素。
const arr = Array(5).fill().map(() => []); console.log(arr); // [[], [], [], [], []] arr[0][0] = 1; console.log(arr); // [[1], [], [], [], []]
在上面的示例中，我们使用 map() 方法为数组的每个元素创建一个新的空数组并填充它们。现在，修改一个元素不会影响其他元素的值。
结论
在 ES9 中使用 Array.prototype.fill() 时，我们需要注意以下两个问题：
- 在填充嵌套数组时，填充的是数组的引用而不是元素的值，因此我们需要小心使用该方法。
- 在为数组的不同区间设置不同的默认值时，我们应该为所有元素设置默认值，而不仅仅是某些元素。
如果我们谨慎使用 Array.prototype.fill()，则可以更轻松地进行数组填充。
示例代码
-- -------------------- ---- ------- -- ---- ----- --- - --- ----------------- ---- ----------------- -- ---- --- --- --- --- --- --------- - -- ----------------- -- ---- --- --- --- --- --- -- ----- ----- --- - ---------------------- -- ---- ----------------- -- ---- --- --- --- --- --------- - -- ----------------- -- ----- --- --- --- ---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67033b1bd91dce0dc84a7b29