LabEx
ВходРегистрация

Объединение объектов JavaScript с использованием reduce и concat

Beginner

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

Введение

В этом лабе мы будем изучать процесс объединения объектов в JavaScript. Лабка проведет вас по шагам создания нового объекта путем объединения двух или более объектов. Вы научитесь использовать Array.prototype.reduce() и Object.keys() для перебора по объектам и ключам, а также Object.prototype.hasOwnProperty() и Array.prototype.concat() для объединения значений для существующих ключей.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

Функция объединения объектов

Для объединения двух или более объектов следуйте шагам:

  1. Откройте Терминал/SSH и введите node, чтобы начать программирование.
  2. Используйте Array.prototype.reduce() вместе с Object.keys() для перебора по всем объектам и ключам.
  3. Используйте Object.prototype.hasOwnProperty() и Array.prototype.concat() для добавления значений для ключей, которые есть в нескольких объектах.
  4. Используйте заданный фрагмент кода для создания нового объекта из объединения двух или более объектов.
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;
      }, {}),
    {}
  );

Например, рассмотрите следующие объекты:

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

Когда вы объединяете эти два объекта с использованием функции merge(), вы получаете следующий результат:

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

Резюме

Поздравляем! Вы завершили лабу по объединению объектов. Вы можете практиковаться в более многих лабах в LabEx, чтобы улучшить свои навыки.