はじめに
この実験では、JavaScript の listify() 関数を使ってオブジェクトをオブジェクト配列にマッピングする方法を学びます。この関数は Object.entries() と Array.prototype.reduce() を使ってオブジェクトをマッピングし、mapFn を使ってオブジェクトのキーと値をマッピングします。この実験が終わると、JavaScript を使ってオブジェクトを効率的に配列にマッピングできるようになります。
JavaScript でオブジェクトを配列にマッピングする方法
JavaScript でオブジェクトを配列にマッピングするには、listify() 関数を使うことができます。以下にその方法を示します。
ターミナル/SSH を開き、コーディングの練習を始めるために
nodeと入力します。Object.entries()を使って、オブジェクトのキーと値のペアの配列を取得します。Array.prototype.reduce()を使って、配列をオブジェクトにマッピングします。mapFnを使ってオブジェクトのキーと値をマッピングし、Array.prototype.push()を使ってマッピングされた値を配列に追加します。
以下は listify() 関数のコードです。
const listify = (obj, mapFn) =>
Object.entries(obj).reduce((acc, [key, value]) => {
acc.push(mapFn(key, value));
return acc;
}, []);
そして、people と呼ばれるオブジェクトでそれを使う方法の例を以下に示します。
const people = { John: { age: 42 }, Adam: { age: 39 } };
listify(people, (key, value) => ({ name: key, ...value }));
// [ { name: 'John', age: 42 }, { name: 'Adam', age: 39 } ]
この関数を使えば、JavaScript で簡単にオブジェクトを配列にマッピングすることができます。
まとめ
おめでとうございます！オブジェクトを配列にマッピングする実験を完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。