JavaScriptで他のプロパティ値に基づいてオブジェクト配列を新しい配列へマップする方法

例えば、次のようなオブジェクトの配列があるとしましょう。各オブジェクトは「country（国名）」と「count（出現回数）」という2つのプロパティを持っています。

const arr = [{
    country: "canada",
    count: 2
}, {
    country: "jamaica",
    count: 2
}, {
    country: "russia",
    count: 1
}, {
    country: "india",
    count: 3
}, {
    country: "spain",
    count: 2
}, {
    country: "portugal",
    count: 1
}, {
    country: "italy",
    count: 1
}];

今回の課題は、この配列を受け取り、各オブジェクトの「count」プロパティの値の回数だけ、対応する国名を繰り返し格納した文字列の配列を返す関数を作成することです。

したがって、この関数から期待される出力は以下のようになります。

['canada', 'canada', 'jamaica', 'jamaica', 'russia', 'india', 'india', 'india', 'spain', 'spain', 'portugal', 'italy']

それでは、この関数のコードを書いていきましょう。ここでは Array.prototype.reduce() メソッドを使用します。reduce() を使うことで、初期値として空の配列を用意し、ループ処理しながら要素を蓄積していくことができます。

コード例

const arr = [{
    country: "canada",
    count: 2
}, {
    country: "jamaica",
    count: 2
}, {
    country: "russia",
    count: 1
}, {
    country: "india",
    count: 3
}, {
    country: "spain",
    count: 2
}, {
    country: "portugal",
    count: 1
}, {
    country: "italy",
    count: 1
}];
const repeatCount = (arr) => {
    return arr.reduce((acc, val) => {
        let { count, country } = val;
        while(count--){
            acc.push(country);
        }
        return acc;
    }, []);
};
console.log(repeatCount(arr));

実行結果

コンソールには以下のように出力されます。

[
    'canada', 'canada',
    'jamaica', 'jamaica',
    'russia', 'india',
    'india', 'india',
    'spain', 'spain',
    'portugal', 'italy'
]

コードの解説

このコードでは、まず分割代入（Destructuring）を使って各オブジェクトから count と country の値を取り出しています。そして while(count--) ループにより、count の値が0になるまで国名をアキュムレータ（acc）に追加していきます。すべての要素に対してこの処理が完了すると、国名が指定回数分繰り返された新しい配列が完成します。