Объединить массивы объектов

JavaScriptJavaScriptBeginner
Практиковаться сейчас

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

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

В этом практическом занятии мы будем работать над задачей на программирование на JavaScript, которая заключается в объединении двух массивов объектов на основе заданного свойства. Цель этого упражнения - помочь вам закрепить навыки использования метода Array.prototype.reduce() и манипуляций с объектами в JavaScript, которые являются важными навыками для любого разработчика, работающего с JavaScript. В конце этого практического занятия вы должны быть в состоянии无缝но объединить два массива объектов на основе свойства, чтобы создать новый массив.

Функция для объединения массивов объектов на основе заданного ключа

Чтобы объединить два массива объектов на основе определенного ключа, следуйте этим шагам:

  1. Откройте Терминал/SSH и введите node, чтобы начать практиковать программирование.
  2. Используйте Array.prototype.reduce() с объектом аккумулятором, чтобы объединить все объекты в обоих массивах на основе заданного prop.
  3. Используйте Object.values(), чтобы преобразовать полученный объект в массив и вернуть его.

Вот функция, которую можно использовать:

const combine = (a, b, prop) =>
  Object.values(
    [...a, ...b].reduce((acc, v) => {
      if (v[prop])
        acc[v[prop]] = acc[v[prop]] ? { ...acc[v[prop]], ...v } : { ...v };
      return acc;
    }, {})
  );

Вот пример использования этой функции:

const x = [
  { id: 1, name: "John" },
  { id: 2, name: "Maria" }
];
const y = [{ id: 1, age: 28 }, { id: 3, age: 26 }, { age: 3 }];
combine(x, y, "id");
// [
//  { id: 1, name: 'John', age: 28 },
//  { id: 2, name: 'Maria' },
//  { id: 3, age: 26 }
// ]

Резюме

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