JavaScriptで配列を同じ要素で埋める！初心者でもわかる4つの方法とサンプルコード
JavaScriptで同じ要素を繰り返して配列を作成する方法
Array.fill() メソッドは、配列のすべての要素を指定した値で埋めるために使用されます。要素を繰り返す場合にも有効です。
// 5回 "a" を繰り返す配列を作成
const repeatedArray = Array(5).fill('a');
console.log(repeatedArray); // ["a", "a", "a", "a", "a"]
この方法は、単純で分かりやすいのが利点です。配列の長さを事前に知る必要があるため、繰り返す回数が決まっている場合に適しています。
for ループを使用して、繰り返し処理を実行することもできます。
// 10回 "b" を繰り返す配列を作成
const repeatedArray = [];
for (let i = 0; i < 10; i++) {
repeatedArray.push('b');
}
console.log(repeatedArray); // ["b", "b", "b", ..., "b"]
この方法は、柔軟性に優れています。ループ変数を使用して、要素の値を変更したり、条件に応じて処理を分岐したりすることができます。
Array.from() メソッドとスプレッド構文を組み合わせて、繰り返し要素を持つ配列を作成することもできます。
// 3回 "c" を繰り返す配列を作成
const repeatedArray = Array.from({ length: 3 }, () => 'c');
console.log(repeatedArray); // ["c", "c", "c"]
この方法は、より簡潔で現代的な書き方として近年よく使われます。
map() メソッドは、配列の各要素に対して処理を行い、新しい配列を生成するために使用されます。この方法を使って、同じ要素を繰り返す配列を作成することもできます。
// 2回 "d" を繰り返す配列を作成
const repeatedArray = [1, 2, 3].map(() => 'd');
console.log(repeatedArray); // ["d", "d"]
この方法は、元の配列を加工して新しい配列を作成する場合に適しています。
上記で紹介した4つの方法は、それぞれ異なる特徴と利点があります。状況に応じて適切な方法を選択しましょう。
- シンプルで分かりやすい方法:
Array.fill()メソッド - 柔軟性に優れている方法: for ループ
- 簡潔で現代的な方法:
Array.from()メソッドとスプレッド構文 - 元の配列を加工する場合:
map()メソッド
どの方法を選択する場合も、配列の長さと繰り返す回数を把握しておくことが重要です。また、パフォーマンスを考慮する場合は、使用するブラウザや環境によって最適な方法が異なる場合があることを留意する必要があります。
Array.fill() メソッドを使う
// 5回 "a" を繰り返す配列を作成
const repeatedArray = Array(5).fill('a');
console.log(repeatedArray); // ["a", "a", "a", "a", "a"]
for ループを使う
// 5回 "b" を繰り返す配列を作成
const repeatedArray = [];
for (let i = 0; i < 5; i++) {
repeatedArray.push('b');
}
console.log(repeatedArray); // ["b", "b", "b", "b", "b"]
Array.from() メソッドとスプレッド構文を使う
// 5回 "c" を繰り返す配列を作成
const repeatedArray = Array.from({ length: 5 }, () => 'c');
console.log(repeatedArray); // ["c", "c", "c", "c", "c"]
map() メソッドを使う
// 5回 "d" を繰り返す配列を作成
const repeatedArray = [1, 2, 3].map(() => 'd');
console.log(repeatedArray); // ["d", "d", "d", "d", "d"]
これらのサンプルコードは、それぞれの方法の基本的な使い方を示しています。状況に応じて、コードをアレンジして利用することができます。
JavaScriptで同じ要素を繰り返して配列を作成するその他の方法
// 5回 "a" を繰り返す配列を作成
const repeatedArray = Array(5).reduce((acc, _) => acc.concat('a'), []);
console.log(repeatedArray); // ["a", "a", "a", "a", "a"]
Generatorは、イテレータオブジェクトを作成するための関数です。イテレータオブジェクトは、次のような要素を順々に返すことができます。
// 5回 "b" を繰り返す配列を作成
function* repeatElement(value, count) {
for (let i = 0; i < count; i++) {
yield value;
}
}
const repeatedArray = [...repeatElement('b', 5)];
console.log(repeatedArray); // ["b", "b", "b", "b", "b"]
ライブラリを使う
JavaScriptには、繰り返し処理を簡単にするためのライブラリがいくつかあります。例えば、lodash や ramda などのライブラリには、repeat() 関数などの便利な関数を提供しています。
// 5回 "c" を繰り返す配列を作成 (Lodashを使用)
const repeatedArray = _.repeat('c', 5);
console.log(repeatedArray); // ["c", "c", "c", "c", "c"]
これらの方法は、上記で紹介した方法よりも高度な方法ですが、より柔軟で効率的なコードを書くことができます。状況に応じて、適切な方法を選択しましょう。
JavaScriptで同じ要素を繰り返して配列を作成するには、様々な方法があります。それぞれの特徴と利点を理解し、状況に応じて適切な方法を選択することが重要です。
上記以外にも、まだまだ多くの方法があります。ぜひ色々試してみて、自分に合った方法を見つけてください。
javascript arrays repeat
