LabEx
ログイン登録

Reduce と Concat を使った JavaScript オブジェクトのマージ

Beginner

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

はじめに

この実験では、JavaScript でオブジェクトをマージするプロセスを探求します。この実験では、2 つ以上のオブジェクトを結合して新しいオブジェクトを作成する手順を案内します。オブジェクトとキーを反復処理するために Array.prototype.reduce() と Object.keys() をどのように使用するか、および既存のキーの値をマージするために Object.prototype.hasOwnProperty() と Array.prototype.concat() をどのように使用するかを学びます。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

オブジェクトマージ関数

2 つ以上のオブジェクトをマージするには、次の手順に従います。

  1. ターミナル/SSH を開き、コーディングを開始するために node と入力します。
  2. Array.prototype.reduce() と Object.keys() を組み合わせて、すべてのオブジェクトとキーを反復処理します。
  3. Object.prototype.hasOwnProperty() と Array.prototype.concat() を使用して、複数のオブジェクトに存在するキーの値を追加します。
  4. 2 つ以上のオブジェクトの組み合わせから新しいオブジェクトを作成するために、次のコード スニペットを使用します。
const merge = (...objs) =>
  [...objs].reduce(
    (acc, obj) =>
      Object.keys(obj).reduce((a, k) => {
        acc[k] = acc.hasOwnProperty(k)
          ? [].concat(acc[k]).concat(obj[k])
          : obj[k];
        return acc;
      }, {}),
    {}
  );

たとえば、次のオブジェクトを考えてみましょう。

const object = {
  a: [{ x: 2 }, { y: 4 }],
  b: 1
};
const other = {
  a: { z: 3 },
  b: [2, 3],
  c: "foo"
};

これら 2 つのオブジェクトを merge() 関数を使用してマージすると、次の結果が得られます。

merge(object, other);
// { a: [ { x: 2 }, { y: 4 }, { z: 3 } ], b: [ 1, 2, 3 ], c: 'foo' }

まとめ

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