Objetos de mesclagem JavaScript

Resumo : neste tutorial, você aprenderá como mesclar dois ou mais objetos JavaScript e criar um novo objeto que combine as propriedades de todos os objetos.

Para mesclar objetos em um novo que tenha todas as propriedades dos objetos mesclados, você tem duas opções:

• Use um operador de propagação ( ...)
• Use o Object.assign()método

Mesclar objetos usando o operador spread ( ...)

ES6 introduziu o operador spread ( ...) que pode ser usado para mesclar dois ou mais objetos e criar um novo que possua propriedades dos objetos mesclados.

O exemplo a seguir usa o operador spread ( ...) para mesclar os objetos persone jobno employeeobjeto:

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);
Linguagem de código:  JavaScript  ( javascript )

Saída:

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Linguagem de código:  CSS  ( css )

Se os objetos tiverem uma propriedade com o mesmo nome, a propriedade do objeto mais à direita substituirá a anterior. Por exemplo:

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

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

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

console.log(remoteJob);
Linguagem de código:  JavaScript  ( javascript )

Saída:

{
    jobTitle: 'JavaScript Developer',
    country: 'England',
    city: 'London'
}
Linguagem de código:  CSS  ( css )

Neste exemplo, o jobe locationtem a mesma propriedade country. Quando mesclamos esses objetos, o objeto resultado ( remoteJob) possui a countrypropriedade com o valor do segundo objeto ( location).

Mesclar objetos usando Object.assign()método

O Object.assign()método permite copiar todas as propriedades próprias enumeráveis ​​de um ou mais objetos de origem para um objeto de destino e retornar o objeto de destino:

Object.assign(target, sourceObj1, sourceObj2, ...);
Linguagem de código:  JavaScript  ( javascript )

Semelhante ao operador spread ( ...), se os objetos de origem tiverem o mesmo nome de propriedade, o objeto posterior substituirá o objeto anterior. Veja o exemplo a seguir:

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);
Linguagem de código:  JavaScript  ( javascript )

Saída:

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    country: 'USA'
}
Linguagem de código:  CSS  ( css )

A fusão superficial

Tanto o operador spread ( ...) quanto Object.assign()o método executam uma mesclagem superficial. Isso significa que se um objeto tiver uma propriedade que faça referência a outro objeto, a propriedade do objeto original e do objeto de destino do resultado fará referência ao mesmo objeto. Por exemplo:

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);
Linguagem de código:  JavaScript  ( javascript )

Saída:

true
Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, o personobjeto possui a contactpropriedade que faz referência a um objeto. Após a fusão, o objeto persone employeepossui a contactpropriedade que faz referência ao mesmo objeto.

A fusão profunda

Para mesclar recursivamente propriedades com chave de string enumerável próprias e herdadas de objetos de origem em um objeto de destino, você pode usar o método Lodash ._merge() :

_.merge(object, [sources])
Linguagem de código:  CSS  ( css )

Neste tutorial, você aprendeu como mesclar objetos em JavaScript usando o operador spread ( ...) e Object.assign()o método.