JavaScriptで配列を同じ値で埋める方法:fill()メソッド vs forEachループ vs mapメソッド

2024-06-19

JavaScript の Array.prototype.fill() メソッドの解説

Array.prototype.fill() メソッドは、JavaScript における配列の要素を指定した値で置き換えるために使用されます。これは、配列内のすべての要素を一括で変更したい場合に便利な方法です。

構文

array.fill(value, start, end);

パラメータ

  • value: すべての要素に置き換えられる値
  • start (オプション): 置き換えを開始するインデックス (デフォルトは 0)
  • end (オプション): 置き換えを終了するインデックス (デフォルトは配列の長さ)

戻り値

変更された配列

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]

利点

  • シンプルで使いやすい
  • 配列内のすべての要素を一括で変更できる
  • コードが簡潔になる

欠点

  • 個々の要素を個別に操作することはできない
  • オブジェクトのような複雑な値を要素として使用すると、すべての要素が同じ参照を共有することになる

代替手段

  • forEach() ループを使用して、個々の要素を個別に操作することができます。
  • map() メソッドを使用して、新しい配列を作成することができます。

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 }]

// 注意: オブジェクトを要素として使用すると、すべての要素が同じ参照を共有することになります。


Array.prototype.fill() の代替方法

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 以降ではアロー関数を使用することもできます。
  • コードの簡潔性と可読性を高めるために、テンプレートリテラルやスプレッド構文などの構文を利用することもできます。