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 2016.

fill() は Array インスタンスのメソッドで、インデックスの範囲内にある配列のすべての要素を一定の値に変更します。これは変更した配列を返します。

試してみましょう

構文

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

引数

value

配列を埋める値。もし value がオブジェクトであれば、配列のそれぞれの要素はそのオブジェクトを参照します。

start 省略可

埋め始める位置のゼロから始まるインデックスで、整数に変換されます。

  • インデックスが負の場合、配列の末尾からさかのぼって数えます。 start < 0 の場合、 start + array.length が使用されます。
  • start < -array.length または start が省略された場合は 0 が使用されます。
  • start >= array.length の場合、埋められるインデックスはありません。
end 省略可

埋め終える位置のゼロから始まるインデックスで、整数に変換されます。 fill() は end を含まず、その直前までを埋めます。

  • インデックスが負の場合、配列の末尾からさかのぼって数えます。 end < 0 の場合、 end + array.length が使用されます。
  • end < -array.length の場合は 0 が使用されます。
  • end >= array.length または end が省略された場合、

返値

value で埋められて変更された配列です。

解説

fill() メソッドは変更メソッドです。これは this の長さは変更しませんが、 this のコンテンツは変更します。

fill() メソッドは疎配列の空のスロットを、 value で埋めます。

every() メソッドは汎用的です。このメソッドは this の値に length プロパティと整数のキーを持ったプロパティがあることだけを求めます。文字列も配列風のものですが、文字列は不変なので、このメソッドを適用するのは適していません。

メモ: Array.prototype.fill() を空の配列に対して使用すると、配列に変更するものがないので何も変更されません。 配列を宣言する際に Array.prototype.fill() を使用する場合は、スロットを配列に割り当てるようにしてください。 例はこちら。

例

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]

// 配列の各スロットから参照される、単一のオブジェクト。
const arr = Array(3).fill({}); // [{}, {}, {}]
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

fill() を使用してすべて 1 の行列を作成

この例では、 Octave や MATLAB の ones() 関数のように、すべて 1 の行列を作成する方法を示しています。

js
const arr = new Array(3);
for (let i = 0; i < arr.length; i++) {
  arr[i] = new Array(4).fill(1); // 大きさが 4、内容が 1 の配列を作成
}
arr[0][0] = 10;
console.log(arr[0][0]); // 10
console.log(arr[1][0]); // 1
console.log(arr[2][0]); // 1

fill() を使用して空の配列を生成

この例では、配列に値を入力し、すべての要素に詳細な値を設定する方法を示しています。 end 引数を指定する必要はありません。

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

配列は最初はインデックスが割り当てられていない疎配列であることに注意してください。 fill() でこの配列を埋めることができます。

配列でないオブジェクトに対する fill() の呼び出し

fill() メソッドは this の length プロパティを読み取り、 start から 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

ブラウザーの互換性

BCD tables only load in the browser

関連情報