fill 方法会直接修改原数组，若要避免修改原数组，应先使用 slice 方法创建副本再调用 fill；当填充对象时，由于填充的是引用，修改其中一个元素会影响所有元素，因此需注意使用独立对象；fill 可结合 Array.from 生成特定数组，且能填充稀疏数组的空槽，但不支持老浏览器时需引入 polyfill。
用
fill
方法，可以直接修改原数组，把数组的一部分或者全部替换成指定的值。这玩意儿用起来挺方便，但也有点小坑，一会儿细说。
解决方案
fill
的基本用法是
array.fill(value, start, end)
。
value
是你要填充的值，
start
是起始索引（包含），
end
是结束索引（不包含）。如果
start
和
end
都省略了，那就把整个数组都填满。
举个例子：
let arr = [1, 2, 3, 4, 5]; arr.fill(0, 2, 4); // 从索引2开始，到索引4之前（不包括4） console.log(arr); // 输出: [1, 2, 0, 0, 5] let arr2 = [1, 2, 3, 4, 5]; arr2.fill(9); // 全部填充 console.log(arr2); // 输出: [9, 9, 9, 9, 9]
需要注意的是，
fill
是直接修改原数组，而不是返回一个新的数组。
如果
value
是一个对象，那可就有点意思了。
fill
填充的是对象的引用，而不是复制对象。这意味着，如果你修改了其中一个填充的对象，所有填充的对象都会被修改。
let obj = { a: 1 }; let arr3 = new Array(3).fill(obj); console.log(arr3); // 输出: [{a: 1}, {a: 1}, {a: 1}] arr3[0].a = 2; console.log(arr3); // 输出: [{a: 2}, {a: 2}, {a: 2}] 注意这里都变了！
看到了吧，
arr3[0].a
修改了，整个数组里的对象都跟着变了。这是因为它们都指向同一个对象。
如何避免
fill
修改原数组？
其实很简单，用
slice
复制一份再
fill
就行了。
let arr4 = [1, 2, 3, 4, 5]; let newArr = arr4.slice().fill(0, 2, 4); console.log(arr4); // 输出: [1, 2, 3, 4, 5] (原数组没变) console.log(newArr); // 输出: [1, 2, 0, 0, 5] (新数组被修改)
这样，
newArr
就是一个全新的数组，修改它不会影响到
arr4
。
fill
方法还可以用来初始化数组，特别是当数组的长度是动态确定的时候。
let len = 10; let arr5 = new Array(len).fill(null); // 初始化一个长度为10的数组，所有元素都是null console.log(arr5); // 输出: [null, null, null, null, null, null, null, null, null, null]
fill
还有一个比较少见的用法，就是配合
Array.from
来生成一些特殊数组。
let arr6 = Array.from({length: 5}, (_, i) => i + 1); // 生成 [1, 2, 3, 4, 5] console.log(arr6); let arr7 = Array.from({length: 5}).fill(0); // 生成 [0, 0, 0, 0, 0]， 注意这里先fill再from效果不一样 console.log(arr7);
Array.from
允许你从一个类数组对象或者可迭代对象创建一个新的数组实例。
fill
的兼容性怎么样？
fill
是 es6 引入的，所以老版本的浏览器可能不支持。如果需要兼容老版本浏览器，可以使用 polyfill。
if (!Array.prototype.fill) { Array.prototype.fill = function(value) { // Steps 1-2. if (this == null) { throw new TypeError('this is null or not defined'); } var O = Object(this); // Steps 3-5. var len = O.length >>> 0; // Steps 6-7. var start = arguments[1]; var relativeStart = start >> 0; // Step 8. var k = relativeStart < 0 ? Math.max(len + relativeStart, 0) : Math.min(relativeStart, len); // Steps 9-10. var end = arguments[2]; var relativeEnd = end === undefined ? len : end >> 0; // Step 11. var final = relativeEnd < 0 ? Math.max(len + relativeEnd, 0) : Math.min(relativeEnd, len); // Step 12. while (k < final) { O[k] = value; k++; } // Step 13. return O; }; }
这个 polyfill 可以在 MDN 上找到。
fill
配合
使用有什么要注意的？
fill
和
map
都是数组操作中常用的方法，但是它们的行为有所不同。
fill
直接修改原数组，而
map
返回一个新的数组。
let arr8 = [1, 2, 3]; arr8.fill(0).map(x => x + 1); // 看起来像要把数组填充为0，然后每个元素加1 console.log(arr8); // 输出: [0, 0, 0]
上面的代码并没有达到预期的效果，因为
fill
先把数组变成了
[0, 0, 0]
，然后
map
对这个数组进行操作，但是
map
的返回值并没有赋值给
arr8
。
如果想要达到预期的效果，可以先
map
再
fill
，或者使用
Array.from
。
let arr9 = [1, 2, 3].map(x => x + 1); console.log(arr9); // 输出: [2, 3, 4] let arr10 = Array.from([1, 2, 3], x => x + 1); console.log(arr10); // 输出: [2, 3, 4]
什么时候应该使用
fill
，什么时候应该使用循环？
一般来说，如果需要批量设置数组的某个范围内的值，
fill
是一个不错的选择，代码简洁易懂。如果需要根据索引或者其他条件来设置数组的值，循环可能更灵活。
fill
在处理稀疏数组时的行为是什么？
稀疏数组是指数组中包含空槽（hole）的数组。
fill
会将稀疏数组中的空槽填充为指定的值。
let arr11 = new Array(5); // 创建一个长度为5的稀疏数组 console.log(arr11); // 输出: [ <5 empty items> ] arr11.fill(0); console.log(arr11); // 输出: [ 0, 0, 0, 0, 0 ]
fill
会将稀疏数组中的所有空槽都填充为 0。
总结一下，
fill
是一个很方便的数组填充方法，但是需要注意它的行为，特别是当填充的值是对象的时候。要避免修改原数组，可以使用
slice
复制一份再
fill
。 在某些情况下，
fill
配合
Array.from
可以生成一些特殊的数组。
评论（已关闭）
评论已关闭