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 2015年9月.
fill() は Array インスタンスのメソッドで、インデックスの範囲内にある配列のすべての要素を一定の値に変更します。これは変更した配列を返します。
試してみましょう
const array = [1, 2, 3, 4];
// 0 で位置 2 から位置 4 までを埋める
console.log(array.fill(0, 2, 4));
// 予想される結果: Array [1, 2, 0, 0]
// Fill with 5 from position 1
console.log(array.fill(5, 1));
// 予想される結果: Array [1, 5, 5, 5]
console.log(array.fill(6));
// 予想される結果: Array [6, 6, 6, 6]
構文
fill(value)
fill(value, start)
fill(value, start, end)
引数
value-
配列を埋める値。もし
valueがオブジェクトであれば、配列のそれぞれの要素はそのオブジェクトを参照します。 start省略可-
埋め始める位置のゼロから始まるインデックスで、整数に変換されます。
- インデックスが負の場合、配列の末尾からさかのぼって数えます。
-array.length <= 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が省略されているかundefinedの場合、array.lengthが使用され、末尾までのすべてのインデックスが埋められます。endがstartが示す位置よりも前またはその位置であることを意味する場合、何も埋められません。
- インデックスが負の場合、配列の末尾からさかのぼって数えます。
返値
value で埋められて変更された配列です。
解説
fill() メソッドは変更メソッドです。これは this の長さは変更しませんが、 this のコンテンツは変更します。
fill() メソッドは疎配列の空のスロットを、 value で埋めます。
fill() メソッドは汎用的です。このメソッドは this の値に length プロパティと整数のキーを持ったプロパティがあることだけを求めます。文字列も配列風のものですが、文字列は不変なので、このメソッドを適用するのは適していません。
メモ:
Array.prototype.fill() を空の配列に対して使用すると、配列に変更するものがないので何も変更されません。
配列を宣言する際に Array.prototype.fill() を使用する場合は、スロットを配列に割り当てるようにしてください。
例はこちら。
例
fill の使用
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 の行列を作成する方法を示しています。
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 引数を指定する必要はありません。
const tempGirls = Array(5).fill("girl", 0);
配列は最初はインデックスが割り当てられていない疎配列であることに注意してください。 fill() でこの配列を埋めることができます。
配列でないオブジェクトに対する fill() の呼び出し
fill() メソッドは this の length プロパティを読み取り、 start から end までの各整数キーのプロパティの値を設定します。
const arrayLike = { length: 2 };
console.log(Array.prototype.fill.call(arrayLike, 1));
// { '0': 1, '1': 1, length: 2 }
仕様書
| Specification |
|---|
| ECMAScript® 2026 Language Specification # sec-array.prototype.fill |
ブラウザーの互換性
Loading…