JavaScript でのオブジェクトの深いマージのマスター

はじめに

この実験では、JavaScript における 2 つのオブジェクトを深くマージする概念を探ります。2 つのオブジェクトを受け取り、カスタム関数を使って両方のオブジェクトに存在するキーを処理できるようにマージする関数を作成します。この実験が終了すると、カスタム関数を使って複雑なオブジェクトをマージし、それらの値を結合できるようになります。

JavaScript でオブジェクトを深くマージする方法

JavaScript で 2 つのオブジェクトを深くマージするには、deepMerge 関数を使うことができます。この関数は 2 つのオブジェクトと 1 つの関数を引数として受け取ります。この関数は、両方のオブジェクトに存在するキーを処理するために使用されます。

deepMerge 関数の動作方法は以下の通りです。

Object.keys() を使って両方のオブジェクトのキーを取得し、それらから Set を作成し、スプレッド演算子 (...) を使ってすべての一意のキーの配列を作成します。
Array.prototype.reduce() を使って、各一意のキーをオブジェクトに追加し、fn を使って 2 つの与えられたオブジェクトの値を結合します。

以下は deepMerge 関数のコードです。

const deepMerge = (a, b, fn) =>
  [...new Set([...Object.keys(a), ...Object.keys(b)])].reduce(
    (acc, key) => ({ ...acc, [key]: fn(key, a[key], b[key]) }),
    {}
  );

deepMerge 関数を使用するには、2 つのオブジェクトと 1 つの関数を渡して呼び出します。以下は例です。

deepMerge(
  { a: true, b: { c: [1, 2, 3] } },
  { a: false, b: { d: [1, 2, 3] } },
  (key, a, b) => (key === "a" ? a && b : Object.assign({}, a, b))
);
// { a: false, b: { c: [ 1, 2, 3 ], d: [ 1, 2, 3 ] } }

この例では、deepMerge 関数が 2 つのオブジェクトをマージするために使用されています。結果のオブジェクトには、両方のオブジェクトの値がマージされています。

まとめ

おめでとうございます！「オブジェクトを深くマージする」実験を完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。