JavaScript Array fill()

// defining an array 
var fruits = ['Apple', 'Banana', 'Grape'];

// filling every element of the array with 'Cherry'
fruits.fill("Cherry");

console.log(fruits);

// Output: 
// [ 'Cherry', 'Cherry', 'Cherry' ]

fill() 语法

fill() 方法的语法是

arr.fill(value, start, end)

这里，arr 是一个数组。

fill() 参数

fill() 方法可以接受 **3** 个参数

• value - 用于填充数组的值。
• start (可选) - 开始索引（默认为 **0**）。
• end (可选) - 结束索引（默认为 Array.length），此索引始终不包含在内。

fill() 返回值

• 返回修改后的数组，该数组从 start 到 end（不包含 end）都填充了 value。

示例 1：使用 fill() 方法

var prices = [651, 41, 4, 3, 6];

// filling every element of the array with '5'
new_prices = prices.fill(5);

console.log(prices);

console.log(new_prices); 

输出

[ 5, 5, 5, 5, 5 ]
[ 5, 5, 5, 5, 5 ]

在上面的示例中，我们使用 fill() 方法将 prices 数组的所有元素填充为 **5**。

我们在方法中将 **5** 作为填充值传递，然后将返回值赋给 new_prices。

由于该方法是变异方法，prices.fill(5) 会修改原始数组，因此 prices 和 new_prices 都包含相同的值。

示例 2：使用三个参数的 fill() 方法

// array definition
var language = ["JavaScript", "Python", "C", "C++"];

// replacing element of array from index 1 to 3 by 'JavaScript'
language.fill("JavaScript", 1, 3);
// printing the original array
console.log(language);

输出

[ 'JavaScript', 'JavaScript', 'JavaScript', 'C++']

在这里，我们使用 fill() 方法将 'JavaScript' 填充到 language 数组中，从索引 **1** 到 **3**（不包含 **3**）。

因此，该方法仅替换 language[1] 和 language[2] 的元素为 'JavaScript'。

示例 3：使用无效索引的 fill() 方法

var rank = [8, 9, 3, 7];

// on passing negative index, counting starts from back
rank.fill(15, -2);

// prints the modified 'rank' array
console.log(rank);  // [ 8, 9, 15, 15 ]

// passing invalid index result in no change
rank.fill(15, 7, 8);

console.log(rank);  // [ 8, 9, 15, 15 ]

// passing invalid indexes
rank.fill(15, NaN, NaN);

console.log(rank);  // [ 8, 9, 15, 15 ]

输出

[ 8, 9, 15, 15 ]
[ 8, 9, 15, 15 ]
[ 8, 9, 15, 15 ]

在上面的示例中，我们将负数索引值 **-2** 作为 start 传递给 fill() 方法。rank.fill(15,-2) 用 **15** 填充了数组的最后两个元素。

如果我们传递一个大于数组大小的索引值作为 start 和 end，

rank.fill(15, 7, 8);
rank.fill(15, NaN, NaN);

在这里，**7, 8** 和 **NaN, NaN** 是无效索引，因此方法返回数组而不进行更改。