JavaScript Array の fill メソッド: ループはもう古い！fill メソッドでスマートに書き換えよう

JavaScript Array の fill メソッド

メソッドの概要

構文

array.fill(value, start = 0, end = array.length);

引数

• value: 配列の要素を書き換える値
• start: 書き換えを開始するインデックス (省略可能、デフォルトは 0)
• end: 書き換えを終了するインデックス (省略可能、デフォルトは array.length)

戻り値

書き換えられた配列

メソッドの動作

• start から end までの範囲の要素を value で書き換えます。
• end は省略可能で、省略すると配列の最後の要素まで書き換えられます。
• start は負の値も指定でき、その場合は配列の末尾から数えて開始します。
• end は start よりも小さい値を指定することもでき、その場合は start から end までの要素のみ書き換えられます。
• value は、数値、文字列、オブジェクトなど、任意の値を指定できます。

メソッドの例

// 配列をすべて "X" で埋める
const arr1 = ["a", "b", "c"];
arr1.fill("X");
console.log(arr1); // ["X", "X", "X"]

// 配列の後半を 10 で埋める
const arr2 = [1, 2, 3, 4, 5];
arr2.fill(10, 2);
console.log(arr2); // [1, 2, 10, 10, 10]

// 配列を負のインデックスから書き換える
const arr3 = [0, 1, 2, 3, 4];
arr3.fill("X", -2);
console.log(arr3); // [0, 1, 2, "X", "X"]

メソッドの利点

• 配列の要素をループで書き換える必要がなく、簡潔にコードを書ける
• 繰り返し処理を省略できるため、コードの見通しが良くなる
• 配列の長さに関わらず、効率的に書き換えられる

メソッドの注意点

• value で指定した値は、配列の要素に直接書き換えられます。
• 配列の要素をコピーしたい場合は、slice メソッドなどを使用する必要があります。
• 配列の要素がオブジェクトの場合、value で指定したオブジェクトへの参照がすべての要素に設定されます。

array.fill メソッドは、JavaScript の Array オブジェクトで使用できる便利なメソッドです。このメソッドを理解することで、配列の要素を効率的に書き換えることができます。

JavaScript Array の fill メソッド サンプルコード

基本的な使い方

// 配列をすべて "X" で埋める
const arr1 = ["a", "b", "c"];
arr1.fill("X");
console.log(arr1); // ["X", "X", "X"]

// 配列の後半を 10 で埋める
const arr2 = [1, 2, 3, 4, 5];
arr2.fill(10, 2);
console.log(arr2); // [1, 2, 10, 10, 10]

// 配列を負のインデックスから書き換える
const arr3 = [0, 1, 2, 3, 4];
arr3.fill("X", -2);
console.log(arr3); // [0, 1, 2, "X", "X"]

条件付きで書き換える

// 奇数番目の要素を "X" で埋める
const arr = [1, 2, 3, 4, 5];
arr.fill("X", (i) => i % 2 === 1);
console.log(arr); // [1, "X", 3, "X", 5]

ランダムな値で埋める

// 配列をランダムな数値で埋める
const arr = new Array(10);
arr.fill(() => Math.floor(Math.random() * 100));
console.log(arr); // [ランダムな数値 10 個]

オブジェクトで埋める

// 配列をオブジェクトで埋める
const obj = { name: "John", age: 30 };
const arr = new Array(3).fill(obj);
console.log(arr); // [{ name: "John", age: 30 }, { name: "John", age: 30 }, { name: "John", age: 30 }]

配列のコピー

// 配列のコピーを作成する
const original = [1, 2, 3];
const copy = original.slice(); // 浅いコピー
const copy2 = original.fill(); // 浅いコピー
console.log(copy); // [1, 2, 3]
console.log(copy2); // [1, 2, 3]

// オブジェクトを含む配列のコピーを作成する
const original = [{ name: "John", age: 30 }];
const copy = original.slice(); // 浅いコピー
const copy2 = original.fill(); // 浅いコピー
console.log(copy); // [{ name: "John", age: 30 }]
console.log(copy2); // [{ name: "John", age: 30 }]

// オブジェクトの深いコピーを作成する
const original = [{ name: "John", age: 30 }];
const copy = JSON.parse(JSON.stringify(original)); // 深いコピー
const copy2 = original.map(obj => ({ ...obj })); // 深いコピー
console.log(copy); // [{ name: "John", age: 30 }]
console.log(copy2); // [{ name: "John", age: 30 }]

• fill メソッドは、配列の 破壊的な メソッドです。
• fill メソッドは、イテレータも受け付けます。
• fill メソッドは、TypedArray でも使用できます。

JavaScript Array の要素を書き換える他の方法

ループを使用する

// 配列のすべての要素を "X" で書き換える
const arr = ["a", "b", "c"];
for (let i = 0; i < arr.length; i++) {
  arr[i] = "X";
}
console.log(arr); // ["X", "X", "X"]

// 配列の後半を 10 で書き換える
const arr2 = [1, 2, 3, 4, 5];
for (let i = 2; i < arr2.length; i++) {
  arr2[i] = 10;
}
console.log(arr2); // [1, 2, 10, 10, 10]

map メソッドを使用する

// 配列のすべての要素を "X" で書き換える
const arr = ["a", "b", "c"];
const newArr = arr.map(() => "X");
console.log(newArr); // ["X", "X", "X"]

// 配列の後半を 10 で書き換える
const arr2 = [1, 2, 3, 4, 5];
const newArr2 = arr2.map((e, i) => (i >= 2 ? 10 : e));
console.log(newArr2); // [1, 2, 10, 10, 10]

reduce メソッドを使用する

// 配列のすべての要素を "X" で書き換える
const arr = ["a", "b", "c"];
const newArr = arr.reduce((acc, cur) => [...acc, "X"], []);
console.log(newArr); // ["X", "X", "X"]

// 配列の後半を 10 で書き換える
const arr2 = [1, 2, 3, 4, 5];
const newArr2 = arr2.reduce((acc, cur, i) => (i >= 2 ? [...acc, 10] : [...acc, cur]), []);
console.log(newArr2); // [1, 2, 10, 10, 10]

それぞれの方法の比較

• シンプルさを求める場合は、ループ または map メソッドがおすすめです。
• 配列の長さに関わらず効率的に処理したい場合は、fill メソッドがおすすめです。
• 複雑な条件で書き換えたい場合は、reduce メソッドがおすすめです。