Combinación de objetos de JavaScript | Tutorial de programación

Introducción

En este laboratorio, exploraremos el proceso de fusionar objetos en JavaScript. El laboratorio te guiará por los pasos para crear un nuevo objeto combinando dos o más objetos. Aprenderás a usar Array.prototype.reduce() y Object.keys() para iterar sobre objetos y claves, y Object.prototype.hasOwnProperty() y Array.prototype.concat() para fusionar valores para las claves existentes.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28495{{"Combinar objetos de JavaScript con Reduce y Concat"}} javascript/data_types -.-> lab-28495{{"Combinar objetos de JavaScript con Reduce y Concat"}} javascript/arith_ops -.-> lab-28495{{"Combinar objetos de JavaScript con Reduce y Concat"}} javascript/comp_ops -.-> lab-28495{{"Combinar objetos de JavaScript con Reduce y Concat"}} javascript/array_methods -.-> lab-28495{{"Combinar objetos de JavaScript con Reduce y Concat"}} javascript/higher_funcs -.-> lab-28495{{"Combinar objetos de JavaScript con Reduce y Concat"}} javascript/destr_assign -.-> lab-28495{{"Combinar objetos de JavaScript con Reduce y Concat"}} javascript/spread_rest -.-> lab-28495{{"Combinar objetos de JavaScript con Reduce y Concat"}} end

Función de fusión de objetos

Para fusionar dos o más objetos, sigue los pasos siguientes:

Abre la Terminal/SSH y escribe node para comenzar a codificar.
Utiliza Array.prototype.reduce() junto con Object.keys() para iterar sobre todos los objetos y claves.
Utiliza Object.prototype.hasOwnProperty() y Array.prototype.concat() para adjuntar valores para las claves existentes en múltiples objetos.
Utiliza el fragmento de código dado para crear un nuevo objeto a partir de la combinación de dos o más objetos.

const merge = (...objs) =>
  [...objs].reduce(
    (acc, obj) =>
      Object.keys(obj).reduce((a, k) => {
        acc[k] = acc.hasOwnProperty(k)
          ? [].concat(acc[k]).concat(obj[k])
          : obj[k];
        return acc;
      }, {}),
    {}
  );

Por ejemplo, considera los siguientes objetos:

const object = {
  a: [{ x: 2 }, { y: 4 }],
  b: 1
};
const other = {
  a: { z: 3 },
  b: [2, 3],
  c: "foo"
};

Cuando fusionas estos dos objetos utilizando la función merge(), obtienes el siguiente resultado:

merge(object, other);
// { a: [ { x: 2 }, { y: 4 }, { z: 3 } ], b: [ 1, 2, 3 ], c: 'foo' }

Resumen

¡Felicitaciones! Has completado el laboratorio de fusión de objetos. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.