【JavaScript】ハイフン区切りの文字列配列を分割してオブジェクトに変換する方法

ここでは、各要素にハイフン（-）が含まれる文字列リテラルの配列を扱います。ハイフンの左側にプロパティのキーが、右側にその値が記述されています。サンプルの入力配列は次のようになります。

const arr = ["playerName-Kai Havertz", "age-21", "nationality-German", "postion-CAM", "languages-German,English,Spanish", "club-Chelsea"];

求められているのは、これらの文字列をハイフンで分割し、配列全体から1つのオブジェクトを組み立てる関数を作成することです。

実装の方針

それでは実際にコードを書いてみましょう。基本的なアプローチは以下の通りです。

• 配列を forEach でループ処理する
• 各文字列を split("-") で分割する
• 分割代入でキーと値を取り出し、新しいオブジェクトに格納する

コード例

const arr = ["playerName-Kai Havertz", "age-21", "nationality-German",
"postion-CAM", "languages-German,English,Spanish", "club-Chelsea"];

const arrayToObject = arr => {
    const obj = {};
    arr.forEach(string => {
        const [key, value] = string.split("-");
        obj[key] = value;
    });
    return obj;
};

console.log(arrayToObject(arr));

ポイントは string.split("-") の戻り値を分割代入で受け取っている箇所です。これにより、分割された配列の先頭要素をキー、2番目の要素を値として簡潔に取得できます。

出力結果

このコードを実行すると、コンソールには以下のようなオブジェクトが出力されます。

{
    playerName: 'Kai Havertz',
    age: '21',
    nationality: 'German',
    postion: 'CAM',
    languages: 'German,English,Spanish',
    club: 'Chelsea'
}

補足：よりモダンな書き方

ES2019以降の環境では、map() と Object.fromEntries() を組み合わせると、さらに簡潔に同じ処理を実現できます。

const arrayToObject = arr =>
    Object.fromEntries(arr.map(str => str.split("-")));

console.log(arrayToObject(arr));

どちらの方法でも結果は同じですが、元データがハイフンを複数含む可能性がある場合は注意が必要です。split("-") の第2引数やスライス処理を工夫して、意図した通りのキーと値になるよう調整してください。