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

概要: このチュートリアルでは、2つ以上のJavaScriptオブジェクトをマージし、すべてのオブジェクトのプロパティを組み合わせた新しいオブジェクトを作成する方法を学びます。

マージされたすべてのプロパティを持つ新しいオブジェクトにオブジェクトをマージするには、2つの方法があります。

スプレッド演算子（...）を使用する
Object.assign()メソッドを使用する

スプレッド演算子(...)を使用してオブジェクトをマージする

ES6では、2つ以上のオブジェクトをマージし、マージされたオブジェクトのプロパティを持つ新しいオブジェクトを作成するために使用できるスプレッド演算子（...）が導入されました。

次の例では、スプレッド演算子（...）を使用して、personオブジェクトとjobオブジェクトをemployeeオブジェクトにマージします。

let person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356'
};


let job = {
    jobTitle: 'JavaScript Developer',
    location: 'USA'
};

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

console.log(employee);
Code language: JavaScript (javascript)

出力

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

オブジェクトに同じ名前のプロパティがある場合、右端のオブジェクトのプロパティが前のプロパティを上書きします。例えば

let job = {
    jobTitle: 'JavaScript Developer',
    country: 'USA'
};

let location = {
    city: 'London',
    country: 'England'
};

let remoteJob = {
    ...job,
    ...location
};

console.log(remoteJob);
Code language: JavaScript (javascript)

出力

{
    jobTitle: 'JavaScript Developer',
    country: 'England',
    city: 'London'
}
Code language: CSS (css)

この例では、jobとlocationは同じプロパティcountryを持っています。これらのオブジェクトをマージすると、結果のオブジェクト（remoteJob）は、2番目のオブジェクト（location）の値を持つcountryプロパティを持ちます。

Object.assign()メソッドを使用してオブジェクトをマージする

Object.assign()メソッドを使用すると、1つ以上のソースオブジェクトからすべての列挙可能な独自のプロパティをターゲットオブジェクトにコピーし、ターゲットオブジェクトを返すことができます。

Object.assign(target, sourceObj1, sourceObj2, ...);
Code language: JavaScript (javascript)

スプレッド演算子（...）と同様に、ソースオブジェクトに同じプロパティ名がある場合、後のオブジェクトが前のオブジェクトを上書きします。次の例を参照してください。

let person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356'
};


let job = {
    jobTitle: 'JavaScript Developer',
    country: 'USA'
};


let employee = Object.assign(person, job);
console.log(employee);
Code language: JavaScript (javascript)

出力

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    country: 'USA'
}
Code language: CSS (css)

浅いマージ（シャローマージ）

スプレッド演算子（...）とObject.assign()メソッドはどちらも浅いマージを実行します。これは、オブジェクトが別のオブジェクトを参照するプロパティを持っている場合、元のオブジェクトのプロパティと結果のターゲットオブジェクトが同じオブジェクトを参照することを意味します。例えば

let person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    contact: {
        phone: '408-989-8745',
        email: '[email protected]'
    }
};


let job = {
    jobTitle: 'JavaScript Developer',
    location: 'USA'
};

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

console.log(employee.contact === person.contact);
Code language: JavaScript (javascript)

出力

true
Code language: JavaScript (javascript)

この例では、personオブジェクトはオブジェクトを参照するcontactプロパティを持っています。マージ後、personオブジェクトとemployeeオブジェクトは同じオブジェクトを参照するcontactプロパティを持ちます。

深いマージ（ディープマージ）

ソースオブジェクトの独自および継承された列挙可能な文字列キー付きプロパティをターゲットオブジェクトに再帰的にマージするには、Lodash ._merge()メソッドを使用できます。

_.merge(object, [sources])
Code language: CSS (css)

このチュートリアルでは、スプレッド演算子（...）とObject.assign()メソッドを使用してJavaScriptでオブジェクトをマージする方法を学びました。

このチュートリアルは役に立ちましたか？