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

はじめに

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28266{{"オブジェクトを深くマージする"}} javascript/data_types -.-> lab-28266{{"オブジェクトを深くマージする"}} javascript/arith_ops -.-> lab-28266{{"オブジェクトを深くマージする"}} javascript/comp_ops -.-> lab-28266{{"オブジェクトを深くマージする"}} javascript/array_methods -.-> lab-28266{{"オブジェクトを深くマージする"}} javascript/higher_funcs -.-> lab-28266{{"オブジェクトを深くマージする"}} javascript/spread_rest -.-> lab-28266{{"オブジェクトを深くマージする"}} end

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 でさらに多くの実験を行って練習してください。