Aquí está mi objeto literal:
var obj = {key1: value1, key2: value2};
¿Cómo puedo añadir campo key3
con value3
el objeto?
javascript
object-literal
James Skidmore
fuente
fuente
Respuestas:
Hay dos formas de agregar nuevas propiedades a un objeto:
Usando notación de punto:
Usando la notación de corchetes:
El primer formulario se usa cuando conoce el nombre de la propiedad. La segunda forma se usa cuando el nombre de la propiedad se determina dinámicamente. Como en este ejemplo:
Se puede construir una matriz de JavaScript real usando:
La notación literal de la matriz:
La notación de constructor de matriz:
fuente
Object.keys({"b": 1, "c": 3, "a": 2}).sort().forEach(console.log);
length
propiedad no está establecida porque no es una matriz, es un objeto / mapa / diccionario.Respuesta del año 2017:
Object.assign()
Object.assign (dest, src1, src2, ...) combina objetos.
Se sobrescribe
dest
con propiedades y valores de (sin importar cuántos) objetos fuente, luego regresadest
.Ejemplo en vivo
Respuesta del año 2018: operador de propagación de objetos
{...}
De MDN :
Ejemplo en vivo
Funciona en Chrome actual y Firefox actual. Dicen que no funciona en Edge actual.
Respuesta año 2019
Operador de asignación de objetos+=
:Vaya ... me dejé llevar. El contrabando de información del futuro es ilegal. Debidamente oscurecido!fuente
const
y, enlet
lugar devar
, ¿debería ser esa la forma 2018?const
porque elimina esa ventaja. Cada vez que lo usaba, obstaculizaba el desarrollo.Year 2019 answer ... Opps ...
porción merece un agradecimiento, me alegraste el día . Mejor respuesta +1Me he encariñado con LoDash / Underscore cuando escribo proyectos más grandes.
Agregar por
obj['key']
oobj.key
son todas respuestas de JavaScript puro y sólido. Sin embargo, las bibliotecas LoDash y Underscore proporcionan muchas funciones convenientes adicionales cuando se trabaja con objetos y matrices en general..push()
es para matrices , no para objetos .Dependiendo de lo que esté buscando, hay dos funciones específicas que pueden ser agradables de utilizar y brindan una funcionalidad similar a la de la sensación
arr.push()
. Para obtener más información, consulte los documentos, que tienen algunos excelentes ejemplos allí._.merge (solo Lodash)
El segundo objeto sobrescribirá o agregará al objeto base.
undefined
los valores no se copian._.extend / _.assign
El segundo objeto sobrescribirá o agregará al objeto base.
undefined
será copiado_defectos
El segundo objeto contiene valores predeterminados que se agregarán al objeto base si no existen.
undefined
los valores se copiarán si la clave ya existe.$ .extend
Además, puede valer la pena mencionar jQuery.extend, funciona de manera similar a _.merge y puede ser una mejor opción si ya está usando jQuery.
El segundo objeto sobrescribirá o agregará al objeto base.
undefined
los valores no se copian.Object.assign ()
Vale la pena mencionar el Object.assign ES6 / ES2015, funciona de manera similar a _.merge y puede ser la mejor opción si ya está utilizando un polyfill ES6 / ES2015 como Babel si desea rellenarlo usted mismo .
El segundo objeto sobrescribirá o agregará al objeto base.
undefined
será copiadofuente
_.extend
es un alias más universal ya que la biblioteca de subrayado todavíaextend
no está usandomerge
. Actualizaré mi respuesta.Puede usar cualquiera de estos (siempre que la tecla 3 sea la tecla aguda que desea usar)
o
Si key3 es una variable, entonces debe hacer:
Después de esto, solicitar
arr.a_key
devolvería el valor devalue3
, un literal3
.fuente
porque su arr no es realmente una matriz ... Es un objeto prototipo. La matriz real sería:
Pero todavía no está bien. En realidad debería ser:
fuente
fuente
Simplemente agregando propiedades:
Y queremos agregar
prop2 : 2
a este objeto, estas son las opciones más convenientes:object.prop2 = 2;
object['prop2'] = 2;
Entonces, ¿cuál usamos entonces?
El operador de punto es una sintaxis más limpia y se debe usar de manera predeterminada (imo). Sin embargo, el operador de puntos no es capaz de agregar claves dinámicas a un objeto, lo que puede ser muy útil en algunos casos. Aquí hay un ejemplo:
Fusionar objetos:
Cuando queremos fusionar las propiedades de 2 objetos, estas son las opciones más convenientes:
Object.assign()
, toma un objeto de destino como argumento y uno o más objetos de origen y los fusionará. Por ejemplo:...
¿Cuál usamos?
Object.assign()
es más dinámico porque tenemos acceso a todos los objetos que se pasan como argumentos y podemos manipularlos antes de que se asignen al nuevo Objeto.fuente
Sé que ya hay una respuesta aceptada para esto, pero pensé que documentaría mi idea en alguna parte. Por favor, [la gente] no dude en hacer agujeros en esta idea, ya que no estoy seguro de si es la mejor solución ... pero acabo de armar esto hace unos minutos:
Lo utilizarías de esta manera:
Como la función prototipo está regresando
this
, puede continuar encadenando.push
hasta el final de suobj
variable:obj.push(...).push(...).push(...);
Otra característica es que puede pasar una matriz u otro objeto como valor en los argumentos de la función de inserción. Vea mi violín para un ejemplo de trabajo: http://jsfiddle.net/7tEme/
fuente
TypeError: 'undefined' is not a function (evaluating 'U[a].exec(s)')
cual es extraño porque funciona en jsfiddle incluso con jquery1.9Actuación
Hoy 2020.01.14 realizo pruebas en MacOs HighSierra 10.13.6 en Chrome v78.0.0, Safari v13.0.4 y Firefox v71.0.0, para las soluciones elegidas. Divido las soluciones en mutable (primera letra M) e inmutable (primera letra I). También proporciono algunas soluciones inmutables (IB, IC, ID / IE) aún no publicadas en las respuestas a esta pregunta
Conclusiones
obj.key3 = "abc"
(MA, MB) es el más rápido{...obj, key3:'abc'}
yObject.assign
(IA, IB) son más rápidasDetalles
En el fragmento a continuación hay una solución probada presentada, puede realizar una prueba previa en su máquina AQUÍ
Mostrar fragmento de código
fuente
Puedes crear una clase con la respuesta de @ Ionuț G. Stan
Crear un nuevo objeto con la última clase:
Imprimir el objeto
Imprimir una llave
Soy novato en javascript, los comentarios son bienvenidos. Funciona para mi.
fuente
Dos formas más utilizadas ya mencionadas en la mayoría de las respuestas
Una forma más de definir una propiedad es usar Object.defineProperty ()
Este método es útil cuando desea tener más control al definir la propiedad. La propiedad definida se puede establecer como enumerable, configurable y escribible por el usuario.
fuente
Su ejemplo muestra un objeto, no una matriz. En ese caso, la forma preferida de agregar un campo a un Objeto es simplemente asignarlo, así:
fuente
compatible con la mayoría de los navegadores, y verifica si la clave de objeto está disponible o no, si está disponible , anula el valor de clave existente y no está disponible , agrega clave con valor
Ejemplo 1
ejemplo 2
ejemplo 3
fuente
En caso de que tenga varios literales de objeto anónimos dentro de un objeto y desee agregar otro objeto que contenga pares clave / valor, haga lo siguiente:
Firebug 'el objeto:
devoluciones:
Código:
se agregará
Object {name="Peanuts", value="12"}
al objeto Comicbookfuente
Ya sea
obj['key3'] = value3
oobj.key3 = value3
agregará el nuevo par alobj
.Sin embargo, sé que jQuery no se mencionó, pero si lo está utilizando, puede agregar el objeto
$.extend(obj,{key3: 'value3'})
. P.ej:jQuery. extend (target [, object1] [, objectN]) combina el contenido de dos o más objetos en el primer objeto.
Y también permite adiciones / modificaciones recursivas con
$.extend(true,object1,object2);
:Mostrar fragmento de código
fuente
Una forma corta y elegante en la próxima especificación de Javascript (candidato etapa 3) es:
obj = { ... obj, ... { key3 : value3 } }
Se puede encontrar una discusión más profunda en Object spread vs Object.assign y en el sitio del Dr. Axel Rauschmayers .
Funciona ya en node.js desde la versión 8.6.0.
Vivaldi, Chrome, Opera y Firefox en versiones actualizadas también conocen esta característica, pero Mirosoft no lo hace hasta hoy, ni en Internet Explorer ni en Edge.
fuente
Salida como esta: -
fuente
Puedes agregarlo de esta manera:
o de esta manera:
Las respuestas que sugieren introducir el objeto con la variable
key3
solo funcionarían si el valor dekey3
fue'key3'
.fuente
Según los descriptores de acceso a propiedades definidos en ECMA-262 ( http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf , P67), hay dos formas de agregar propiedades a existe un objeto Todos estos dos modos, el motor de Javascript los tratará igual.
La primera forma es usar la notación de puntos:
Pero de esta manera, debe usar un IdentifierName después de la notación de puntos.
La segunda forma es usar la notación de corchetes:
y otra forma:
De esta manera, podría usar una Expresión (incluir IdentifierName ) en la notación de corchetes.
fuente
Podemos hacer esto de esta manera también.
fuente
Ya que es una cuestión del pasado pero el problema del presente. Sugeriría una solución más: simplemente pase la clave y los valores a la función y obtendrá un objeto de mapa.
fuente
Para anteponer un par clave-valor a un objeto, para que for for funcione con ese elemento primero haga esto:
fuente
La mejor manera de lograr lo mismo se indica a continuación:
fuente
Puede crear un nuevo objeto utilizando la
{[key]: value}
sintaxis:Con la sintaxis anterior, ahora puede usar la sintaxis de propagación
{...foo, ...bar}
para agregar un nuevo objeto sin mutar su valor anterior:fuente