はじめに
何度も忘れて調べるので自分用メモ。
ググるのも説明するのも難しいから、解を得るまでが地味にめんどくさいやつ。
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も好きだけど。