Операторы списков в JS OTUS
2026-03-10 15:17 Diff
https://otus.ru/journal/operatory-spiskov-v-js/oj-1080x720-8-16/

Функциональное программирование становится все более популярным. Такая парадигма поддерживается достаточно известным и распространенным языком – JavaScript. Нужен JS для того, чтобы создавать веб-приложения, а также иное программное обеспечение, базирующееся на скриптах. В основном применяется для интернет-разработки.

Функциональное программирование имеет одну особенность – использование списков, а также разнообразных операторов для работы с ними. Говоря проще – массивы вещей и возможность взаимодействия с ними.

В данной статье будут рассмотрены ключевые операторы списков в JavaScript. Они помогут быстрее создавать функциональные коды, получая на выходе достаточно мощные утилиты. А еще – позволят избавиться от постоянного применения цикла for.

Оператор Map

При создании ПО приходится достаточно часто модифицировать каждый элемент имеющегося массива при помощи одних и тех же подходов. Типичные примеры – возведение каждого компонента массива чисел в квадрат, получение имен из списка пользователей, обработка строк регулярными выражениями.

Map – встроенный метод JS, который используется для соответствующих задач. Он определен в Array.prototype. Его можно вызвать на любом массиве, а затем передать коллбек в виде первого аргумента.

При вызове map для массива, callback выполняется для каждого его элемента. После – возвращается новый массив со значениями, которые обработаны каллбеком.

Данная функция (оператор) передает три аргумента:

  • текущий элемент массива;
  • индекс;
  • весь массив, для которого был вызван изначально map.

Лучше разобраться с этими моментами JavaScript помогут наглядные примеры.

Практическое применение

Надо сделать программу, которая имеет массив с задачами для выполнения на день. Каждый task – это объект. Он имеет свои собственные свойства name и duration. В редакторе фрагмент кода выглядит так:

Теперь требуется создать новый массив только с «именем» для каждого «таска». Этот прием позволяет посмотреть на все задачи, выполненные за день. Необходимо использовать цикл for. Тогда код будет выглядеть так:

В JS есть цикл forEach. Он работает так же, как и for, но в нем не требуется проводить сравнение индекса элемента с длиной массива. Процессы проводятся автоматически:

Если же нужно использовать «метод» map, код получит следующее представление:

Здесь добавлены параметры index и array. Это поможет не забыть о том, что ими можно пользоваться при необходимости. А вот – реализация на MDN:

Перед тем, как его протестировать, нужно инициализировать task. Отлично работает с mdn MozillaFirefox.

Разница между подходами

Программист может использовать любой метод из предложенных. Главное – понимать разницу между ними:

  1. Map нужен для того, чтобы избавиться от состояния цикла for.
  2. Позволяет взаимодействовать с компонентами массива напрямую. Индексировать его не придется.
  3. Не придется создавать массив пустой и добавлять в него компоненты. Map вернет конечный результат за один подход. Останется добавить возвращаемое значение новой переменной.
  4. Нужно не забывать добавлять return коллбеку. Если им пренебречь, на выходе получится новый массив, который заполнен undefined.

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

  1. ForEach возвращает undefined. Его не получится связать с другими методами массива. Map от этого недостатка уберегает.
  2. Функция (оператор) Map поможет вернуть массив с конечным результатом. Корректировать «набор данных» внутри цикла больше нет необходимости.

Все это приводит к тому, что функциональный код становится максимально емким, понятным и простым. Это – верный путь к реактивной разработке.

О трудностях

В коллбеке, передаваемом оператору, должен быть явный return. В противном случае функция вернет массив, который принимает компоненты типа undefined.

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

Метод Filter

Основные methods для работы со списками в функциональном программировании на JS предусматривают метод Filter. Он отвечает за фильтрацию массива. Отсеивает ненужные компоненты.

Определяется в array prototype. Method доступен для любого массива. Начальное значение (аргумент) – каллбек. Работает так:

  1. Filter вызывает callback для каждого компонента «множества данных».
  2. Проводится обработка информации.
  3. Возвращается новый массив, который содержит только компоненты, для которых callback вернул значение «истина».

Передает при работе три аргумента: текущий компонент, индекс и весь массив.

Проблемы реализации

Каждый раз, когда разработчик использует Filter, он должен помнить, что:

  1. Обязательно использовать return. Это нужно для того, чтобы убедиться в возврате булевого значения.
  2. Если забыть о return, коллбек вернет undefined. Результат метода всегда будет «ложью».
  3. Если возвращается что-то, что отличается от «истины» и «лжи», система использует правила приведения JS. Это помогает понять, чего хочет добиться разработчик. Это часто влечет ошибки.

Запомнив эти простые правила и принципы того, как работает Filter, программист сможет эффективно использовать его в функциональном программировании.

Метод reduce

Reduce – метод массива, позволяющий превращать «множество данных» в любое другое значение при помощи переданной функции коллбека и начального значения. Используется тогда, когда есть массив чисел, которые необходимо сложить.

