Как использовать уменьшить в JavaScript

Автор оригинала: Zell Liew.

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

const callback = (accumulator, currentValue, index) => {
  // return something here
}
const result = array.reduce(callback, initialValue)

• InitivalValue это значение, с которого вы хотите начать.
• Аккумулятор это значение, возвращенное из предыдущей итерации. Это будет InitivalValue для первой итерации.
• CurrentValue это элемент массива в текущей итерации.

Давайте пройдемся через несколько примеров.

Суммирующие номера

Допустим, у вас есть список номеров. Вы хотите найти общую сумму этих чисел.

const numbers = [1, 2, 3, 4, 5]

Вот код для суммирования чисел.

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

Давайте пройдем, что произойдет, шаг за шагом.

Во-первых, вы проходите InitivalValue к Уменьшить Отказ Это InitivalValue должно быть 0, потому что:

1. Мы хотим Аккумулятор быть рядом.

2. Мы не хотим InitivalValue повлиять на сумму.

   Начальное значение установлено на 0

Аккумулятор будет InitivalValue в первой итерации. CurrentValue будет первый элемент массива.

Аккумулятор назначает как 0 quotevalue – первый элемент в массиве

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

Следующее возвращаемое значение рассчитывается

Аккумулятор принимает возвращенное значение во второй итерации. CurrentValue будет второй элемент массива.

Предыдущее возвращаемое значение используется в качестве следующего аккумулятора CurrentValue становится вторым элементом в массиве

Мы возвращаем сумму двух значений, которые у нас есть, Аккумулятор и CurrentValue Отказ Этот процесс продолжается до Уменьшить петли через весь массив. Окончательное значение будет возвращено на вызов функции.

Обратное значение рассчитывается, и процесс повторяется

Уменьшение массива в объект

Мы создадим Уменьшить Способ вместе для этого примера.

Допустим, у нас есть массив фруктов. Мы хотим знать количество фруктов каждого типа.

const fruits = ['apple', 'apple', 'banana', 'banana', 'orange', 'pear', 'apple']

// What you want
// {
// apple: 3,
// banana: 2,
// orange: 1,
// pear: 1
// }

Во-первых, мы должны пройти пустой объект как InitivalValue Потому что мы хотим создать объект.

const tally = fruits.reduce((accumulator, fruit) => {
  // Do something
}, {})

В первой итерации Аккумулятор будет {} Отказ Фрукты будет яблоко Отказ

В этой первой итерации мы знаем, что аккумулятор не имеет плодов. ( {} не содержит Apple ). Здесь мы хотим добавить яблоко к Аккумулятор Отказ При добавлении яблоко к Аккумулятор Мы устанавливаем количество яблок к 1.

const tally = fruits.reduce((accumulator, fruit) => {
  return accumulator[fruit] = 1
}, {})

Во второй итерации Аккумулятор берет на ранее возвращенное значение. Фрукты Это еще одно яблоко:

• Аккумулятор : {Apple: 1}
• Фрукты : яблоко

Здесь мы хотим увеличить количество яблок в Аккумулятор Отказ Для этого нам нужно проверить, если яблоко Собственность существует в Аккумулятор Отказ Если это так, мы увеличиваем его значение на 1.

const tally = fruits.reduce((accumulator, fruit) => {
  if (accumulator[fruit]) {
    accumulator[fruit] = accumulator[fruit] + 1
  } else {
    accumulator[fruit] = 1
  }

  return accumulator
}, {})

Это оно! Процесс повторяется для других фруктов. Если вы регистрируете Tally , вы увидите объект, который мы хотели.

{
  apple: 3,
  banana: 2,
  orange: 1,
  pear: 1
}

Давайте убрать функцию уменьшения дальше. Мы можем сделать это с тройными операторами.

const tally = fruits.reduce((accumulator, fruit) => {
  const fruitCount = accumulator[fruit]
  fruitCount
    ? accumulator[fruit] = fruitCount + 1
    : accumulator[fruit] = 1
  return accumulator
}, {})

Выравнивать массив

Допустим, у нас есть массив, который содержит массивы. Мы хотим преобразовать этот массив массивов в один массив, который содержит все значения. Этот процесс называется выравниванием.

const array = [
  [1, 2, 3, 4, 5],
  [6, 7, 8, 9, 10]
]

// What we want:
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Чтобы сгладить массив, нам нужно начать Уменьшить с массивом. Это потому, что мы хотим, чтобы вывод был массивом.

const flattened = array.reduce((accumulator, item) => {
  // Do something
}, [])

В первой итерации Аккумулятор будет пустой массив. Предмет будет массив, который содержит пять предметов.

• Аккумулятор : []
• Предмет : [1, 2, 3, 4, 5]

Мы хотим объединиться Предмет в Аккумулятор Отказ Мы можем использовать Concat сделать это.

const a1 = []
const a2 = [1, 2, 3, 4, 5]
const merged = a1.concat(a2)
console.log(merged) // [1, 2, 3, 4, 5]

Этот метод работает, даже если аккумулятор содержит значения.

const a1 = [1, 2, 3]
const a2 = [4, 5]
const merged = a1.concat(a2)
console.log(merged) // [1, 2, 3, 4, 5]

Уменьшить Код выглядит так:

const flattened = array.reduce((accumulator, item) => {
  return accumulator.concat(item)
}, [])

Если вы хотите сделать его короче, вы можете использовать оператор распространения массива.

const flattened = array.reduce(
  (accumulator, item) => [...accumulator, ...item], []
)

Спасибо за прочтение. Эта статья была первоначально опубликована на мой блог Отказ Подпишись на Моя рассылка Если вы хотите больше статей, чтобы помочь вам стать лучшим разработчиком Frontend.