前提
・ES2015（アロー関数を使用）
※アロー関数については、この記事が分かりやすい。
やりたいこと
・単純な配列や、オブジェクトの配列などから、新たなオブジェクトの配列を作りたい。
・（他の部分はアロー演算子に統一されているなどで）ES2015で導入されたアロー関数を使ってモダンな書き方をしたい。
問題
通常のArray.map()は以下のように使う（リファレンスより）
|
1 2 3 4 5 6 7 |
var array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // expected output: Array [2, 8, 18, 32] |
しかし、この記法は本来return文を使って書くものを省略した形での記法となります。
以下、省略なしの形となります。
|
1 2 3 4 5 6 7 |
var array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map(x => {return x * 2}); console.log(map1); // expected output: Array [2, 8, 18, 32] |
この形にする問題が見えてきますね。
この{}は、果たしてobjectを示すものなのか、それとも別のもの（上記は関数を示す）なのか判別出来なくなってしまいました。
さあ困ったというわけですが、解決方法は用意されているのです！
解決方法
解決方法は、オブジェクトを返すことを明示的に示すために、{}を()で囲うというシンプルなもの
（備忘もかねて、オブジェクトのkeyに変数を使うやり方で書いています。）
|
1 2 3 4 5 6 7 8 9 10 |
const array = [ {"key": "k1", "value": "v1"}, {"key": "k2", "value": "v2"}, {"key": "k3", "value": "v3"}, ]; // ES2015以降は、[]で囲めば変数で使える。それ以前はブラケット記法で追加するので辛い。。 const objects = array.map(obj => ({ [obj.key] : obj.value })); console.log(objects); // [ { k1: "v1" }, { k2: "v2" }, { k3: "v3" } ] |
参考ページ
https://hfuji.hatenablog.jp/entry/2016/06/28/232820
※上記ページはArray.mapの基本的な使い方もまとめられているので、使い方が怪しい方は目を通すと理解が進むと思います。
きっちり学びたい人は、定番ですがオライリー本がおすすめです。