LabEx
EntrarÚnete

Combinar objetos de JavaScript con Reduce y Concat

Beginner

This tutorial is from open-source community. Access the source code

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.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Función de fusión de objetos

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

  1. Abre la Terminal/SSH y escribe node para comenzar a codificar.
  2. Utiliza Array.prototype.reduce() junto con Object.keys() para iterar sobre todos los objetos y claves.
  3. Utiliza Object.prototype.hasOwnProperty() y Array.prototype.concat() para adjuntar valores para las claves existentes en múltiples objetos.
  4. 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.