JavaScript fill 方法

最后修改于 2025 年 4 月 4 日

在本文中，我们将展示如何使用 JavaScript 中的 fill 方法填充数组。

数组填充

fill 方法将数组中的所有元素更改为静态值。它会修改原始数组并返回修改后的数组。该方法最多可以接受三个参数：值、起始索引和结束索引。

当您需要使用默认值初始化数组或重置现有数组值时，此方法非常有用。 fill 方法适用于空数组和已填充的数组。它可以填充整个数组或仅填充一部分。

fill 方法是一种改变数组内容的修改方法。与某些数组方法不同，它不会创建新数组。原始数组将通过此操作直接修改。

以下示例演示了 fill 方法的基本用法。

main.js

const arr = [1, 2, 3, 4, 5];
arr.fill(0);

console.log(arr);

我们创建一个数组并将其所有元素填充为值 0。原始数组被修改。 fill 方法返回修改后的数组，但我们不需要捕获它，因为原始数组已更改。

$ node main.js
[ 0, 0, 0, 0, 0 ]

fill 方法可以接受一个起始索引来开始填充。

main.js

const fruits = ['apple', 'banana', 'cherry', 'date'];
fruits.fill('orange', 2);

console.log(fruits);

我们从索引 2 开始填充数组。索引 2 之前的元素保持不变。当未指定结束索引时，填充操作将继续到数组的末尾。

$ node main.js
[ 'apple', 'banana', 'orange', 'orange' ]

fill 方法可以同时接受起始索引和结束索引来填充特定范围。

main.js

const numbers = [1, 2, 3, 4, 5, 6];
numbers.fill(9, 1, 4);

console.log(numbers);

我们用值 9 填充数组，从索引 1 到但不包括索引 4。结束索引是排他性的。原始数组将使用指定范围内的值进行修改。

$ node main.js
[ 1, 9, 9, 9, 5, 6 ]

fill 方法可用于使用指定长度创建的空数组。

main.js

const emptyArray = new Array(5);
emptyArray.fill('default');

console.log(emptyArray);

我们创建一个长度为 5 的空数组，并用“default”填充所有元素。这是使用默认值初始化数组的常见模式。 fill 方法适用于使用 Array 构造函数创建的稀疏数组。

$ node main.js
[ 'default', 'default', 'default', 'default', 'default' ]

当用对象填充数组时，所有元素都引用同一个对象。

main.js

const objArray = new Array(3).fill({ value: 0 });
objArray[0].value = 5;

console.log(objArray);

我们创建一个用对象填充的数组。更改一个对象的属性会影响所有元素，因为它们引用同一个对象。对于独立对象，请改用 Array.from 和映射函数。

$ node main.js
[ { value: 5 }, { value: 5 }, { value: 5 } ]

在本文中，我们演示了如何使用 fill() 方法来修改 JavaScript 中的数组。

我的名字是 Jan Bodnar，我是一位充满激情的程序员，拥有丰富的编程经验。自 2007 年以来，我一直在撰写编程文章。迄今为止，我已撰写了 1,400 多篇文章和 8 本电子书。我拥有超过十年的编程教学经验。