跳到主要内容

JavaScript 数组 fill() 方法

fill() 方法通过用指定值填充所有元素来返回一个数组。

示例​

// 定义一个数组
var fruits = ["Apple", "Banana", "Grape"];

// 用 'Cherry' 填充数组的每个元素
fruits.fill("Cherry");

console.log(fruits);

// 输出：
// [ 'Cherry', 'Cherry', 'Cherry' ]

fill() 语法​

fill() 方法的语法是：

arr.fill(value, start, end);

这里，arr 是一个数组。

fill() 参数​

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

  • value - 用于填充数组的值。
  • start（可选）- 起始索引（默认为 0）。
  • end（可选）- 结束索引（默认为 数组长度），始终不包括此索引。

fill() 返回值​

  • 返回从 start 到 end 用 value 填充的修改后的数组。

注释：

  • 如果 start 或 end 为负数，则索引从后向前计算。
  • 由于 fill() 是一个变异方法，它改变了数组本身（而不是副本）并返回它。

示例 1：使用 fill() 方法​

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

// 用 '5' 填充数组的每个元素
new_prices = prices.fill(5);

console.log(prices);

console.log(new_prices);

输出

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

在上面的示例中，我们使用 fill() 方法用 5 填充了 prices 数组的每个元素。

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

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

示例 2：带三个参数的 fill() 方法​

// 数组定义
var language = ["JavaScript", "Python", "C", "C++"];

// 用 'JavaScript' 替换数组从索引 1 到 3 的元素
language.fill("JavaScript", 1, 3);

// 打印原始数组
console.log(language);

输出

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

在这里，我们使用 fill() 方法在语言数组中的索引 1 到 3（不包括 3）用 'JavaScript' 填充。

所以该方法只替换了 language[1] 和 language[2] 的元素为 'JavaScript'。

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

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

// 传递负索引时，从数组后面开始计算
rank.fill(15, -2);

// 打印修改后的 'rank' 数组
console.log(rank); // [ 8, 9, 15, 15 ]

// 传递无效索引不会导致更改
rank.fill(15, 7, 8);

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

// 传递无效索引
rank.fill(15, NaN, NaN);

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

输出

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

在上面的例子中，我们在 fill() 方法中传入了负索引值 -2 作为开始位置。rank.fill(15,-2) 会将数组的最后两个元素填充为 15。

如果我们传入一个大于数组大小的索引值作为开始和结束，

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

这里，7, 8 和 NaN, NaN 是无效索引，所以该方法会返回未改变的数组。

推荐阅读： JavaScript 数组

最后于 更新