Aqui está o meu objeto literal:
var obj = {key1: value1, key2: value2};
Como posso adicionar campo key3
com value3
o objeto?
javascript
object-literal
James Skidmore
fonte
fonte
Respostas:
Existem duas maneiras de adicionar novas propriedades a um objeto:
Usando notação de ponto:
Usando notação de colchete:
O primeiro formulário é usado quando você sabe o nome da propriedade. O segundo formulário é usado quando o nome da propriedade é determinado dinamicamente. Como neste exemplo:
Uma matriz JavaScript real pode ser construída usando:
A notação literal de matriz:
A notação do construtor Array:
fonte
Object.keys({"b": 1, "c": 3, "a": 2}).sort().forEach(console.log);
length
propriedade não está definida porque não é uma matriz, é um objeto / mapa / dicionário.Resposta do ano de 2017:
Object.assign()
Object.assign (dest, src1, src2, ...) mescla objetos.
Ele substitui as
dest
propriedades e os valores de (no entanto muitos) objetos de origem e retornadest
.Exemplo ao vivo
Resposta do ano 2018: operador de propagação de objetos
{...}
Do MDN :
Exemplo ao vivo
Funciona no Chrome atual e no Firefox atual. Eles dizem que não funciona no Edge atual.
Resposta do ano de 2019
Operador de atribuição de objeto+=
:Opa ... Eu me empolguei. Contrabandear informações do futuro é ilegal. Devidamente obscurecido!fonte
const
e, emlet
vez devar
, deve ser o caminho para 2018?const
porque remove essa vantagem. Toda vez que eu o usava, isso dificultava o desenvolvimento.Year 2019 answer ... Opps ...
parte merece um agradecimento, você fez o meu dia . Melhor resposta +1Apreciei o LoDash / Underscore ao escrever projetos maiores.
Adicionando
obj['key']
ouobj.key
são todas respostas JavaScript sólidas e puras. No entanto, as bibliotecas LoDash e Underscore fornecem muitas funções convenientes adicionais ao trabalhar com objetos e matrizes em geral..push()
é para matrizes , não para objetos .Dependendo do que você está procurando, há duas funções específicas que podem ser boas de utilizar e oferecem funcionalidade semelhante à sensação de
arr.push()
. Para mais informações, verifique os documentos, eles têm ótimos exemplos._.merge (apenas Lodash)
O segundo objeto substituirá ou adicionará ao objeto base.
undefined
valores não são copiados._.extend / _.assign
O segundo objeto substituirá ou adicionará ao objeto base.
undefined
será copiado._.defaults
O segundo objeto contém padrões que serão adicionados ao objeto base se eles não existirem.
undefined
os valores serão copiados se a chave já existir.$ .extend
Além disso, pode valer a pena mencionar o jQuery.extend, ele funciona de forma semelhante ao _.merge e pode ser uma opção melhor se você já estiver usando o jQuery.
O segundo objeto substituirá ou adicionará ao objeto base.
undefined
valores não são copiados.Object.assign ()
Vale a pena mencionar o Object.assign do ES6 / ES2015, ele funciona de forma semelhante a _.merge e pode ser a melhor opção se você já estiver usando um polyfill do ES6 / ES2015 como Babel, se quiser se polyfill .
O segundo objeto substituirá ou adicionará ao objeto base.
undefined
será copiado.fonte
_.extend
é um alias mais universal, pois a biblioteca de sublinhado aindaextend
não está usandomerge
. Vou atualizar minha resposta.Você pode usar qualquer um destes (desde que key3 seja a chave acutal que você deseja usar)
ou
Se key3 é uma variável, você deve fazer:
Depois disso, a solicitação
arr.a_key
retornaria o valor devalue3
, um literal3
.fonte
porque sua arr não é realmente uma matriz ... É um objeto de protótipo. A matriz real seria:
mas ainda não está certo. Na verdade, deve ser:
fonte
fonte
Simplesmente adicionando propriedades:
E queremos adicionar
prop2 : 2
a esse objeto, estas são as opções mais convenientes:object.prop2 = 2;
object['prop2'] = 2;
Então, qual usamos então?
O operador de ponto é uma sintaxe mais limpa e deve ser usado como padrão (imo). No entanto, o operador de ponto não é capaz de adicionar chaves dinâmicas a um objeto, o que pode ser muito útil em alguns casos. Aqui está um exemplo:
Mesclando objetos:
Quando queremos mesclar as propriedades de 2 objetos, estas são as opções mais convenientes:
Object.assign()
, pega um objeto de destino como argumento e um ou mais objetos de origem e os mescla. Por exemplo:...
Qual usamos?
Object.assign()
é mais dinâmico porque temos acesso a todos os objetos que são passados como argumentos e podemos manipulá-los antes de serem atribuídos ao novo objeto.fonte
Sei que já existe uma resposta aceita para isso, mas pensei em documentar minha ideia em algum lugar. Por favor, [as pessoas] sintam-se à vontade para fazer furos nessa idéia, pois não tenho certeza se é a melhor solução ... mas acabei de montar isso alguns minutos atrás:
Você o utilizaria desta maneira:
Como a função prototype está retornando,
this
você pode continuar encadeando.push
até o final de suaobj
variável:obj.push(...).push(...).push(...);
Outro recurso é que você pode passar uma matriz ou outro objeto como o valor nos argumentos da função push. Veja meu violino para um exemplo de trabalho: http://jsfiddle.net/7tEme/
fonte
TypeError: 'undefined' is not a function (evaluating 'U[a].exec(s)')
o que é estranho, porque ele funciona em jsFiddle mesmo com jquery1.9atuação
Hoje 2020.01.14 realizo testes no MacOs HighSierra 10.13.6 no Chrome v78.0.0, Safari v13.0.4 e Firefox v71.0.0, para soluções escolhidas. Divido soluções para mutável (primeira letra M) e imutável (primeira letra I). Também forneço poucas soluções imutáveis (IB, IC, ID / IE) ainda não publicadas em respostas a esta pergunta
Conclusões
obj.key3 = "abc"
(MA, MB) é a mais rápida{...obj, key3:'abc'}
eObject.assign
(IA, IB) são as mais rápidasDetalhes
No snippet abaixo, há uma solução testada, você pode pré-testar na sua máquina AQUI
Mostrar snippet de código
fonte
Você pode criar uma turma com a resposta de @ Ionuț G. Stan
Criando um novo objeto com a última classe:
Imprimindo o objeto
Imprimindo uma chave
Eu sou novato em javascript, comentários são bem-vindos. Funciona para mim.
fonte
Duas maneiras mais usadas já mencionadas na maioria das respostas
Mais uma maneira de definir uma propriedade é usar Object.defineProperty ()
Este método é útil quando você deseja ter mais controle ao definir a propriedade. A propriedade definida pode ser definida como enumerável, configurável e gravável pelo usuário.
fonte
Seu exemplo mostra um objeto, não uma matriz. Nesse caso, a maneira preferida de adicionar um campo a um objeto é apenas atribuí-lo, assim:
fonte
apoiada pela maioria dos navegadores, e ele verifica se chave de objeto disponível ou não deseja adicionar, se disponível lo Overides valor de chave existente e não disponível lo adicionar chave com valor
Exemplo 1
exemplo 2
exemplo 3
fonte
Caso você tenha vários literais de Objetos anônimos dentro de um Objeto e deseje adicionar outro Objeto contendo pares de chave / valor, faça o seguinte:
Firebug 'o objeto:
retorna:
Código:
adicionará
Object {name="Peanuts", value="12"}
ao objeto Comicbookfonte
Quer
obj['key3'] = value3
ouobj.key3 = value3
vai adicionar o novo par aoobj
.No entanto, eu sei que o jQuery não foi mencionado, mas se você o estiver usando, poderá adicionar o objeto
$.extend(obj,{key3: 'value3'})
. Por exemplo:jQuery. estender (destino [, objeto1] [, objetoN]) mescla o conteúdo de dois ou mais objetos juntos no primeiro objeto.
E também permite adições / modificações recursivas com
$.extend(true,object1,object2);
:Mostrar snippet de código
fonte
Uma maneira curta e elegante da próxima especificação Javascript (estágio candidato 3) é:
obj = { ... obj, ... { key3 : value3 } }
Uma discussão mais aprofundada pode ser encontrada em Propagação de objeto versus Object.assign e no site do Dr. Axel Rauschmayers .
Ele já funciona no node.js desde a liberação 8.6.0.
Vivaldi, Chrome, Opera e Firefox em versões atualizadas também conhecem esse recurso, mas a Mirosoft não conhece até hoje, nem no Internet Explorer nem no Edge.
fonte
Saída assim: -
fonte
Você pode adicioná-lo desta maneira:
ou desta maneira:
As respostas sugerindo digitar o objeto com a variável
key3
só funcionariam se o valor dekey3
fosse'key3'
.fonte
De acordo com os Acessadores de propriedades definidos no ECMA-262 ( http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf , P67), existem duas maneiras de você adicionar propriedades ao existe um objeto. Em todos esses sentidos, o mecanismo Javascript os tratará da mesma maneira.
A primeira maneira é usar a notação de ponto:
Mas dessa maneira, você deve usar um IdentifierName após a notação de ponto.
A segunda maneira é usar a notação entre colchetes:
e outra forma:
Dessa forma, você pode usar uma Expressão (incluir IdentifierName ) na notação de colchete.
fonte
Também podemos fazer isso dessa maneira.
fonte
Uma vez que é uma questão do passado, mas o problema do presente. Sugeriria mais uma solução: basta passar a chave e os valores para a função e você obterá um objeto de mapa.
fonte
Para preceder um par de valores-chave em um objeto, o for in funciona com esse elemento, primeiro faça o seguinte:
fonte
A melhor maneira de conseguir o mesmo é declarada abaixo:
fonte
Você pode criar um novo objeto usando a
{[key]: value}
sintaxe:Com a sintaxe anterior, agora você pode usar a sintaxe de dispersão
{...foo, ...bar}
para adicionar um novo objeto sem alterar seu valor antigo:fonte