Dado o objeto:
var firstObject = {
key1 : 'value1',
key2 : 'value2'
};
como posso copiar as propriedades dentro de outro objeto ( secondObject
) como este:
var secondObject = {
key1 : 'value1',
key2 : 'value2',
key3 : 'value3',
key4 : 'value4'
};
usando uma referência ao firstObject
? Algo assim:
var secondObject = {
firstObject,
key3 : 'value3',
key4 : 'value4'
};
(isso não funciona ... coloquei apenas para mostrar em grandes linhas como eu gostaria de estruturar o código).
É possível uma solução sem o uso de estruturas JavaScript?
javascript
Igor Popov
fonte
fonte
secondObject = JSON.parse('{' + JSON.stringify(firstObject).match(/^.(.*).$/)[1] + ',' + JSON.stringify(secondObject).match(/^.(.*).$/)[1] + '}');
Respostas:
fonte
hasOwnProperty
é inútil. Enquanto eu encontrar o seu indicador útil, considero a ideia de aplicar quaisquer regras de qualquer situação prejudicial e imprudente. Como todas estas práticas de desenvolvimento orientada para o padrão que estão acontecendo, por isso não é pessoal ...hasOwnProperty()
teste e as coisas meio que continuam funcionando. Até que parem, porque seus objetos se tornaram mais complexos com o tempo. Exceto então, ele quebra misteriosamente em uma parte não relacionada do código porque muito foi copiado. E você não tem nenhum contexto para depuração. O JS é péssimo assim, por isso é prudente a codificação cuidadosa para evitar que esses problemas ocorram.Tomando uma sugestão da resposta de @ Bardzuśny aqui, o ES6 forneceu uma solução nativa: a
Object.assign()
função!O uso é simples:
É isso aí!
O suporte agora é obviamente ruim; somente o Firefox (34+) é compatível imediatamente, enquanto o Chrome (45+) e o Opera (32+) exigem que o 'sinalizador experimental' seja definido.O suporte está melhorando, com as versões mais recentes do Chrome, Firefox, Opera, Safari e Edge (o IE notavelmente não tem suporte). Transpilers também estão disponíveis, como Babel e Traceur. Veja aqui para mais detalhes.
fonte
Object.assign()
apenas shim: github.com/ljharb/object.assign ).Por ES6 - sintaxe de propagação :
Você pode simplesmente usar:
Isso evita problemas de passar esses objetos por referência.
Além disso, ele cuida de objetos com aninhamento profundo.
fonte
Faça um loop pelas propriedades do primeiro objeto e atribua-as ao segundo objeto, assim:
O loop
for
-in
não é suficiente; você precisahasOwnProperty
. Veja http://bonsaiden.github.com/JavaScript-Garden/#object.forinloop para uma explicação detalhada do porquê.fonte
reference
no sentido técnico. Eu acho que ele apenas quer dizer "referência a" em linguagem natural.Jogando o necromante aqui, porque o ES5 nos trouxe
Object.keys()
, com potencial para nos salvar de todas essas.hasOwnProperty()
verificações.Ou, agrupando-o em uma função ("cópia" limitada do lodash
_.assign()
):Object.keys()
é um método relativamente novo, mais notavelmente: não disponível no IE <9. O mesmo vale para o.forEach()
método array, que eu usei no lugar dofor
loop regular .Felizmente, há es5-shim disponível para esses navegadores antigos, que preencherão muitos recursos do ES5 (incluindo os dois).
(Eu sou a favor de polyfills, em vez de não usar novos recursos interessantes de idioma.)
fonte
Necro'ing para que as pessoas possam encontrar um método de cópia profunda com hasOwnProperty e verificação de objeto real:
fonte
'[object Array]'
Pode-se usar Object.assign para combinar objetos. Ele combinará e substituirá a propriedade comum da direita para a esquerda, ou seja, a mesma propriedade na esquerda será substituída pela direita.
E é importante fornecer um objeto vazio no primeiro para evitar a mutação dos objetos de origem. Os objetos de origem devem ser deixados limpos, pois,
Object.assign()
por si só, retorna um novo objeto.Espero que isto ajude!
fonte
Melhoria da ideia kingPuppy e OP (cópia superficial) - adiciono apenas 3 pontos ao "exemplo" do OP :)
Mostrar snippet de código
fonte
Isso deve funcionar, testado aqui .
Nota : isso não copiará os métodos da
firstObject
Nota 2 : para uso em navegadores antigos, você precisará de um analisador json
Nota 3 : atribuir por referência é uma opção viável, especialmente se
firstObject
contiver métodos. Ajustado o exemplo jsfiddle fornecido de acordofonte
Infelizmente, você não pode colocar uma referência a uma variável em um objeto como esse. No entanto, você pode criar uma função que copie os valores do objeto em outro objeto.
fonte
Se você deseja capturar apenas as propriedades existentes no segundo objeto, pode usar
Object.keys
as propriedades do primeiro objeto, pode executar dois métodos:A.)
map
para atribuir as propriedades do primeiro objeto ao segundo objeto usando efeitos colaterais:B.) ou
reduce
para criar um novo objeto e atribuí-lo ao segundo objeto. Esteja ciente de que esse método substitui outras propriedades que o segundo objeto pode ter antes daquilo que não corresponde ao primeiro objeto:fonte
Use a notação de propriedade espalhada. Foi adicionado no ES2018 (o spread para arrays / iterables era anterior, ES2015), {... firstObject} espalha todas as propriedades enumeráveis como propriedades discretas.
fonte
Prefiro usar firstObject como protótipo de secondObject e adicionar descritor de propriedades:
Certamente não é uma linha, mas oferece mais controle. Se você estiver interessado em descritores de propriedade, sugiro ler este artigo: http://patrickdelancy.com/2012/09/property-descriptors-in-javascript/#comment-2062 e a página MDN https: //developer.mozilla. org / pt-br / docs / Web / JavaScript / Referência / Global_Objects / Object / create
Você também pode atribuir valores e omitir os descritores e torná-lo um pouco mais curto:
Compatibilidade: ECMAScript 5, então IE9 +
fonte
O uso do método follwing copiará as propriedades
Eu sou muito novo em javascript, mas achei isso funcionando. Um pouco demais, eu acho, mas funciona.
fonte