オブジェクト配列を結合する

Beginner

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

はじめに

この実験では、指定されたプロパティに基づいて 2 つのオブジェクト配列を結合する JavaScript のプログラミング演習を行います。この演習の目的は、JavaScript で作業するすべての開発者にとって不可欠なスキルである、Array.prototype.reduce() メソッドとオブジェクト操作の使用を練習することです。この実験が終了するまでに、プロパティに基づいて 2 つのオブジェクト配列をシームレスに結合して新しい配列を作成できるようになるはずです。

指定されたキーに基づいてオブジェクト配列を結合する関数

特定のキーに基づいて 2 つのオブジェクト配列を結合するには、次の手順に従います。

  1. ターミナル/SSH を開き、コーディングの練習を始めるために node と入力します。
  2. 与えられた prop に基づいて、オブジェクトのアキュムレータを持つ Array.prototype.reduce() を使用して、両方の配列のすべてのオブジェクトを結合します。
  3. Object.values() を使用して、結果のオブジェクトを配列に変換して返します。

次の関数を使用できます。

const combine = (a, b, prop) =>
  Object.values(
    [...a, ...b].reduce((acc, v) => {
      if (v[prop])
        acc[v[prop]] = acc[v[prop]] ? { ...acc[v[prop]], ...v } : { ...v };
      return acc;
    }, {})
  );

この関数の使用例は次のとおりです。

const x = [
  { id: 1, name: "John" },
  { id: 2, name: "Maria" }
];
const y = [{ id: 1, age: 28 }, { id: 3, age: 26 }, { age: 3 }];
combine(x, y, "id");
// [
//  { id: 1, name: 'John', age: 28 },
//  { id: 2, name: 'Maria' },
//  { id: 3, age: 26 }
// ]

まとめ

おめでとうございます!オブジェクト配列の結合の実験を完了しました。スキルを向上させるために、LabEx でさらに実験を行って練習してください。