Dado el objeto:
var firstObject = {
key1 : 'value1',
key2 : 'value2'
};
¿Cómo puedo copiar las propiedades dentro de otro objeto ( secondObject
) como este:
var secondObject = {
key1 : 'value1',
key2 : 'value2',
key3 : 'value3',
key4 : 'value4'
};
utilizando una referencia a la firstObject
? Algo como esto:
var secondObject = {
firstObject,
key3 : 'value3',
key4 : 'value4'
};
(esto no funciona ... Lo puse solo para mostrar en grandes líneas cómo me gustaría estructurar el código).
¿Es posible una solución sin usar ningún framework de JavaScript?
javascript
Igor Popov
fuente
fuente
secondObject = JSON.parse('{' + JSON.stringify(firstObject).match(/^.(.*).$/)[1] + ',' + JSON.stringify(secondObject).match(/^.(.*).$/)[1] + '}');
Respuestas:
fuente
hasOwnProperty
es inútil. Si bien considero útil su puntero, considero que la idea de aplicar cualquier regla a cualquier situación es dañina e imprudente. Al igual que todas estas prácticas de desarrollo basadas en patrones que están sucediendo, así que no lo tomes como algo personal ...hasOwnProperty()
prueba y las cosas siguen funcionando. Hasta que se detengan, porque tus objetos se volvieron más complejos con el tiempo. Excepto que se rompe misteriosamente en una parte no relacionada del código porque se copió demasiado. Y no tiene ningún contexto para la depuración. JS apesta así, por lo que es prudente una codificación cuidadosa para evitar que ocurran tales problemas.Siguiendo el ejemplo de la respuesta de @ Bardzuśny aquí, ES6 ha entregado una solución nativa: ¡la
Object.assign()
función!El uso es simple:
¡Eso es!
El apoyo en este momento es obviamente pobre; solo Firefox (34+) lo admite de forma inmediata, mientras que Chrome (45+) y Opera (32+) requieren que se establezca el 'indicador experimental'.El soporte está mejorando, con las últimas versiones de Chrome, Firefox, Opera, Safari y Edge que lo soportan (IE notablemente no tiene soporte). Los transpiladores también están disponibles, como Babel y Traceur. Ver aquí para más detalles.
fuente
Object.assign()
shim: github.com/ljharb/object.assign ).Por ES6 - Sintaxis extendida :
Simplemente puede usar:
Esto evita problemas de pasar estos objetos por referencia.
Además, se ocupa de los objetos que tienen un anidamiento profundo.
fuente
Recorra las propiedades del primer objeto y asígnelas al segundo objeto, así:
El
for
-in
bucle no es suficiente; lo que necesitahasOwnProperty
. Consulte http://bonsaiden.github.com/JavaScript-Garden/#object.forinloop para obtener una explicación detallada de por qué.fuente
reference
en el sentido técnico. Creo que solo quiere decir lenguaje natural "refiriéndose a".Jugar al nigromante aquí, porque ES5 nos trajo
Object.keys()
, con potencial para salvarnos de todos estos.hasOwnProperty()
controles.O, envolviéndolo en una función ("copia" limitada de lodash
_.assign()
):Object.keys()
es un método relativamente nuevo, sobre todo: no está disponible en IE <9. Lo mismo ocurre con el.forEach()
método de matriz, que utilicé en lugar delfor
bucle regular .Afortunadamente, hay es5-shim disponible para estos navegadores antiguos, que rellenará muchas funciones de ES5 (incluidas esas dos).
(Estoy a favor de los polyfills en lugar de evitar el uso de nuevas y geniales funciones de lenguaje).
fuente
Necro'ing para que las personas puedan encontrar un método de copia profunda con hasOwnProperty y verificación de objeto real:
fuente
'[object Array]'
Se puede usar Object.assign para combinar objetos. Combinará y anulará la propiedad común de derecha a izquierda, es decir, la misma propiedad en la izquierda será anulada por la derecha.
Y es importante suministrar un objeto vacío en el primero para evitar la mutación de los objetos fuente. Los objetos de origen deben dejarse limpios ya que
Object.assign()
por sí solo devuelve un nuevo objeto.¡Espero que esto ayude!
fuente
Mejora de la idea kingPuppy y la idea OP (copia superficial): solo agrego 3 puntos al "ejemplo" OP :)
Mostrar fragmento de código
fuente
Esto debería funcionar, probado aquí .
Nota : esto no copiará los métodos de la
firstObject
Nota 2 : para usar en navegadores antiguos, necesitará un analizador json.
Nota 3 : la asignación por referencia es una opción viable, especialmente si
firstObject
contiene métodos. Ajustó el ejemplo jsfiddle dado en consecuenciafuente
Desafortunadamente, no puede poner una referencia a una variable en un objeto como ese. Sin embargo, puede realizar una función que copie los valores del objeto en otro objeto.
fuente
Si desea tomar solo las propiedades que existen en el segundo objeto, puede usar
Object.keys
para tomar las propiedades del primer objeto, puede hacer dos métodos:A.)
map
para asignar las propiedades del primer objeto al segundo objeto usando efectos secundarios:B.) o
reduce
para crear un nuevo objeto y asignarlo al segundo objeto. Tenga en cuenta que este método reemplaza otras propiedades que el segundo objeto podría tener antes de las que no coincidían con el primer objeto:fuente
Use la notación de propagación de propiedad. Se agregó en ES2018 (la distribución para matrices / iterables era anterior, ES2015), {... firstObject} extiende todas las propiedades enumerables como propiedades discretas.
fuente
Prefiero usar firstObject como prototipo de secondObject y agregar el descriptor de propiedad:
Ciertamente no es una línea, pero te da más control. Si está interesado en los descriptores de propiedades, le sugiero que lea este artículo: http://patrickdelancy.com/2012/09/property-descriptors-in-javascript/#comment-2062 y la página MDN https: //developer.mozilla. org / es-es / docs / Web / JavaScript / Reference / Global_Objects / Object / create
También puede simplemente asignar valores y omitir los descriptores y hacerlo un poco más corto:
Compatibilidad: ECMAScript 5, entonces IE9 +
fuente
El uso del siguiente método copiará las propiedades
Soy muy nuevo en javascript, pero encontré que esto funciona. Un poco demasiado largo, supongo, pero funciona.
fuente