Na semana passada, escrevi 6 Grandes Usos do Operador de Spread, uma postagem que detalha como o operador de spread (...) para trabalhar com matrizes e outros objetos iteráveis. Como sempre, meus leitores contribuíram com alguns outros usos excelentes, que o senhor deve conferir na seção comentários. E, é claro, assim que publiquei a postagem, encontrei outro ótimo uso do operador de spread enquanto mexia no Babel e Reagir: mesclando propriedades de vários objetos em um único objeto!
O JavaScript
Envolva todos os objetos que o senhor gostaria que fossem mesclados em um só com chaves ({}):
const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };
const summary = {...person, ...tools};
/*
Object {
"computer": "Mac",
"editor": "Atom",
"gender": "Male",
"name": "David Walsh",
}
*/
Um novo objeto é criado contendo todas as propriedades e valores dos objetos fornecidos com o operador rest. Observe também que o senhor pode fornecer qualquer número de objetos para mesclar:
const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };
const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };
const summary = {...person, ...tools, ...attributes};
/*
Object {
"computer": "Mac",
"editor": "Atom",
"eyes": "Blue",
"gender": "Male",
"hair": "Brown",
"handsomeness": "Extreme",
"name": "David Walsh",
}
*/
No caso de uma colisão de chaves, o valor do objeto mais à direita (último) vence:
const person1 = { name: 'David Walsh', age: 33 };
const person2 = { name: 'David Walsh Jr.', role: 'kid' };
const merged = {...person1, ...person2}
/*
Object {
"name": "David Walsh Jr.",
"age": 33,
"role": "kid",
}
*/
Adoro como é fácil mesclar objetos usando o operador de propagação. O senhor pode usar o Object.assign para realizar a mesma façanha, mas o operador de propagação torna as coisas um pouco mais curtas se o senhor não se importar com uma sintaxe um pouco menos descritiva!
Observação: Essa sintaxe ainda não é compatível com todos os navegadores, mas o senhor pode usar o Babel com o transform-object-rest-spread para permitir a fusão de objetos com o operador de propagação.
