JavaScript で 2 つのオブジェクトのプロパティを動的にマージする方法の詳細な説明

この記事では、JavaScript で 2 つのオブジェクトのプロパティを動的に結合する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

スプレッド演算子 (...) を使用すると、さまざまなオブジェクトを 1 つのオブジェクトにマージできます。これは、2 つ以上のオブジェクトをマージすることにもなります。最も一般的な操作。

これは、2 つのオブジェクトをマージする不変のメソッドです。つまり、マージに使用される最初の 2 つのオブジェクトは、副作用によってまったく変更されません。最終的に、これら 2 つのオブジェクトはそのままの状態で、それらから構築された新しいオブジェクトを取得します。

2 つのオブジェクトを作成し、それらをマージします:

const person = {
    name: "前端小智",
    age: 24
}
const job = {
    title: "前端开发",
    location: "厦门"
}

const employee = {...person, ...job};

console.log(employee);

実行結果:

{ 
  name: '前端小智', 
  age: 24, 
  title: '前端开发', 
  location: '厦门' 
}

注: 2 つのオブジェクト間に共通のプロパティがある場合 (例: location##) # の場合、2 番目のオブジェクト (job) のプロパティが最初のオブジェクト (person) のプロパティを上書きします:

const person = {
  name: "前端小智",
  location: "北京"
}
const job = {
  title: "前端开发",
  location: "厦门"
}

const employee = {...person, ...job};

console.log(employee);

実行結果:

{ 
  name: '前端小智', 
  location: '厦门', 
  title: '前端开发' 
}

3 つ以上のオブジェクトを結合する場合、右端のオブジェクトが左のオブジェクトを上書きします。

Object.assign() を使用して JavaScript オブジェクトをマージする 2 つ以上のオブジェクトをマージするもう 1 つの一般的な方法は、組み込みの Object.assign ()

メソッドを使用することです。

Object.assign(target, source1, source2, ...);

このメソッドは、1 つ以上のソース オブジェクトからターゲット オブジェクトにすべてのプロパティをコピーします。スプレッド演算子と同様に、オーバーライドする場合は、右端の値が使用されます:

const person = {
  name: "前端小智",
  location: "北京",
};
const job = {
  title: "前端开发",
  location: "厦门",
};

const employee = Object.assign(person, job);
console.log(employee);

実行結果:

{ 
  name: '前端小智', 
  age: 24,
  location: '厦门', 
  title: '前端开发' 
}

繰り返しますが、

employee

によって参照されるオブジェクトは完全に新しいオブジェクトであり、

person または job によって参照されるオブジェクトにはリンクされません。 浅いマージと深いマージ

浅いマージの場合、ソース オブジェクトのプロパティの 1 つが別のオブジェクトである場合、ターゲット オブジェクトには、ソースオブジェクトの引用。この場合、新しいオブジェクトは作成されません。

前の

person

オブジェクトを調整し、オブジェクト自体として

location を使用します。

const person = {
    name: "John Doe",
    location: {
        city: "London", 
        country: "England"
    }
}
const job = {
    title: "Full stack developer"
}

const employee = {...person, ...job};

console.log(employee.location === person.location);

実行結果:

true

We

person

オブジェクトと

employee オブジェクト内の location オブジェクトへの参照が同じであることがわかります。実際、スプレッド演算子 (...) と Object.assign() は浅いマージです。 JavaScript には、ディープ マージのサポートがまだ用意されていません。ただし、Lodash の .merge

などのサードパーティのモジュールとライブラリはこれをサポートしています。

概要

この記事では、JS で 2 つのオブジェクトをマージする方法を説明します。スプレッド演算子 (

...

) と

Object.assign() メソッドが導入されました。どちらも、コンポーネントに影響を与えることなく、2 つ以上のオブジェクトを新しいオブジェクトに浅くマージします。 。 元のアドレス: https://stackak.com/merge-properties-of-two-objects-dynamically-in-javascript/

著者: Abhilash Kamimanu

翻訳アドレス: https://segmentfault.com/a/1190000039833349

翻訳者: フロントエンド Xiaozhi

プログラミング関連の知識の詳細については、以下を参照してください。

プログラミングビデオ

! ！

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