«Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты» — Конфуций, «Аналитики Конфуция. Лу Лингун»
титульная страница > программирование > #LearnedToday: Object.groupBy()

#LearnedToday: Object.groupBy()

Опубликовано 1 ноября 2024 г.
Просматривать:334

#LearnedToday: Object.groupBy()

? Наконец-то оно вышло! Больше не нужно писать уродливый код для группировки массива объектов по определенному значению поля!

С конца 2023 года существует официальный статический метод для Object под названием groupBy(), который делает это за нас!
Он принимает Iterable, например Array, и функцию, которая выполняется для каждого элемента и должна возвращать «категорию» этого конкретного элемента.
Метод возвращает новый объект, где каждый ключ представляет собой отдельную категорию, содержащую массив объектов, принадлежащих этой конкретной категории.

ПРИМЕЧАНИЕ. Элементы в возвращаемом объекте и исходной итерации одинаковы (не глубокие копии!). Изменение внутренней структуры элементов будет отражено как в исходной итерации, так и в возвращаемом объекте.

Пример

Давайте приведем практический пример, чтобы увидеть, как легко сгруппировать всех персонажей Черепашек Ниндзя по возрасту.

Начальный массив

const ninjaTurtlesCharacters = [
  { age: 16, name: 'Michelangelo' },
  { age: 16, name: 'Raffaello' },
  { age: 16, name: 'Donatello' },
  { age: 16, name: 'Leonardo' },
  { age: 91, name: 'Splinter' },
  { age: 25, name: 'Casey Jones' },
  { age: 25, name: 'April O\'Neil' }
];

Старый добрый способ (с сокращением)

const ninjaTurtlesCharactersByAge = ninjaTurtlesCharacters.reduce(
  (groupedPeople, item) => ({
    ...groupedPeople,
    [item.age]: groupedPeople[item.age]
      ? [...groupedPeople[item.age], item]
      : [item],
  }),
  {}
);

СОВРЕМЕННЫЙ путь

const ninjaTurtlesCharactersByAgeNew = Object.groupBy(
  ninjaTurtlesCharacters,
  ({ age }) => age
);

Совет: используйте Map.groupBy(), если вы хотите вернуть карту вместо объекта

Результат

{
  "16": [
    { age: 16, name: 'Michelangelo' },
    { age: 16, name: 'Raffaello' },
    { age: 16, name: 'Donatello' },
    { age: 16, name: 'Leonardo' }
  ],
  "25": [
    { age: 25, name: 'Casey Jones' },
    { age: 25, name: 'April O\'Neil' }
  ],
  "91": [
    { age: 91, name: 'Splinter' }
  ]
}

Демо

??‍? Как обычно, я создал простой проект Stackblitz, чтобы поиграться с кодом.

? Документы: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy

ℹ Поддержка браузера: https://caniuse.com/mdn-javascript_builtins_object_groupby

Заявление о выпуске Эта статья воспроизведена по адресу: https://dev.to/danielzotti/learnedtoday-objectgroupby-4kl9?1. В случае нарушения авторских прав свяжитесь с [email protected], чтобы удалить ее.
Последний учебник Более>

Изучайте китайский

Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.

Copyright© 2022 湘ICP备2022001581号-3