オブジェクト（≒連想配列）をフィルタリングしたい
たとえば、以下のようなオブジェクトがあるとします。
const objInput = {
hoge: 'hogehoge',
fuga: 'fugafuga',
piyo: 'piyopiyo'
};
hoge と fuga のみを残した以下のような新しいオブジェクトを作るのが今回の目的です。
const objOutput = {
hoge: 'hogehoge',
fuga: 'fugafuga'
}
ようするに hoge と fuga の要素だけを抽出したいんです。
手法A：べた書きする
hoge と fuga をべた書きする方法です。
const objOutput = {
hoge: objInput['hoge'],
fuga: objInput['fuga']
};
うん、とてもシンプル！
hoge や fuga というキー名が固定なのであれば、この書き方がわかりやすいと思います。
ただ、フィルタリングしたいキー名が状況に応じて変わる場合、この書き方は使えません。。。
手法B：forEachを使う
以下のようにフィルタリングしたいキー名のリストがある場合を考えます。
const keyList = ['hoge', 'fuga'];
この keyList の要素を forEach で巡ってみます。
// 出力オブジェクトを空オブジェクトで初期化します。
const objOutput = {};
// 抽出する要素の一覧で繰り返し
keyList.forEach((key) => {
// 出力オブジェクトにキーを追加して、値を代入
objOutput[key] = objInput[key];
});
この書き方もそこそこシンプルだと思います。
forEach さえ知っていれば、読めるので、他の人にコードを引き継ぐときの混乱も少なそうです。
ただ、最初に const で宣言している objOutput に後から要素を追加していくのは、少しリスクを感じなくもないです。
手法C：reduceを使う
今度は keyList の要素を reduce で巡ってみます。
// 出力オブジェクトをreduceの結果で初期化します。
const objOutput = keyList.reduce((objAcc, key) => {
// 累積オブジェクトにキーを追加して、値を代入
objAcc[key] = objInput[key];
// 累積オブジェクトを更新
return objAcc;
}, {});
この書き方は万人受けしないと思いますが、個人的には好きです。
objOutput を、宣言と同時に、 reduce の結果で初期化しているので、良い感じです。
ただ、 reduce を知らないと読めないので、コードレビューとかの際に、揉めるかもしれません。
最後に
「他にもこんな書き方あるよ！」というのがあれば、是非コメントとかで教えてください！
本記事作成にあたり、以下を参考にしました。ありがとうございました。