Сокращение Javascript: освойте основы

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

Что такое метод сокращения Javascript?

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

const array1 = [1, 2, 3, 4];


// 0 + 1 + 2 + 3 + 4

const initialValue = 0;

const sumWithInitial = array1.reduce((accumulator, currentValue) => accumulator + currentValue,  initialValue)

console.log(sumWithInitial);
// expected output: 10

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

Знакомство с параметрами и аргументами Javascript «уменьшить»

Важно иметь очень конкретное представление о том, что такое «сокращение» параметров Javascript, если мы должны правильно использовать метод. Ниже я выделил эти параметры; мы рассмотрим их один за другим, а в конце соберем все воедино, чтобы понять смысл.

1. функция обратного вызова
2. начальное значение

Функция обратного вызова

Эта функция выполняется для каждого элемента массива. При последующем выполнении обратного вызова Fn его возвращаемое значение изменяется на значение аргумента-аккумулятора. Возвращаемое значение изменяется на reduce() для окончательного вызова.

При вызове функции предоставляются следующие параметры:

1. накопитель
2. текущее значение
3. текущий индекс
4. массив

Накопитель

Это результат последнего вызова обратного вызова Fn в значении. Если указано, initialValue используется при первом вызове; если нет, используется массив[0].

текущее значение

Это значение текущего элемента. Если было предоставлено initialValue, значение массива по индексу 0 (array[0]) будет возвращено при первом вызове; в противном случае будет возвращен индекс 1 (массив [1]).

Текущий индекс

Это позиция индекса массива currentValue. Если бы initialValue было задано при первом вызове, его позиция была бы по индексу 0; иначе он был бы в индексе 1.

Массив

Это просто массив, в котором использовался метод reduce().

начальное значение

Значение, используемое для инициализации аккумулятора при первом обратном вызове. Если указано initialValue, callbackFn начинает работу с currentValue, установленным в первый элемент массива. Если initialValue опущен, accumulator устанавливается на первое значение массива, а callbackFn начинает работу с currentValue, установленным на второе значение массива. Если в этом сценарии массив пуст (т. е. нет начального элемента для возврата в качестве накопителя), возникает ошибка.

Собираем все вместе

reduce(Function (accumulator, currentValue, currentIndex, array) { /* … */ }, initialValue)

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

Как работает метод Javascript «уменьшить»?

Давайте углубимся в этот сокращенный метод Javascript и посмотрим, что происходит за кулисами.

const array1 = [1, 2, 3, 4];
// 0 + 1 + 2 + 3 + 4

const initialValue = 0;
const sumWithInitial = array1.reduce(
(accumulator, currentValue) => accumulator + currentValue, 
initialValue
);

Все, что делает метод reduce в Javascript, — это перебираем элемент в цикле, и каждый раз, когда он проходит через цикл, мы возвращаем отдельный элемент и получаем предыдущее значение, которое мы возвращаем из reduce(). Если это первый элемент в функции reduce(), мы просто возвращаем ноль, потому что это наше значение по умолчанию. Например, если мы изменим значение по умолчанию на 50, это повлияет на массив.

Мы берем ноль или число по умолчанию и добавляем его к нашему первому элементу; мы получили бы сумму, которая была бы 1 в предыдущем коде. Мы делаем это снова для следующего элемента, который равен 2. Мы добавляем 1 + 2 и получаем 3; мы продолжаем этот процесс, пока не дойдем до финального элемента.

| | аккумулятор | текущее значение | индекс | Возвращаемое значение | |----|----|----|----|----| | 1-й звонок | 0 | 1 | 0 | 1 | | 2-й звонок | 1 | 2 | 1 | 3 | | 3-й звонок | 3 | 3 | 2 | 6 | | 4-й звонок | 6 | 4 | 3 | 10 |

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

Заключение

И последнее замечание: сокращение Javascript — это итеративный метод. Он собирает все элементы массива в одно значение, применяя функцию обратного вызова «reducer» к каждому элементу в порядке возрастания индекса. Возвращаемое значение callbackFn всегда предоставляется как аккумулятор при повторном вызове callbackFn. Reduce возвращает возвращаемое значение из последнего значения аккумулятора, которое является значением, возвращаемым из обратного вызова Fn на последней итерации массива ().

В то время как функция, предоставленная как callback-Fn, может изменяться, массив, для которого она вызывается, reduce() не может. Однако обратите внимание, что длина массива сохраняется до выполнения начального обратного вызова Fn.