Как использовать сокращение в JavaScript

reduce — это метод массива, который помогает преобразовать массив в одно значение. Это выглядит так:

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

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

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

Суммирование чисел

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

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

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

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

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

Сначала вы проходите initialValue к reduce. Этот initialValue должно быть 0, потому что:

Мы хотим accumulator быть числом.
Мы не хотим initialValue повлиять на сумму.
Начальное значение установлено на 0

accumulator будет initialValue в первой итерации. currentValue будет первым элементом массива.

аккумулятор присваивается как 0
currentValue - первый элемент в массиве currentValue — первый элемент в массиве

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

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

accumulator принимает возвращаемое значение во второй итерации. currentValue будет вторым элементом массива.

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

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

Возвращаемое значение вычисляется, и процесс повторяется.

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

Мы создадим reduce метод вместе для этого примера.

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

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

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

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

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

В первой итерации accumulator будет {}. fruit будет apple.

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

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

Во второй итерации accumulator принимает ранее возвращенное значение. fruit другое яблоко:

accumulator: { apple: 1 }
fruit: apple

Здесь мы хотим увеличить количество яблок в accumulator. Для этого нам нужно проверить, apple свойство существует в accumulator. Если это так, мы увеличиваем его значение на 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]

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

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

В первой итерации accumulator будет пустой массив. item будет массив, содержащий пять элементов.

accumulator: []
item: [1, 2, 3, 4, 5]

Мы хотим слиться item в accumulator. Мы можем использовать 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]

reduce код выглядит так:

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

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

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

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