js 如何使用fill填充数组的某部分内容-js教程-PHP中文网

js 如何使用fill填充数组的某部分内容

小老鼠

发布： 2025-08-23 14:56:01

原创

194人浏览过

fill 方法会直接修改原数组，若要避免修改原数组，应先使用 slice 方法创建副本再调用 fill；当填充对象时，由于填充的是引用，修改其中一个元素会影响所有元素，因此需注意使用独立对象；fill 可结合 array.from 生成特定数组，且能填充稀疏数组的空槽，但不支持老浏览器时需引入 polyfill。

js 如何使用fill填充数组的某部分内容

用

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

登录后复制

允许你从一个类数组对象或者可迭代对象创建一个新的数组实例。

SpeakingPass-打造你的专属雅思口语语料

使用chatGPT帮你快速备考雅思口语，提升分数

查看详情

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 ]

登录后复制