Неочевидно, но факт: 5 способов использовать метод reduce в JS
Метод Reduce сворачивает массив к одному значению. Рассказываем, какие есть неочевидные способы использовать reduce на JavaScript.
Современный стандарт JavaScript предоставляет множество методов для «умного» перебора массивов. Среди наиболее популярных — forEach, for или for…of. Если же необходимо перебрать массив и вернуть данные для каждого элемента, подойдёт map.
В случае, когда нужно пройтись по массиву и, например, суммировать все значения, найти среднее или произвести какие-либо промежуточные действия, лучше использовать метод reduce.
В каких сценариях его можно применять — в этой статье.
Reduce сворачивает массив к одному значению (редуцирует). Этим значением может быть любой тип данных — как примитивный, так и составной, например, массив.
Метод принимает два аргумента:
- callback-функцию, выполняемую для запуска каждого элемента в массиве,
- начальное значение initialValue.
Callback также принимает два аргумента: accumulator, который возвращает функция callback после посещения очередного элемента, и текущий элемент в цикле currentValue.
Рассмотрим несколько неочевидных применений метода reduce, которые помогут придерживаться принципа write less, do more.
Минимальное и максимальное значение в массиве
Для того, чтобы найти минимальное и максимальное значение, можно использовать Math API, например:
Но при использовании больших массивов (~10^7) можно столкнуться с ошибками. Исключить эти проблемы и при этом получить нужный результат можно с помощью метода reduce.
Может потребоваться разобрать в URL адресе GET параметры и сложить их в объект.
Но с использованием метода reduce все становится понятнее и предсказуемее:
Вот как это работает:
1. Получаем search параметры из URL — https://somedomain.dev?name=hello&title=world
2. Удаляем лишние символы
3. Используем reduce, чтобы собрать параметры в объект
Десериализация параметров
В этом примере ситуация противоположная. Если нужно к ссылке добавить набор параметров, то использовать конкатенацию (склеивание строк) не очень удобно, особенно если таких параметров десятки или сотни. Из-за этого сильно падает читаемость кода, размер строки растёт с каждыми новым параметром, что создает сложности для дальнейшей поддержки.
Поправить ситуацию можно с помощью метода reduce. Для начала пишем функцию:
Далее берем объект из ранее описанного примера и применим ее:
Теперь можно не переживать за то, что при изменении объекта последующий код не будет работать корректно.
Выбор уникальных элементов массива
Тут все просто: идем по массиву и ищем, есть ли уже в нем такое значение. Если нет, добавляем его, а если есть — идем дальше. Таким образом, на выходе будет массив только уникальных значений.
Определение количества одинаковых элементов массива
Чтобы получить количество каждого элемента в массиве, дополнительно используем Map — это коллекция ключ-значение, как и Object.
Основное отличие в том, что в Map мы сможем работать с массивом, в котором используются значения разных типов (числа/строки).
Получение нескольких свойств объекта
Подобный сценарий довольно часто возникает в повседневной работе. Давайте посмотрим пример.
У нас есть объект с множеством свойств:
Мы хотим получить некоторые свойства предыдущего объекта и создать новый:
Кажется, так делать не очень эффективно, не правда ли?
Напишем небольшой хелпер, который упростит нам решение проблемы:
Ну и, конечно, проверим, как все это работает:
Это лишь часть возможных сценариев применения метода в повседневных задачах. Надеюсь, вы нашли для себя что-то интересное.
Благодарю за внимание и happy coding!
20К открытий21К показов