JavaScriptのfillの使い方！配列要素を変更する

JavaScriptで配列の要素を特定の値でまとめて書き換えるfillメソッドについて書いています。
fillメソッドを使うと、配列の一部または全体を同じ値で上書きすることができ、配列の初期化や特定範囲の要素変更に便利です。

実際に動くサンプルを使って、以下の操作を解説します。

fillメソッドの基本的な使い方

fillメソッドは、配列の要素を指定した値で上書きします。
基本的な構文は以下のとおりです。

array.fill(value, start, end)

• value: 配列を上書きする値（必須）。
• start: 上書きを開始するインデックス（省略可能、デフォルトは0）。
• end: 上書きを終了するインデックス（省略可能、デフォルトは配列の長さ）。

配列全体を同じ値で上書きする

startとendを省略すると、配列全体がvalueで指定した値で上書きされます。

const numbers = [1, 2, 3, 4, 5];
numbers.fill(0);
console.log(numbers); // 結果：[0, 0, 0, 0, 0]

numbers配列を作成して、次の行でfillメソッドを使用しました。
値だけを指定しているので、全て同じ値で上書きされています。

この例では、numbers配列のすべての要素が0で上書きされています。

特定範囲の要素を上書きする

startとendを指定することで、配列の一部分だけを上書きできます。

const numbers = [1, 2, 3, 4, 5];
numbers.fill(0, 1, 4);
console.log(numbers); // 結果：[1, 0, 0, 0, 5]

この例では、インデックス1から4の手前（インデックス1、2、3）の要素が0で上書きされています。

配列の文字列要素で使用する

fillメソッドは、配列の要素が文字列の場合でも使用できます。

const fruits = ["apple", "banana", "orange", "grape"];
fruits.fill("変更", 1, 3);
console.log(fruits); // 結果：["apple", "変更", "変更", "grape"]

fruits配列を作成して、次の行でfillメソッドを呼び出して、文字列要素の一部を変更しました。
fruits配列のインデックス1から3の手前の要素（”banana”と”orange”）が”変更”という文字列で上書きされています。

fillメソッドを使うメリット

fillメソッドを使う主なメリットは以下のとおりです。

• 配列の初期化: 配列を作成時に、すべての要素を同じ値で初期化する際に便利です。
• 特定範囲の要素変更: 配列の一部分だけをまとめて変更したい場合に、効率的に処理できます。
• コードの簡潔性: ループ処理などを使わずに、配列の要素をまとめて変更できるため、コードが簡潔になります。

JavaScriptのfillメソッドの使い方まとめ

今回はJavaScriptのfillメソッドの使い方について書きました。
記事の内容をまとめます。