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

コアポイント

JavaScriptの一般的に使用されるオブジェクトのマージメソッドには、拡張演算子（
• ）および...メソッドが含まれます。拡張演算子はより近代的で簡潔ですが、Object.assign()はより互換性があり、古い環境に適しています。 Object.assign()
オブジェクトを統合するときに演算子を拡張し、両方とも浅いコピーを実行します。つまり、ネストされたオブジェクトは依然として元のオブジェクトへの参照です。マージされたオブジェクトでネストされたオブジェクトを変更すると、元のオブジェクトに影響を与える可能性があり、潜在的な予期しない副作用が生じる可能性があります。
• Object.assign()深いマージ（ネストされたオブジェクトを正しくマージする）の場合、カスタム関数やLodashなどのライブラリを使用できます。カスタム関数の例は記事に記載されています。これは、オブジェクトの深さコピーを作成してから、
手法を使用してマージします。
• deepMergeObjects JSON.parse(JSON.stringify())開発者は、データの作成や新しいインスタンスの作成などのタスクを完了するために、オブジェクトをマージまたはコピーする必要があることがよくあります。拡張演算子（
）などの手法（複数のオブジェクトのプロパティのマージに使用）や

メソッド（あるオブジェクトのプロパティを別のオブジェクトにコピーするために使用）は、これらのタスクを完了するための重要なツールです。ただし、それらをいつ、どのように使用するかを理解することは、オブジェクトを効率的に操作するために不可欠です。この記事では、これらの方法、それらの利点と短所、およびネストされたオブジェクトを深くコピーして融合するという概念のいくつかの実用的なアプリケーションを紹介します。

...Object.assign()カタログ

オブジェクトマージメソッド

• オペレーターを展開（
  • ）
    1. ...
  • メソッド
    2. Object.assign()
  trapと注意事項
どの方法を選択するか
• ディープマージ：ディープコピーアンドマージ
• カスタム深度マージ関数
• • 結論
• オブジェクトマージメソッド

1 拡張演算子（）は、JavaScriptでオブジェクトをマージするための一般的な方法です。その形式は

です。ソースオブジェクトに同じキーを持つ属性がある場合、拡張演算子はターゲットオブジェクトの値を最新のソースオブジェクトの数値で上書きします。

...

2

...は、オブジェクトをマージするためにJavaScriptで使用される別の方法です。その構文は{ ...object1, ...object2 }で、ソースオブジェクトがターゲットオブジェクトにマージされます。ソースオブジェクトに同じキーを持つ属性がある場合、

は、ターゲットオブジェクトの値を最新のソースオブジェクトの数値を上書きします。

const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = { ...defaults, ...userSettings };
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }

Object.assign()

trapと注意事項

Object.assign() Object.assign(target, source1, source2, ...)以下は、拡張演算子を使用してオブジェクトをマージし、javascriptのObject.assign()メソッドを使用して遭遇する場合に遭遇する落とし穴と問題です。

1

オペレーターを拡張し、両方ともオブジェクトをマージするときに浅いコピーを実行します。これは、ネストされたオブジェクトがまだ元のオブジェクトへの参照であることを意味します。マージされたオブジェクトでネストされたオブジェクトを変更すると、元のオブジェクトに影響を与える可能性があり、予期しない副作用につながる可能性があります。

Object.assign()以下の深さマージを参照してください。

2属性をオーバーライドします

同じキーのプロパティとオブジェクトをマージすると、演算子を展開し、

結果のオブジェクトの値を最新のソースオブジェクトからの数値を上書きします。不適切に処理された場合、この動作はデータの損失につながる可能性があります。

3 Object.assign()拡張オペレーターはECMAScript 2015（ES6）の一部であり、古いJavaScript環境やInternet Explorerなどのブラウザではサポートされていません。これにより、コードが古い環境で実行する必要がある場合、互換性の問題を引き起こす可能性があります。この場合、より広範なサポートがあるため、

