【JavaScript】fill()で配列の要素を一括設定！初心者のための使い方ガイド

「fill()」はJavaScriptの配列を操作する便利なメソッドで、特定の範囲の要素を指定した値で上書きします。また、「fill()」と「splice()」という別のメソッドとの違いや、オブジェクトを使用した場合の注意点にも注意が必要です。詳細な使い方と注意事項を紹介します。

「fill()」の基本的な使い方

「fill()とは？」

fill()メソッドを一つの引数で使用すると、配列の全ての要素がその引数の値で上書きされます。具体的には次のようなコードになります。

const array = [1, 2, 3, 4, 5];
array.fill(0);
console.log(array); // [0, 0, 0, 0, 0]

この例では、配列arrayの全ての要素を0で上書きしています。

引数についての詳細説明

fill()メソッドは最大で3つの引数を受け取ります。

1. value: 配列に設定する値。全ての指定された要素はこの値で上書きされます。
2. start: 開始位置のインデックス。このインデックスから値の上書きが始まります（オプション）。
3. end: 終了位置のインデックス。このインデックスより前の要素までが上書きされます（オプション）。

以下のコードは、これらの引数を全て使用した例です。

const array = [1, 2, 3, 4, 5];
array.fill(0, 1, 4);
console.log(array); // [1, 0, 0, 0, 5]

この例では、valueに0、startに1、endに4を指定して、配列arrayのインデックス1から3までを0で上書きしています。

「fill()」の使用例4パターン

値で配列を埋める

const array = [1, 2, 3, 4, 5];
array.fill(9);
console.log(array); // [9, 9, 9, 9, 9]

配列全体を9で埋めます。

特定の範囲を埋める

const array = [1, 2, 3, 4, 5];
array.fill(0, 1, 4);
console.log(array); // [1, 0, 0, 0, 5]

インデックス1から3までを0で埋めます。

負のインデックスで範囲を指定する

const array = [1, 2, 3, 4, 5];
array.fill(7, -2);
console.log(array); // [1, 2, 3, 7, 7]

最後から二番目以降を7で埋めます。

配列の一部を削除する（0で埋める）

const array = [1, 2, 3, 4, 5];
array.fill(0, 2, 4);
console.log(array); // [1, 2, 0, 0, 5]

インデックス2から3までを0（削除することに相当）で埋めます。

「fill()」と「splice()」

「splice()」とは？

splice()も配列の一部を別の値で置き換えることができます。しかし、splice()は要素を追加したり削除したりもできます。

const array = [1, 2, 3, 4, 5];
array.splice(2, 2, 0, 0);
console.log(array); // [1, 2, 0, 0, 5]

「fill()」と「splice()」の違い

fill()は既存の配列をそのまま変更するだけですが、splice()は配列の要素数も変更できます。また、splice()は削除された要素も返すことができます。

// fill()
const array1 = [1, 2, 3];
array1.fill(0, 1, 2);
console.log(array1); // [1, 0, 3]

// splice()
const array2 = [1, 2, 3];
const removed = array2.splice(1, 1, 0);
console.log(array2); // [1, 0, 3]
console.log(removed); // [2]

「fill()」を使用する際の注意点

オブジェクトを使った場合の値の参照渡しの問題

fill()メソッドでオブジェクトを引数として使用する場合、配列の各要素が同じオブジェクトを参照するという問題があります。これはJavaScriptのオブジェクトが参照渡しであるために起きる現象です。

具体的には、以下のようなコード例で確認できます。

const array = Array(3).fill({});
array[0].a = 1;
console.log(array); // [ { a: 1 }, { a: 1 }, { a: 1 } ]

この例では、3つの要素が全て同じ空のオブジェクト（{}）を参照しているため、一つの要素に変更を加えると、他の要素も同じように変更されてしまいます。このような挙動は予期しないバグを引き起こす可能性があるため、注意が必要です。

配列の長さは変わらない

fill()は配列の長さを変えることはありません。新しい要素を追加したり、要素を削除することはできません。

const array = [1, 2, 3];
array.fill(0, 1, 5);
console.log(array); // [1, 0, 0]

「fill()」の使い方まとめ

• fill()は配列の一部を特定の値で上書きするメソッドです。
• fill()にはコールバック関数を渡すことはできません。
• fill()と類似のsplice()メソッドとは異なり、配列の長さを変更しない点や、オブジェクトを使った場合の注意点があります。

これで、fill()メソッドの基本的な使い方や注意点が理解できたでしょう。配列を効率的に操作

するための一つの強力なツールですので、ぜひ使いこなしてください。