JS数组fill方法使用全解析

一分耕耘，一分收获！既然都打开这篇《JS数组填充技巧：fill方法使用详解》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

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 可以生成一些特殊的数组。

今天关于《JS数组fill方法使用全解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！