Reduce – к первому значению прибавляет второе, потом к результату – третье и так далее. Это – аналог «суммы» (sum). Определяется в array prototype. Доступен для любого массива. Коллбек передается в виде первого аргумента. Дополнительно можно передать второй аргумент – значение, индекс с которого предусматривает сложение.

Имеет четыре arg:

  • текущее значение (acc);
  • предыдущее значение (item);
  • нынешний индекс (index);
  • массив, для которого вызывается reduce (arr).

Callback будет иметь доступ к предыдущим «параметрам» на каждой очередной итерации. На первом «проходе» его нет. Именно поэтому reduce требует передачи начального «параметра» на усмотрение пользователя. В противном случае предыдущее окажется 0. Reduce в JavaScript возвращает один arr (arg), а не все «множество» из одной составляющей.

Наглядный пример

Соответствующий метод встречается на практике чаще остальных. Поэтому его стоит рассмотреть более подробно. Вот – пример кода:

Так будет выглядеть reduce на практике.

Особенности написания

Reduce принимает два параметра object – функцию-коллбек и начальный arr-параметр для аккумулятора.

Операция обязательно возвращает тот или иной результат. Связно это с тем, что при следующей итерации в acc object отобразится результат, который вернулся на предыдущем этапе. На начале обработки первый элемент – это «параметр», который передается вторым из arr в метод reduce.

«Точку старта» для аккумулятора можно не указывать явно. Для этого случае первый компонент в arr встречается на первой итерации:

В этом example:

  1. Acc на первом проходе – это «единица», val – 2.
  2. К полученному результату objects прибавляется 3.
  3. Осуществляется возврат результата через reduce.

Есть и краевой example. Если arr пуст, JS выдаст соответствующую ошибку с сообщением «Reduce of empty arrays with no initial value. Ситуация требует отдельной обработки. Example – обернуть reduce в try…catch. Но лучше всегда задавать function «изначальный параметр».

Применение на практике

Reduce – это object (функция), которая широко распространена в функциональном программировании. Особенно на JS. Далее будут рассмотрены ситуации, при которых нужен соответствующий метод. Все это поможет лучше разобраться в принципах его работы.

ES5 версия

При работе с node и mdn код может выглядеть громоздко. Часто программисты начинают с ES5. Элементарный код будет выглядеть так:

Остальные примеры – это ES6. Его синтаксис более краткий и оставляет меньше пространства для возникновения тех или иных ошибок.

Среднее число

In order требуется не просто вывести сумму, а разделить ее на длину arr перед тем, как отображать итог. Для этого можно задействовать index. Он покажет, сколько раз редюсер прошел по «множеству».

Последний «параметр» — это и его сам arr. Выше – пример обнаружения среднего заданных объектов.

Учет данных

А вот order, который помогает вести учет информации через reduce. Он помогает if есть коллекция информации, но требуется узнать, сколько типов каждого компонента содержится во множестве:

Чтобы посчитать каждый объект в arr, требуется сначала задать пустой object, а не все множество. Далее действовать необходимо следующим образом:

  1. Сохранить пару ключ-значение в total: .
  2. Выдать имя первому ключу. Это – первый параметр.
  3. Присваиваемое значение – «единица». Такой подход позволяет получить объект, где все названия фруктов – это ключи. Каждый имеет значение 1.
  4. Увеличение length (параметра каждого «фрукта») необходимо, если происходит повторение.
  5. На втором цикле требуется проверить, есть ли в total ключ с соответствующей «пищей». Если нет – создать ключ. В противном случае – увеличить на +1: .

Теперь можно запустить программу и посмотреть, что вышло. Пример – через node.

Соединение воедино

Reduce помогает сливать друг с другом вложенные значения. Они in order обретают форму единого arr (множества). Выглядит это так:

  1. Сначала нужно выставить изначальное значение на пустое множество. Далее – конкатенировать его с total: .
  2. Для более сложной ситуации – получить все цвета с переменной data, которая находится ниже: .
  3. Пройтись по каждому объекту (push) и взять оттуда нужные цвета. Для этого на помощь придет reduce. Но можно воспользоваться forEach и использовать amount.c. При каждой итерации здесь происходит добавление вложенного arr в total: .
  4. Если нужно только уникальные «параметры», требуется провести проверку на него в total. Делается это перед тем, как отправить соответствующий компонент в arr: .

Это – основы работы со списками и уникальными функциями JS. Освоить их сможет как новичок, так и продвинутый разработчик. Наглядные примеры помогут не запутаться и лучше разобраться в выбранном направлении.

Курсы для быстрого освоения

Чтобы лучше изучить метод reduce в JavaScript, а также выяснить, что такое node и функциональное программирование, подойдут специализированные компьютерные курсы. Они намного лучше самообразования.

Рассчитаны программы на срок от нескольких месяцев до года. Пользователи могут выбрать одно или пару направлений одновременно. Каждому гарантировано кураторство опытными специалистами, интересные домашние задания и практика с формированием портфолио. При успешном завершении курсов пользователь получит сертификат, подтверждающий навыки и умения в выбранной области.