Основная структура данных в JavaScript, массивы требуют манипуляций в меньшей и большей степени для доступа к определенным данным. Мы манипулируем массивами, используя функции массива, такие как .map(), .filter(), .reduce(), и т. д., чтобы точно настроить наши возвращается; мы можем выполнять одну из этих функций изолированно, но нам часто требуется что-то более сложное, когда мы обращаемся к более сложному API. Цепочка функций массива относится к технике вызова нескольких функций массива, одна за другой в одном массиве, и возврата результата после каждой функции. Этот метод делает ваш код более кратким и читаемым, а также позволяет выполнять несколько операций с массивом в одной строке кода. В этом сообщении блога мы рассмотрим, как связать функции массива в цепочку и почему это полезно иметь в своем наборе инструментов.

Для начала на простом примере создадим массив чисел. Затем мы создадим результат, равный цепочке функций массива, которые манипулируют массивом чисел, чтобы возвращать четные числа в порядке возрастания. Мы будем использовать .sort() и .filter(). Вот изображение того, как выглядит точный код:

После инициализации наших констант и создания функций массива мы записываем результаты в консоль. Возвращается массив чисел [2, 4]. Как мы здесь оказались?

  1. Мы создали массив чисел.
  2. Мы устанавливаем наш результат равным массиву чисел с помощью функции .sort(), которая сортирует данные на основе логики, определяющей порядок возрастания (преобразует [5, 3, 2, 4, 1] в [ 1, 2, 3, 4, 5]).
  3. Затем мы отфильтровали новый массив восходящих чисел, чтобы извлечь и вернуть четные числа, используя функцию .filter().
  4. Мы зарегистрировали результат и обнаружили, что вернули 2 и 4, что соответствует предоставленной нами логике.

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

Используя общедоступный API от Teleport, мы выполняем следующие шаги для доступа к пользовательской конечной точке, которая возвращает количество ясных и дождливых дней, высокие и низкие температуры и тип погоды для городской зоны.

Первая функция, .filter(), используется для выбора только тех данных из массива категорий, которые соответствуют определенному условию. В этом случае условие состоит в том, что свойство id каждого объекта category должно быть равно строке 'CLIMATE'. Метод .filter() возвращает новый массив со всеми элементами, прошедшими проверку, реализованную предоставленной функцией, из которых есть только один (другие категории, включая данные о населении, данные о преступности и т. д.). .

Результатом первого вызова .filter() является массив объектов, каждый из которых представляет одну категорию климатических данных. Затем мы используем функцию .map() для извлечения только свойства data каждого из этих объектов. Функция .map() возвращает новый массив значений, полученный в результате применения функции к каждому элементу исходного массива. В этом случае функция возвращает свойство data каждого объекта в массиве отфильтрованных категорий. На данный момент у нас есть массив всех доступных нам климатических данных.

Последним шагом является повторное использование метода .filter() для результирующего массива данных. На этот раз вы фильтруете точки данных на основе их свойства id. Метод .filter() возвращает только точки данных с идентификатором, включенным в предоставленный список значений: 'WEATHER-AV-NUMBER-CLEAR-DAYS', 'WEATHER-AV-NUMBER-RAINY-DAYS','WEATHER-AVERAGE-HIGH', 'WEATHER-AVERAGE-LOW', 'WEATHER-TYPE'. На этом этапе этот фильтр будет включать только сопоставленные данные в категории КЛИМАТ, которые соответствуют пяти предоставленным значениям. Мы намеренно опускаем некоторые менее важные данные, такие как плавающее значение для соотношения количества дождливых и засушливых дней, чтобы мы могли включить некоторые из наиболее широко понимаемых климатических точек.

Конечным результатом этих связанных функций массива является новый массив, содержащий только точки климатических данных с указанными значениями id. Строка кода [0] в конце используется для доступа к первому элементу конечного массива, который содержит только указанные климатические данные.

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

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

Спасибо за ваше время, и среди того, что я упомянул выше, цепочка функций массива предлагает следующие дополнительные преимущества:

  1. Краткий код. Объединение функций массива в цепочку делает ваш код более кратким и удобным для чтения. Он позволяет выполнять несколько операций над массивом в одной строке кода, уменьшая потребность в нескольких переменных и промежуточных шагах.
  2. Улучшенная удобочитаемость. Сцепленные функции массива упрощают понимание операций, выполняемых над массивом. Код читается как предложение и ясно дает понять, что делает каждый шаг в процессе.
  3. Улучшенная организация. Объединение функций массива в цепочку позволяет организовать код в более мелкие повторно используемые функции. Это упрощает поддержку и модификацию вашего кода в будущем.
  4. Возможность повторного использования. Сцепленные функции массива можно повторно использовать в разных частях кода, что упрощает предотвращение дублирования кода и повышает удобство сопровождения кода.
  5. Улучшенная обработка ошибок. Объединение функций массива в цепочку позволяет более организованно и эффективно обрабатывать ошибки. Вы можете использовать блоки try-catch для обработки ошибок на каждом этапе цепочки, что упрощает выявление и исправление ошибок.