はじめに
この実験では、JavaScript における 2 つのオブジェクトを深くマージする概念を探ります。2 つのオブジェクトを受け取り、カスタム関数を使って両方のオブジェクトに存在するキーを処理できるようにマージする関数を作成します。この実験が終了すると、カスタム関数を使って複雑なオブジェクトをマージし、それらの値を結合できるようになります。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、JavaScript における 2 つのオブジェクトを深くマージする概念を探ります。2 つのオブジェクトを受け取り、カスタム関数を使って両方のオブジェクトに存在するキーを処理できるようにマージする関数を作成します。この実験が終了すると、カスタム関数を使って複雑なオブジェクトをマージし、それらの値を結合できるようになります。
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 でさらに多くの実験を行って練習してください。