Понимание метода уменьшения массива Javascript
20 октября 2022 г.Метод уменьшения Javascript — это рекурсивный способ выполнения вычислений на основе каждого элемента в массиве, а также с учетом предыдущего элемента в массиве. Он принимает функцию, которую также можно использовать для дальнейшей обработки элементов массива на основе выбранной вами логики.
Это весьма полезно для суммирования массивов или объединения массивов на основе строк. Например, мы могли бы преобразовать массив в строку следующим образом:
let myArray = [ 'hello', 'world', 'welcome!' ]
let reduceString = myArray.reduce((previousElement, currentElement) => {
return `${previousElement} ${currentElement}`;
})
console.log(reduceString); // hello world welcome!
Аналогичным образом мы могли бы использовать его для сложения всех чисел в массиве и возврата одного числа:
let myArray = [ 5, 10, 15, 20 ]
let reduceString = myArray.reduce((previousElement, currentElement) => previousElement + currentElement)
console.log(reduceString); // 50
Функция обратного вызова метода сокращения
Функция обратного вызова, используемая в функции сокращения, фактически имеет 4 аргумента. Вам не обязательно использовать какие-либо из них, но обычно вам понадобятся первые два. Формат функции выглядит следующим образом:
Array.reduce((previousElement, currentElement, currentIndex, array) => {
// Do something with the array's data
}, initialValue)
Давайте посмотрим, что означают previousElement, currentElement, currentIndex, array и initialValue. .
предыдущийЭлемент
Это говорит само за себя. Он представляет предыдущий элемент из текущего, который мы итерируем. Функция reduce обычно начинается с индекса [1], так что предыдущий элемент существует. Если вы определили initialValue, то это значение будет использоваться, а функция reduce начнется с индекса [0], используя < code>initialValue как previousValue.
текущийэлемент
Это текущий элемент, который повторяется с помощью сокращения.
текущий индекс
Поскольку массивы состоят не только из индексов и часто содержат полезные данные, у нас также есть возможность получить текущий итерируемый индекс. Это вернет число с индексом 0, представляющее текущую позицию элемента в массиве. Ожидайте стандартные индексы массива от этого аргумента.
массив
Это вернет весь массив, что может быть полезно, если вы планируете манипулировать массивом с помощью reduce или если вы хотите выполнять вычисления на основе других элементов массива
начальное значение
Если указано, это будет previousElement для индекса [0].
Как уже упоминалось, все это необязательно, но все они предоставляют полезный способ манипулирования и вычисления возвращаемого значения для вашего метода reduce.
Мутирование массива в уменьшении
Если вы попытаетесь изменить массив в reduce, это может привести к интересному поведению, поэтому есть несколько пограничных случаев, которые следует учитывать при рассмотрении reduce.
Например, если вы измените элемент массива где-то перед текущим элементом, сокращение все равно будет работать должным образом. Например, добавление 1000 к myArray[currentIndex + 1] по-прежнему будет давать ожидаемое значение:
let myArray = [ 4, 5, 6, 7, 8 ]
let reduceFunction = myArray.reduce((prevValue, currentValue, currentIndex) => {
myArray[currentIndex + 1] += 1000
return prevValue + currentValue
});
console.log(reduceFunction); // 3030
Однако попытка добавить значения в массив во время выполнения reduce не сработает. Например, ниже я использую push, чтобы добавить один элемент в массив для каждого элемента в массиве. Это, конечно, привело бы к бесконечному циклу, поэтому Javascript останавливает функцию и обрабатывает только те значения, которые были в массиве на момент запуска reduce:
let myArray = [ 4, 5, 6, 7, 8 ]
let reduceFunction = myArray.reduce((prevValue, currentValue, currentIndex) => {
myArray.push(1000)
return prevValue + currentValue
});
console.log(reduceFunction); // 30
Примечание относительно массивов с одним значением
Если ваш массив содержит только одно значение и вы не используете initialValue, функция reduce вернет одно значение из этого массива, а не вызовет функцию обратного вызова. . Например:
let myArray = [ 'cat' ]
let reduceFunction = myArray.reduce((prevValue, currentValue) => {
return currentValue + '!'
});
console.log(reduceFunction); // cat (does not have exclamation mark, even though we tried to add it)
Суммирование и объединение значений в массиве объектов
Возможно, вы уже ожидали такого поведения, но если у вас есть массив объектов, вы можете ссылаться на дочерние свойства каждого объекта-элемента для выполнения вычислений. Например, чтобы сложить все приведенные ниже age:
let myArray = [ { age: 52 }, { age: 34 }, { age: 104 }, { age: 29 } ]
let reduceFunction = myArray.reduce((prevValue, currentValue) => {
return prevValue + currentValue.age
}, 0);
console.log(reduceFunction); // 219
Возможно, вы заметили здесь несколько странных вещей, поэтому будет полезно поработать с этим примером:
- Мы должны определить
initialValue, так как изначальноprevValueравно{ age: 52 }, а затемprevValue< /code> — эточисло. Это означает, что мы поддерживаем согласованность типов. - Поскольку каждый раз, когда мы запускаем
reduce, он возвращает значение для текущего элемента в элементе массива, мы используемprevValue, а неprevValue.age.prevValue.ageне определено, так какreduceкаждый раз возвращает число.
Заключение
Метод reduce — это действительно полезный способ объединить все в массиве или создать новые массивы по вашему выбору. Он мощный и рекурсивный, поэтому будьте осторожны при его использовании с большими наборами данных.
Также опубликовано здесь
Оригинал