Array.prototype.fill()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Array 实例的 fill() 方法将数组中索引范围内的所有元素更改为静态值。它返回修改后的数组。

¥The fill() method of Array instances changes all elements within a range of indices in an array to a static value. It returns the modified array.

Try it

语法

¥Syntax

js
fill(value)
fill(value, start)
fill(value, start, end)

参数

¥Parameters

value

用于填充数组的值。请注意,数组中的所有元素都将是这个精确值:如果 value 是一个对象,则数组中的每个槽都将引用该对象。

start Optional

开始填充的从零开始的索引,转换为整数

  • 负索引从数组末尾开始倒数 — 如果使用 -array.length <= start < 0start + array.length
  • 如果省略 start < -array.lengthstart,则使用 0
  • 如果为 start >= array.length,则不填充任何索引。
end Optional

结束填充的从零开始的索引,转换为整数fill() 填充至但不包括 end

  • 负索引从数组末尾开始倒数 — 如果使用 -array.length <= end < 0end + array.length
  • 如果使用 end < -array.length0
  • 如果省略 end >= array.lengthend,则使用 array.length,导致直到末尾的所有索引都被填充。
  • 如果 end 暗示在 start 暗示的位置之前或处的位置,则不填充任何内容。

返回值

¥Return value

修改后的数组,用 value 填充。

¥The modified array, filled with value.

描述

¥Description

fill() 方法是 变异法 方法。它不会改变 this 的长度,但会改变 this 的内容。

¥The fill() method is a mutating method. It does not alter the length of this, but it will change the content of this.

fill() 方法也用 value 填充 sparse 数组中的空槽。

¥The fill() method fills empty slots in sparse arrays with value as well.

fill() 方法是 generic。它只期望 this 值具有 length 属性。虽然字符串也是类似数组的,但此方法不适合应用于它们,因为字符串是不可变的。

¥The fill() method is generic. It only expects the this value to have a length property. Although strings are also array-like, this method is not suitable to be applied on them, as strings are immutable.

注意:在空数组 (length = 0) 上使用 Array.prototype.fill() 不会修改它,因为该数组没有任何需要修改的内容。要在声明数组时使用 Array.prototype.fill(),请确保数组具有非零 length参见示例

¥Note: Using Array.prototype.fill() on an empty array (length = 0) would not modify it as the array has nothing to be modified. To use Array.prototype.fill() when declaring an array, make sure the array has non-zero length. See example.

示例

¥Examples

使用 fill()

¥Using fill()

js
console.log([1, 2, 3].fill(4)); // [4, 4, 4]
console.log([1, 2, 3].fill(4, 1)); // [1, 4, 4]
console.log([1, 2, 3].fill(4, 1, 2)); // [1, 4, 3]
console.log([1, 2, 3].fill(4, 1, 1)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, 3, 3)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, -3, -2)); // [4, 2, 3]
console.log([1, 2, 3].fill(4, NaN, NaN)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, 3, 5)); // [1, 2, 3]
console.log(Array(3).fill(4)); // [4, 4, 4]

// A single object, referenced by each slot of the array:
const arr = Array(3).fill({}); // [{}, {}, {}]
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

使用 fill() 创建全为 1 的矩阵

¥Using fill() to create a matrix of all 1

此示例演示如何创建全为 1 的矩阵,如 Octave 或 MATLAB 的 ones() 函数。

¥This example shows how to create a matrix of all 1, like the ones() function of Octave or MATLAB.

js
const arr = new Array(3);
for (let i = 0; i < arr.length; i++) {
  arr[i] = new Array(4).fill(1); // Creating an array of size 4 and filled of 1
}
arr[0][0] = 10;
console.log(arr[0][0]); // 10
console.log(arr[1][0]); // 1
console.log(arr[2][0]); // 1

使用 fill() 填充空数组

¥Using fill() to populate an empty array

此示例演示如何填充数组,将所有元素设置为特定值。不必指定 end 参数。

¥This example shows how to populate an array, setting all elements to a specific value. The end parameter does not have to be specified.

js
const tempGirls = Array(5).fill("girl", 0);

请注意,该数组最初是 稀疏数组,没有分配索引。fill() 仍然能够填充这个数组。

¥Note that the array was initially a sparse array with no assigned indices. fill() is still able to fill this array.

对非数组对象调用 fill()

¥Calling fill() on non-array objects

fill() 方法读取 thislength 属性,并将每个整数键控属性的值设置为 startend

¥The fill() method reads the length property of this and sets the value of each integer-keyed property from start to end.

js
const arrayLike = { length: 2 };
console.log(Array.prototype.fill.call(arrayLike, 1));
// { '0': 1, '1': 1, length: 2 }

规范

Specification
ECMAScript Language Specification
# sec-array.prototype.fill

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看