Группировка элементов по количеству

Введение

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

Как сгруппировать и подсчитать элементы в массиве с использованием JavaScript

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

1. Откройте Терминал/SSH и введите node, чтобы начать практиковать программирование.
2. Используйте метод Array.prototype.map(), чтобы сопоставить значения массива с именем функции или свойства.
3. Используйте метод Array.prototype.reduce(), чтобы создать объект, где ключи формируются из сопоставленных результатов.
4. Создайте функцию под названием countBy, которая принимает массив и функцию в качестве аргументов.
5. Внутри функции countBy используйте тернарный оператор, чтобы проверить, является ли переданный аргумент функцией или именем свойства. Если это функция, используйте ее в качестве функции сопоставления. Если это имя свойства, получите это свойство элементов массива.
6. Используйте метод reduce(), чтобы создать объект, где каждый ключ представляет собой уникальный элемент в массиве, а его значение - это количество раз, которое он встречается в массиве.

Вот код:

const countBy = (arr, fn) =>
  arr
    .map(typeof fn === "function" ? fn : (val) => val[fn])
    .reduce((acc, val) => {
      acc[val] = (acc[val] || 0) + 1;
      return acc;
    }, {});

Вы можете протестировать функцию countBy с помощью следующих примеров:

countBy([6.1, 4.2, 6.3], Math.floor); // {4: 1, 6: 2}
countBy(["one", "two", "three"], "length"); // {3: 2, 5: 1}
countBy([{ count: 5 }, { count: 10 }, { count: 5 }], (x) => x.count); // {5: 2, 10: 1}

Резюме

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