同じ要素の繰り返し配列作成
JavaScriptで同じ要素を複数回繰り返す配列の作成
日本語
JavaScriptで同じ要素を複数回繰り返す配列を作成するには、いくつかの方法があります。
fill()メソッドを使用
const element = "hello";
const count = 3;
const repeatedArray = Array(count).fill(element);
console.log(repeatedArray); // Output: ["hello", "hello", "hello"]
この方法では、まず指定された要素数(count)の空の配列を作成します。次に、fill()メソッドを使用して、すべての要素を指定した要素(element)で埋めます。
const element = "world";
const count = 5;
const repeatedArray = Array.from({ length: count }, () => element);
console.log(repeatedArray); // Output: ["world", "world", "world", "world", "world"]
この方法では、まず指定された要素数(count)の空のオブジェクトを作成します。次に、Array.from()メソッドを使用して、そのオブジェクトを配列に変換し、各要素に指定した要素(element)を割り当てます。
forループを使用
const element = "foo";
const count = 2;
const repeatedArray = [];
for (let i = 0; i < count; i++) {
repeatedArray.push(element);
}
console.log(repeatedArray); // Output: ["foo", "foo"]
この方法では、空の配列を作成し、forループを使用して、指定された回数(count)だけ要素を配列に追加します。
const element = "hello";
const count = 3;
const repeatedArray = Array(count).fill(element);
console.log(repeatedArray); // Output: ["hello", "hello", "hello"]
- .fill(element)
作成した配列のすべての要素を、elementで埋め尽くします。 - Array(count)
長さcountの空の配列を作成します。
解説
count個の要素を持つ空の配列が作られます。fill()メソッドによって、すべての要素が"hello"に置き換えられます。- 最終的に
["hello", "hello", "hello"]という配列が得られます。
const element = "world";
const count = 5;
const repeatedArray = Array.from({ length: count }, () => element);
console.log(repeatedArray); // Output: ["world", "world", "world", "world", "world"]
- .map(() => element)
作成した配列の各要素に対して、elementを返す関数を適用します。 - Array.from({ length: count })
長さcountの空の配列を作成します。
map()メソッドによって、各要素がelementに置き換えられます。- 最終的に
["world", "world", "world", "world", "world"]という配列が得られます。
コード例3: forループを使用
const element = "foo";
const count = 2;
const repeatedArray = [];
for (let i = 0; i < count; i++) {
repeatedArray.push(element);
}
console.log(repeatedArray); // Output: ["foo", "foo"]
- forループ
count回繰り返して、repeatedArrayにelementを追加します。 - repeatedArray = []
空の配列を初期化します。
- 空の配列
repeatedArrayが作成されます。 forループでcount回繰り返し、毎回elementがrepeatedArrayに追加されます。- 最終的に
["foo", "foo"]という配列が得られます。
どの方法も、同じ要素を複数回繰り返す配列を作成するための一般的な手法です。
- forループ
基本的な方法で、どのような状況でも使用できます。 - map()メソッド
より柔軟で、他の処理と組み合わせやすいです。 - fill()メソッド
シンプルで直感的ですが、既存の配列を変更する場合には注意が必要です。
どの方法を選ぶかは、コードの可読性や、他の処理との組み合わせ方など、状況に応じて判断しましょう。
- スプレッド構文
[...Array(count)].map(() => element)のように、スプレッド構文とmap()メソッドを組み合わせることも可能です。 - repeat()メソッド
文字列に対して繰り返し処理を行うメソッドで、配列に対しては直接使用できません。
スプレッド構文とArray(count)の組み合わせ
const element = "hello";
const count = 3;
const repeatedArray = [...Array(count)].fill(element);
fill()で要素を埋める- スプレッド構文で要素を展開し、新しい配列にする
Array(count)で空の配列を作成
この方法は、Array(count).fill(element)とほぼ同じですが、スプレッド構文を使うことでより直感的に理解できるかもしれません。
reduce()メソッド
const element = "world";
const count = 5;
const repeatedArray = Array.from({ length: count }, () => element).reduce((acc, _) => [...acc, element], []);
reduce()で要素を一つずつ追加していく
reduce()は、配列の要素を一つずつ処理して、最終的に一つの値を返すメソッドです。ここでは、初期値を空の配列とし、各要素に対してelementを追加していくことで、繰り返し配列を作成しています。
- ジェネレーター関数
より複雑な繰り返し処理を行う場合は、ジェネレーター関数を使うことも可能です。 - for...ofループ
ES6から導入されたfor...ofループを使うこともできます。
どの方法を選ぶべきか？
- パフォーマンス
多くの場合、パフォーマンスの差は無視できるほど小さいですが、大規模な配列を作成する場合には、ベンチマークで比較してみることをおすすめします。 - 可読性
スプレッド構文を使う方法は、より直感的で理解しやすいです。 - 柔軟性
map()メソッドやreduce()メソッドは、より複雑な処理と組み合わせることができます。 - シンプルさ
fill()メソッドが最もシンプルです。
一般的には、fill()メソッドかスプレッド構文を使う方法が最もシンプルで一般的です。 しかし、より複雑な処理が必要な場合は、map()メソッドやreduce()メソッド、for...ofループなどを検討してみてください。
JavaScriptで同じ要素を繰り返す配列を作成する方法には、様々なものがあります。それぞれの方法に特徴があるため、状況に合わせて最適な方法を選択することが重要です。
javascript arrays repeat
