JavaScriptの配列とオブジェクトの置換

はじめに

何度も忘れて調べるので自分用メモ。
ググるのも説明するのも難しいから、解を得るまでが地味にめんどくさいやつ。

JSONで定義されているものを、使いやすいように変換したいときに出くわします。idというキーに入っている値をキーにして、nameというキーに入っている値を値にした、オブジェクトを作りたい。（伝われ！）

課題

// この配列を
const ary1 = [{id:11, name:"aa"}, {id:22, name:"bb"}];
// この形に変換したい
const map1 = {11:"aa", 22:"bb"};

コードでかけばすぐ伝わる。

この変換があれば

console.log(map1[11]);  // aa

ができる。

もったいぶらずに解

const map1 = ary1.reduce((m, v) => (
  {...m, [v.id]:v.name}
), {});

reduceで解体しながら作り上げていく感じです。

[v.id]のところは、わかっていないです。なぜ[]で括ると使えるようになるのか・・・。ちなみに括らないと、Uncaught SyntaxError: Unexpected token '.'と怒られます。解を知らないと、どないせえっちゅうねん！ってなります。

丸カッコの辺りが分かりづらい人は、下記でもいいかも。returnを省略した形が上です。

const map1 = ary1.reduce((m, v) => {
  return {...m, [v.id]:v.name};
}, {});

別解

こちらの方が、実はよいかもしれない。単純で誰にとってもわかりやすい。（コードを数年後に新人が読むかもしれない前提。）

const map1 = {};
ary1.forEach(v => {
    map1[v.id] = v.name;
});

const map1で定義しているけど、再代入はしていなくて値の変更なので、このコードはOK。

ちなみに逆(オブジェクト→配列)

逆も置いておこう。

const map1 = {11:"aa", 22:"bb"};
const ary1 = Object.keys(map1).map(k => ({
    id: Number(k),
    name: map1[k]
}));

まとめ

reduceを使って、配列をオブジェクトへ変換する方法を紹介しました。

あーまた出たーと２度目の再開をして、また若干躓いたので、メモです。でも別解が優秀だな。それを覚えようか・・・。reduceも好きだけど。