Многие люди говорят, что использование метода Reduce в вашем коде делает его беспорядочным. Поэтому многие эксперты советуют избегать его как можно больше. Но оставьте все эти советы в стороне. Теперь мы будем иметь смысл. Помните, что это все еще встроенный метод для массивов в Javascript.
Уменьшить = многие к одному. Он используется в массивах. Итак, здесь многиеотносятся к элементам в массиве, а один относится к выводу (результату). Этот вывод задается методом уменьшения.
Метод Reduce — это метод, который принимает одну функцию обратного вызова и начальное значение.
Array.reduce(() => {} , initialValue) --> Callback and initial value
Это начальное значение определяет вывод, результат или одно (одно) конечное значение.
If,
Начальное значение = число, затем на выходе получается одно число.
Начальное значение = Object {}, затем вывод представляет собой один объект.
Начальное значение = Массив [], затем вывод представляет собой один Массив.
Мы имеем дело с массивами, выполняем операции над элементами массива. Каждая операция даст вам результат. Нужен ли нам этот результат? Сделайте паузу и задумайтесь!
Да конечно! Но почему? Потому что мы преобразуем множество элементов в один элемент. Таким образом, каждая операция основана на результате операции предыдущего элемента. Звучит запутанно, верно?
Помните: на первой итерации у нас нет результата предыдущей итерации, поэтому мы даем начальное значение.
Где проходит операция?
Внутри функции обратного вызова (функция содержит операции и переменные для выполнения). Функция должна использовать предыдущие значения результата, поэтому нам нужна переменная для хранения результата. От этого результата делаются последующие операции. Эта переменная является первым параметром функции обратного вызова, обычно называемой «Аккумулятор».
Поскольку мы работаем с массивами, второй и третий параметры будут текущим элементом в массиве и индексом соответственно — довольно скучное описание. Давайте посмотрим на классический пример.
const arr = [1,2,3]
// Syntax
// Array.reduce(() => {} , initialValue) --> Callback and initial value
//Callback parameters --> accumulator(previous result),current element in a array, index.
// We will add all the elements in an array with an initial value of 0
const reduced = arr.reduce((acc,elem,index) => { console.log('acc',acc)
console.log('elem',elem)
console.log('index',index)
return acc + elem
},0)
console.log('The final output is',reduced)
// Output is
acc 0 --->First iteration value will be initial value
elem 1
index 0
acc 1 --> 0+1(Form previous result) --> acc + elem
elem 2
index 1
acc 3 --> 1+2(From previous result) --> acc + elem
elem 3
index 2
The final output is 6 --> Result of the output is equal to the final accumulator value(3+3) because no element to process further in the array.
Давайте изменим начальное значение,
const arr = [1,2,3];
const reduced = arr.reduce((acc,elem) => {
return acc + elem
},100)
console.log('The final output is',reduced)
// Prints value 106 because when it enters the callback function for the first iteration, it will have acc value of 100 = initial value
Примечание.
- На первой итерации acc = начальное значение. Таким образом, оба являются обязательными.
- Затем вторым параметром функции обратного вызова является текущий элемент в массиве, который она будет обрабатывать.
Немного усложним, скажем, массив объектов со свойством Price. Нам нужна общая цена.
const arr = [ { price:100, }, { price:200, }, { price:300, }, ];
const reduced = arr.reduce((acc,elem) => {
return acc + elem.price
},0)
console.log('The total value is',reduced)
// Outputs --> The total value is 600
Для вложенных объектов
const arr =
[
{ product:{ name:'Shirt', price:2000 } },
{ product:{ name:'Pant', price:1000 } },
{ product:{ name:'Shoe', price:1500 } }
];
const reduced = arr.reduce((acc,elem) => {
let {product} = elem; --> Destructuring first level
return acc + product.price
},0)
console.log('The total value is',reduced)
// Outputs --> The total value is 4500
Сделаем минимум и максимум в массиве,
Мы изменим начальный максимум на первый элемент в массиве, а затем он проверит каждый элемент в массиве.
константа обр = [100,30,9,0,200,90,10,25]
const arr = [100,30,9,0,200,90,10,25];
const reduced = arr.reduce((acc,elem,index) => {
// only enters if the current maximum(acc) is less than current element
if(acc<elem) {
acc = elem return acc
}
// enters current maximum is greater
else {
return acc;
}
},arr[0])
// First value of array
console.log(reduced) //Prints 200
Для минимума,
const arr = [100,30,9,0,200,90,10,25];
const reduced = arr.reduce((acc,elem,index) => {
// only enters if the current minimum(acc) is greater than current element
if(acc>elem) {
acc = elem return acc
}
// enters current maximum is greater
else {
return acc;
}
},arr[0]) // First value of array
console.log(reduced) // Prints 0
Сократим массив объектов,
Типичная проблема электронной коммерции: в корзину не добавляется количество каждого товара.
const arr = [
{ product:{ name:'Shirt', price:2000 } },
{ product:{ name:'Pant', price:1000 } },
{ product:{ name:'Shoe', price:1500 } },
{ product:{ name:'Shoe', price:1500 } },
{ product:{ name:'Pant', price:1000 } },
{ product:{ name:'Pant', price:1000 } },
{ product:{ name:'Shirt', price:2000, }
}, ];
Рассмотрим структуру поближе.
Это массив? Да. Так что мы можем уменьшить его!
Какова структура? Массив объектов.
Есть ли у нас предполагаемые свойства на первом уровне? Нет, он вложен.
Какова полная структура?
[ {
product:{
name:...,
price:...
}
}
]
Что нам нужно найти? Сколько раз каждый продукт появляется в этом массиве.
Конечный результат должен быть в формате Object с ключом в качестве названия продукта и значением количество раз, когда оно появлялось.
Мы используем динамическое вычисление ключа и оператор расширения, потому что каждая итерация проверяет ключ и сохраняет уже вычисленные свойства и значения. Это будет сохранено в аккумуляторе для следующей итерации, и будет выведен результат последней итерации.
Проверка ключей = динамические ключи.
Сохранение результатов предыдущего вывода в объекте = оператор Spread.
const reduced = arr.reduce((acc,elem) => {
let {product} = elem;
if(!acc[product.name]) {
// using dynamic keys [product.name] and spread operator (...acc) return {...acc,[product.name]:1}
}
else {
return {...acc,[product.name]: acc[product.name] + 1}
}
},{})
// Final output is reduced to single object and hence initial value is empty object
Позвольте мне объяснить логику здесь,
Если ключ недоступен в выходном объекте → if(!acc[poduct.name]).
Примечание. При первой итерации → это будет пустой объект {}
Скопируйте уже вычисленные значения (ключ и значения) и инициализируйте новый ключ со значением 1.
= {
…акк,
[название продукта]:1
}
Еще,
Скопируйте уже вычисленные значения (ключ и значения) и добавьте определенный ключ с '1' =
{
…акк,
[название продукта]: acc[название продукта] + 1
}
Таким образом, выход,
{Shirt:1, Pant:3, Shoe:2}
Давайте добавим название продукта в один массив.
const reduced = arr.reduce((acc,elem) => {
let {product} = elem;
// Since we initialize it as an array, we can use the push method acc.push(product.name)
return acc
},[])
console.log(reduced)
//[ 'Shirt', 'Pant', 'Shoe', 'Shoe', 'Pant', 'Pant', 'Shirt' ]
Поскольку мы можем создать другой массив из исходного массива, как описано выше, мы можем выполнять операции map над массивом, используя reduce. Давайте возведем каждый элемент в массив в квадрат.
const arr = [5,10,15,20,25];
const reduced = arr.reduce((acc,elem) => {
let squared = elem * elem
acc.push(squared)
return acc
},[])
console.log(reduced)
Выход
[ 25, 100, 225, 400, 625 ]
Точно так же мы можем фильтровать массив, используя сокращение,
const arr = [5,10,15,20,25];
const reduced = arr.reduce((acc,elem) => {
if(elem > 15) {
acc.push(elem)
return acc
}
else {
return acc
}
},[])
Выход,
[ 20, 25 ] // Values greater than 15
Первоначально опубликовано на https://www.pansofarjun.com 26 сентября 2022 г.
