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配合
map使用有什么要注意的？
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可以生成一些特殊的数组。
