やりたいこと
JavaScriptのmap関数は、配列の値に対し処理を適用することで新しい配列を返す便利な関数です。これを連想配列(Object)に対しても使いたい場合、どのように書けば良いのかサンプルを紹介します。なお、map関数については【JavaScript】map関数を用いたおしゃれな配列処理を参照ください。
前提や参考記事など
- JavaScriptのネイティブ関数だけで実装する前提とします。javascript Objectでmap,filter,reduceなどを使いたい....。の記事にある通り、Objectにはmap関数はないので、
Object.keys
使ってkeyの配列を取得した上で連想配列の値に処理を適用するようにします。 - Objectのkeysを使ってmap関数を適用すると配列の中にObjectが格納され、連想配列の形になりません。今回はreduce関数を使用してこの課題を解消します。詳細はConvert object array to hash map, indexed by an attribute value of the Objectを参照ください。
- ES2015(ES6)以降での実装を前提とします。オブジェクトのキー設定に
[]
を使用して変数展開するためです。詳細はES2015以降のJavaScriptでObjectのkeyに変数を使うを参照ください。
サンプルコード
sample.js
const beforeObject = {
test1: 1,
test2: 2
};
// 2倍にする
const afterObject = Object.keys(beforeObject).reduce(
(after, key) => ({
...after,
[key]: beforeObject[key] * 2
}),
{}
);
結果
{ test1: 1, test2: 2 }
が{ test1: 2, test2: 4 }
に変換されます。
追記(2020/5/13)
@ttatsf さんにコメント頂きましたが、ES2019から追加されたObject.fromEntries
で以下のようにも書けます。
Object.fromEntries()でオブジェクトをmapするの記事も参考になります。
sample.js
const afterObject = Object.fromEntries(
Object.entries( beforeObject )
.map( ( [ _, value ] ) => [ _, value * 2 ] )
)