を使用することが最善です。

4

オペレーターを拡張し、Object.assign()は列挙性属性をソースオブジェクトからターゲットオブジェクトにコピーするだけです。非明示的なプロパティは、マージプロセス中にコピーされることはなく、データの損失や予期しない動作につながる可能性があります。

5パフォーマンスの問題

大きなオブジェクトをマージする必要がある場合、またはマージ操作を頻繁に実行する必要がある場合、

または拡張オペレーターを使用すると、マージプロセス中に新しいオブジェクトが作成されるため、パフォーマンスの問題を引き起こす可能性があります。 Object.assign()

6プロトタイプ

ソースオブジェクトのプロトタイプから属性をターゲットオブジェクトにコピーします。これは、ソースオブジェクトのプロトタイプにターゲットオブジェクトのプロパティと矛盾するプロパティがある場合、予期しない動作につながる可能性があります。一方、拡張演算子はプロトタイプのプロパティをコピーしません。 Object.assign()

JavaScriptで拡張オペレーターまたは

を使用する場合、これらの落とし穴と問題に注意を払ってください。特定のケースでは、これらの制限を克服するために、深いクローニングや深いマージ機能など、他の方法をとる必要がある場合があります。

Object.assign()どの方法を選択するか

Object.assign()

と拡張演算子の両方がオブジェクトを効果的にマージできます。拡張演算子はよりシンプルでモダンですが、

は古いJavaScript環境とより互換性があります。 使用する方法を決定するには、次のことを検討してください

環境が拡張オペレーター（最新のECMAScriptバージョンなど）をサポートしている場合は、構文であるために使用します。 Object.assign() Object.assign()古いJavaScript環境との互換性が重要な場合は、

を選択します。

ネストされたオブジェクト（内側のネストされたオブジェクトのネックされたオブジェクト）をコピーする必要がある場合は、深いコピーオブジェクトをお読みください。

2. ディープマージ：ディープコピーアンドマージObject.assign()
3. オペレーターを拡張し、
コピーされたオブジェクトの浅いコピーを作成します。本質的に、これは、新しいオブジェクトが、それらのコピーではなく、元のオブジェクト（配列や関数など）と同じネストされたオブジェクトを参照することを意味します。

オブジェクトをマージする前に、これを理解し、回避することが重要です。

次の例は、コピーオブジェクトのネストされたオブジェクトを編集する方法を示しています。元のオブジェクトに影響します。

このコードの出力は、元のオブジェクトの

const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = { ...defaults, ...userSettings };
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }

プロパティが変更されたことを示しています（これが必要ない場合があります）。

shallowCopyPlanetカスタム深度マージ関数planet info.moonsこれは、マージする前に複数のオブジェクトを深くコピーして単一のオブジェクトを返す関数です。コードでは、

関数は任意の数の入力オブジェクトを受け入れ、

手法を使用してそれらの深度コピーを作成し、

メソッドの拡張操作を使用してそれらを一致させます。マージされたオブジェクトには、入力オブジェクトからプロパティの深さコピーが含まれます。

deepMergeObjects JSON.parse(JSON.stringify())reduce()結論

const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = Object.assign({}, defaults, userSettings);
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }

お読みいただきありがとうございます！この記事が、単純な紹介ではなく、JavaScriptのオブジェクトのマージに関する洞察を得るのに役立つことを願っています。オブジェクトをマージできることは、JavaScriptスキルとうまく組み合わされ、コーディング機能を拡張する必要があります。ご質問やコメントがある場合は、SitePointコミュニティフォーラムに参加してください。 JavaScript JavaScriptでオブジェクトをマージするという概念は何ですか？

