? Наконец-то оно вышло! Больше не нужно писать уродливый код для группировки массива объектов по определенному значению поля!
С конца 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
Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.
Copyright© 2022 湘ICP备2022001581号-3