Вы можете использовать его для решения любой проблемы, связанной с данными

С помощью ES6 Javascript и более поздних версий теперь вы можете сопоставить, фильтровать, уменьшить, сортировать, сгладить и многое другое по массиву. Думать очень просто, лаконично и элегантно.

Но иногда самым большим неизвестным в этом списке является уменьшить.

Возможно, вы еще не осознавали мощь этого метода, давайте взглянем.

Возможно, вы воображаете, что единственный способ «уменьшить» массив - это превратить его во что-то «меньшее», например, число или строку. Например:

  • Если у меня есть массив [1, 2, 3], я могу уменьшить его, суммируя его члены, поэтому 1 + 2 + 3 = 6, или умножая их, поэтому 1 * 2 * 3 = 6, или просто объедините числа как символы, чтобы получилась строка «123».

Но на самом деле reduce - это очень мощный инструмент, который может выполнить любое преобразование данных. Вы можете перейти от Array к Array, Array к Number, Array к Объект, Объект в Массив или вообще все, что вы можете вообразить.

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

Итак, сейчас мы рассмотрим несколько примеров кода, давайте перейдем к ним!

Пример набора 1: сумма, сумма-произведение и макс.

Эти примеры представляют «традиционный способ» мышления о сокращении. Фактически вы сокращаете массив до числа в каждом из этих примеров:

И консоль говорит:

Итак, краткое объяснение каждого примера:

  • Сумма: начните с 0, возьмите каждый элемент и просуммируйте его до накопленного значения.
  • SumProduct: начните с 0, возьмите каждую пару (число и множитель) и число * множитель суммы в накопленное значение.
  • MaxNumber: начните с нуля и верните первый элемент, если ничего не накопилось, в противном случае верните число, если оно больше накопленного, или накопленное значение, если нет.

Пример набора 2: карта, фильтр, фильтр и карта и FlatMap

Теперь мы делаем еще один шаг и фактически реализуем классические функции map, filter, filter, а затем map (также возможен другой порядок) и flatMap. Все они на самом деле являются подмножеством reduce («трансформации»).

И консоль говорит:

Краткое объяснение каждого примера:

  • Карта: начните с пустого массива, возьмите массив и функцию и верните накопленное значение плюс текущий элемент с примененной к нему функцией.
  • Фильтр: начните с пустого массива, оцените функцию для текущего элемента и, если false, просто верните накопленное значение (так что пропустите этот элемент), а в противном случае верните значение. накоплено плюс текущий элемент.
  • FilterMap: возьмите массив, функцию для использования в качестве фильтра и функцию для сопоставления и объедините два предыдущих процесса.
  • FlatMap: начните с пустого массива, возьмите массив и функцию, и, если сам элемент является массивом, распределите результат по накопленному значению, в противном случае просто верните накопленное значение плюс текущий элемент с функция, примененная к нему.

Пример набора 3: уникальный, сортировка и обратное

Это также очень полезные функции, которые можно реализовать с помощью reduce. Большим преимуществом перед собственными функциями, предоставляемыми Array.Prototype, является то, что вы можете комбинировать более одного преобразования за один шаг, если хотите ... Но на самом деле цель этих примеров - просто показать вам большая мощность функции уменьшения:

И консоль говорит:

Краткое объяснение каждого примера:

  • Уникальный: начните с пустого массива, возьмите элемент и проверьте, присутствует ли он уже в накопленном значении. Если присутствует, просто верните накопленное значение (так что пропустите его), в противном случае верните накопленное значение плюс элемент.
  • Сортировка: начните с пустого массива и разделите накопленное значение на 2 набора: набор элементов «меньше или равно текущему значению» и набор элементов «больше текущего значения». Итак, после этого просто верните оба набора с текущим элементом «посередине».
  • Обратное: с ES6 все довольно просто. Просто верните значение и добавьте накопленное значение, чтобы последний элемент каждой итерации всегда был в первой позиции массива.

Пример набора 4: объект в массив и массив в объект

Если синоним сокращения «преобразование» не был ясен, с этого момента действительно очевидно. Иногда вам нужно преобразовать массив в объект или наоборот. Какую функцию вы можете использовать? Да! Уменьшать!

И консоль говорит:

Краткое объяснение каждого примера:

  • Объект в массив: начните с пустого массива и перебирайте ключи объекта (который также является массивом). Для каждого ключа возьмите также значение (object [key]) и верните накопленное значение плюс объект {key: value}. Возможно, этот пример не выглядит очень полезным, но он полезен, если вы представляете, что рендерируете список с помощью React, и удобно иметь информацию об объекте в виде массива.
  • Из массива в объект: начните с пустого объекта и перебирайте массив, чтобы вернуть объект с полем id в качестве поля первого уровня объекта, а остальные поля в качестве его содержание. Это иногда полезно, когда вам нужно сгруппировать более одного массива, который содержит информацию об объекте (представленном идентификатором), и вернуть все в одном объекте для дальнейшей обработки.

Таким образом, функцию сокращения можно рассматривать больше как процесс, более традиционным способом: INPUT = ›PROCESS =› OUTPUT

Бонус 1: Фактически уменьшайте как увеличение!

Учитывая, что вам не нужно иметь в результате одно число, один и тот же примитив или даже такое же количество элементов ввода, вы можете использовать reduce, чтобы фактически добавлять новые элементы к вашим входным данным.

Это реальный пример (упрощенный), где у вас есть список элементов, которые категоризированы определенным образом, и вы хотите представить их, но вставив заголовок, указывающий категорию.

Например:

И консоль говорит:

Итак, вы «создаете» новый список, комбинируя его с различными примитивами данных. И, конечно, нет предела. Это может быть произвольное количество сущностей, которые можно объединить в единый список, готовый для передачи в DOM для рендеринга.

Бонус 2: использование reduce для обработки цепочки обещаний (последовательно)

Еще одно использование reduce, которое я нашел очень полезным, - это обеспечение последовательности. Когда вы обрабатываете цепочку обещаний, обычно вам понадобится результат предыдущего обещания для использования в качестве входных данных для следующего обещания и так далее.

Сокращение на помощь!

И консоль говорит:

И мы можем остановиться здесь.

Все примеры находятся в этой JS Fiddle

Я надеюсь, что теперь у вас появилось больше идей по использованию reduce для создания читаемого и элегантного кода в ваших проектах!

Поздравления из Чили «» !!