JavaScriptで配列を同じ値で埋める方法：fill()メソッド vs forEachループ vs mapメソッド
Array.prototype.fill() メソッドは、JavaScript における配列の要素を指定した値で置き換えるために使用されます。これは、配列内のすべての要素を一括で変更したい場合に便利な方法です。
構文
array.fill(value, start, end);
パラメータ
end(オプション): 置き換えを終了するインデックス (デフォルトは配列の長さ)start(オプション): 置き換えを開始するインデックス (デフォルトは 0)value: すべての要素に置き換えられる値
戻り値
変更された配列
例
const numbers = [1, 2, 3, 4, 5];
// 配列内のすべての要素を 10 に置き換える
numbers.fill(10);
console.log(numbers); // [10, 10, 10, 10, 10]
// 配列の一部 (インデックス 2 から 4) を 0 に置き換える
numbers.fill(0, 2, 4);
console.log(numbers); // [10, 10, 0, 0, 10]
利点
- コードが簡潔になる
- 配列内のすべての要素を一括で変更できる
- シンプルで使いやすい
欠点
- オブジェクトのような複雑な値を要素として使用すると、すべての要素が同じ参照を共有することになる
- 個々の要素を個別に操作することはできない
代替手段
map()メソッドを使用して、新しい配列を作成することができます。forEach()ループを使用して、個々の要素を個別に操作することができます。
Array.prototype.fill() メソッドは、JavaScript における配列の要素を指定した値で置き換えるための便利な方法です。シンプルな構文で使いやすい一方で、個々の要素を個別に操作することはできないなどの欠点もあります。状況に応じて適切な方法を選択することが重要です。
- このメソッドは、すべてのブラウザで広くサポートされています。
Array.prototype.fill()メソッドは、ES6 (2015) で導入されました。
配列内のすべての要素を特定の値に置き換える
// 配列内のすべての要素を 10 に置き換える
const numbers = [1, 2, 3, 4, 5];
numbers.fill(10);
console.log(numbers); // [10, 10, 10, 10, 10]
配列の一部を特定の値に置き換える
// 配列の一部 (インデックス 2 から 4) を 0 に置き換える
const numbers = [1, 2, 3, 4, 5];
numbers.fill(0, 2, 4);
console.log(numbers); // [1, 2, 0, 0, 5]
文字列配列のすべての要素を特定の文字に置き換える
// 文字列配列のすべての要素を "*" に置き換える
const strings = ["Hello", "World", "JavaScript"];
strings.fill("*");
console.log(strings); // ["*", "*", "*"]
ブール値の配列をすべて true に置き換える
// ブール値の配列をすべて `true` に置き換える
const booleans = [false, false, false];
booleans.fill(true);
console.log(booleans); // [true, true, true]
// オブジェクトの配列をすべて同じオブジェクトに置き換える
const objects = [{}, {}, {}];
const obj = { value: 10 };
objects.fill(obj);
console.log(objects); // [{ value: 10 }, { value: 10 }, { value: 10 }]
// 注意: オブジェクトを要素として使用すると、すべての要素が同じ参照を共有することになります。
forEach() ループ
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number, index) {
numbers[index] = 10;
});
console.log(numbers); // [10, 10, 10, 10, 10]
利点
- 置き換える値を動的に生成できる
- 個々の要素を個別に操作できる
欠点
Array.prototype.fill()メソッドよりも冗長なコードになる
map() メソッド
const numbers = [1, 2, 3, 4, 5];
const filledNumbers = numbers.map(function(number) {
return 10;
});
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(filledNumbers); // [10, 10, 10, 10, 10]
利点
- 置き換える値を動的に生成できる
- 新しい配列を作成できる
欠点
- 2 つの配列を管理する必要がある
- 元の配列が変更されない
reduce() メソッド
const numbers = [1, 2, 3, 4, 5];
const filledNumbers = numbers.reduce(function(acc, number) {
acc.push(10);
return acc;
}, []);
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(filledNumbers); // [10, 10, 10, 10, 10]
利点
- コードが簡潔になる場合がある
- 新しい配列を作成できる
欠点
forEach()ループやmap()メソッドよりも非効率的な場合がある- 理解しにくいかもしれない
- カスタム関数を作成する
- 特定のライブラリやユーティリティを使用する
選択の指針
Array.prototype.fill() メソッドは、シンプルで使いやすいことから、多くの場合において最良の選択肢となります。
しかし、以下の場合は、代替方法を検討する方がよい場合があります。
- コードをより簡潔にしたい
- 新しい配列を作成する必要がある
- 置き換える値を動的に生成する必要がある
- 個々の要素を個別に操作する必要がある
どの方法を選択する場合も、パフォーマンスと可読性を考慮することが重要です。
- コードの簡潔性と可読性を高めるために、テンプレートリテラルやスプレッド構文などの構文を利用することもできます。
- 上記の例では、
functionキーワードを使用していますが、ES6 以降ではアロー関数を使用することもできます。