JavaScriptのオブジェクトのマージとは、2つ以上のオブジェクトを単一のオブジェクトに結合するプロセスを指します。これは通常、複数のオブジェクトのプロパティとメソッドを1つのオブジェクトにマージし、データをより簡単に管理および操作できるようにするためです。マージされたオブジェクトには、元のオブジェクトのすべてのプロパティとメソッドが含まれます。複製プロパティがある場合、最後のオブジェクトの値は以前の値をオーバーライドします。

拡張演算子を使用してJavaScriptのオブジェクトをマージする方法は？

JavaScriptの拡張演算子（

オブジェクトのマージにおける方法の役割は何ですか？

メソッドは、1つ以上のソースオブジェクトのすべての列挙値をターゲットオブジェクトにコピーするために使用されます。ターゲットオブジェクトを返します。複数のソースオブジェクトを単一のターゲットオブジェクトにマージできるため、オブジェクトをマージする非常に便利な方法です。ただし、同じプロパティが複数のオブジェクトに見つかった場合、そのプロパティを使用した最後のオブジェクトの値は以前の値をオーバーライドすることに注意する必要があります。

javascriptでネストされたオブジェクトをマージできますか？

はい、JavaScriptでネストされたオブジェクトをマージできます。ただし、トップレベルのプロパティだけでなく、ネストされたオブジェクトが正しくマージされていることを確認する必要があるため、このプロセスはもう少し複雑です。これはしばしばディープマージと呼ばれます。 Object.assign()および拡張演算子は、デフォルトで深いマージを実行しません。これを行うには、カスタム関数を実装するか、Lodashなどのライブラリを使用する必要があります。

オブジェクトをマージし、属性を繰り返すとどうなりますか？

JavaScriptでオブジェクトをマージすると、複製プロパティが存在する場合、最後のオブジェクトの値は以前の値をオーバーライドします。これは、オブジェクトをマージするときに、ソースオブジェクトのプロパティを横断し、ターゲットオブジェクトに割り当てるためです。ターゲットオブジェクトに属性が既に存在する場合、その値は新しい値に置き換えられます。

オブジェクトのマージのようにJavaScriptの配列をマージすることは可能ですか？

はい、オブジェクトと同様の方法を使用して、javascriptで配列をマージできます。拡張演算子は、配列をマージする一般的な方法です。例は次のとおりです。

const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = { ...defaults, ...userSettings };
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }

元のオブジェクトを変更せずにオブジェクトをマージする方法は？

展開演算子とObject.assign()メソッドは、マージされたときに新しいオブジェクトを作成し、元のオブジェクトを変更せずに残します。これは、データが変更されない機能プログラミングのコアコンセプトである不変性を促進するため、これらの方法の重要な機能です。

JavaScriptのさまざまなデータ型とオブジェクトをマージできますか？

はい、JavaScriptで異なるデータ型とオブジェクトをマージできます。マージされたオブジェクトには、データ型に関係なく、元のオブジェクトのすべてのプロパティとメソッドが含まれます。ただし、異なるデータ型を持つ重複プロパティがある場合、最後のオブジェクトの値は以前の値をオーバーライドします。

JavaScriptオブジェクトのマージのパフォーマンスへの影響は何ですか？

JavaScriptオブジェクトのマージは、特に大きなオブジェクトを扱う場合、パフォーマンスに影響を与える可能性があります。拡張演算子と

メソッドの時間の複雑さはO（n）であり、nはソースオブジェクトのプロパティの総数です。したがって、オブジェクトをマージすることを決定する場合、オブジェクトのサイズを考慮することが重要です。 Object.assign()

JavaScriptのオブジェクトをマージするのに役立つライブラリは何ですか？

はい、JavaScriptのオブジェクトをマージするのに役立つライブラリがいくつかあります。 Lodashは、ディープマージオブジェクトのマージ関数を含む、オブジェクトと配列を操作するためのさまざまなユーティリティ関数を提供する人気のライブラリです。別のライブラリはjQueryです。これは、オブジェクトをマージするための

メソッドを提供します。 $.extend()

以上がJavaScriptでオブジェクトをマージする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。