JavaScript におけるオブジェクト配列の展開

Beginner

This tutorial is from open-source community. Access the source code

はじめに

この実験では、JavaScript の unwind 関数を調べます。この関数の目的は、オブジェクトとその配列値のプロパティの 1 つからオブジェクトの配列を生成することです。オブジェクトの分解構文と Array.prototype.map() を使用することで、指定されたキーが個々の値にマップされる以外は、元のオブジェクトの値を含むオブジェクトの配列を作成できます。この実験を通じて、JavaScript のオブジェクトからデータを操作および抽出する方法を深く理解することができます。

オブジェクトを展開する関数

配列値のプロパティによってオブジェクトを展開するには、unwind 関数を使用します。

  • コーディングを始めるには、ターミナル/SSH を開き、node と入力します。
  • この関数は、オブジェクト分解構文を使用して、指定された key に対するキーバリューペアをオブジェクトから除外します。
  • 次に、与えられた key の値に対して Array.prototype.map() を使用して、オブジェクトの配列を作成します。
  • 各オブジェクトは、元のオブジェクトの値を含みますが、key は個々の値にマップされます。
const unwind = (key, obj) => {
  const { [key]: _, ...rest } = obj;
  return obj[key].map((val) => ({ ...rest, [key]: val }));
};

使用例:

unwind("b", { a: true, b: [1, 2] }); // [{ a: true, b: 1 }, { a: true, b: 2 }]

まとめ

おめでとうございます!あなたはオブジェクトを展開する実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習できます。