指定した範囲の配列の要素を指定した値で上書き - fill

《初回公開：2023/10/19 , 最終更新：未》

指定した範囲の配列の要素を指定した値で上書きする。

構文

array.fill(value[, start[, end]])

引数

value: 配列の要素に設定する値。
start (オプション): 値を設定する開始位置のインデックス、デフォルト値は 0 。
end(オプション): 値を設定する終了位置のインデックス。
指定したインデックスの一つ前までの要素に対してvalueが代入される。
デフォルト値は配列の末尾(length)。

fillは破壊的メソッド、メソッドから返される値は破壊された配列自身を返す。

const array = ["a", "b", "c"];

const fill_array= array.fill("x");
// arrayもfill_arrayも同じ
console.log(array, fill_array)  // ['x', 'x', 'x'] ['x', 'x', 'x']

start引数を指定。

const array = ["a", "b", "c"];

array.fill("x", 1);
console.log(array); // ['a', 'x', 'x']

end引数も指定。
注意が必要なのはendで指定したインデックスの一つ前までの要素に対してvalueが代入される。

const array = ["a", "b", "c"];

array.fill("x", 1, 2);
console.log(array); // ['a', 'x', 'c']

end引数がstart引数以下であったり該当する要素の範囲に矛盾がある場合、fillメソッドは何もしない。

const array = ["a", "b", "c"];

array.fill("x", 1, 1);
console.log(array); // ['a', 'b', 'c']

負の値を指定すると配列の最後のインデックスからの位置を示す。
すなわち、start が負の場合 array.length + start, end が負の場合 array.length + end。

const array = ["a", "b", "c"];

array.fill("x", -2, -1);
console.log(array); // ['a', 'x', 'c']

value引数がオブジェクトの場合、参照が代入される。

const array = ["a", "b", "c"];
const obj = new Object();

array.fill(obj, 1, 2);
// オブジェクトが変更されると配列の要素にも反映される
obj.p = "xxx";
console.log(JSON.stringify(array)); // ["a",{"p":"xxx"},"c"]

fillメソッドは配列のインデクスの範囲を変更しない。
しかし、空のスロットがあっても処理をスキップしない。

// 空の配列を定義
const array = [];

array.fill("x");
// 配列が空なので何もしない
console.log(array); // []

// 配列のlengthプロパティを変更すると要素数分だけ値で満たされる
array.length = 3
array.fill("x");
console.log(array); // ['x', 'x', 'x']