Автор оригинала: FreeCodeCamp Community Member.
Джош Питасалис
JavaScript Уменьшить метод является одним из краеугольных камней функционального программирования. Давайте исследуем, как это работает, когда вы должны использовать его, и некоторые из прохладных вещей, которые он может сделать.
Базовое сокращение
Используйте это, когда : У вас есть массив сумм, и вы хотите добавить их все.
const euros = [29.76, 41.85, 46.5]; const sum = euros.reduce((total, amount) => total + amount); sum // 118.11
Как это использовать:
- В этом примере снижение принимает два параметра, общая сумма и текущую сумму.
- Уменьшите циклы метода уменьшения по каждому номеру в массиве, как он, как он будет в контуре.
- Когда цикл запускает общая стоимость, является числом на данный левый (29,76) и текущая сумма находится рядом с ним (41,85).
- В этом конкретном примере мы хотим добавить текущую сумму в общей сложности.
- Расчет повторяется для каждой суммы в массиве, но каждый раз, когда текущее значение меняется на следующее число в массиве, движущихся справа.
- Когда в массиве больше нет номеров, метод возвращает общее значение.
ES5 версия метода уменьшения в JavaScript
Если вы никогда не использовали синтаксис ES6, не позволяйте приведенному примеру не запугивают вас. Это точно так же, как написание:
var euros = [29.76, 41.85, 46.5];
var sum = euros.reduce( function(total, amount){
return total + amount
});
sum // 118.11Мы используем Const вместо var И мы заменим слово Функция С «стрелкой жира» ( => ) После параметров, и мы опускаем слово «возвращение».
Я буду использовать синтаксис ES6 для остальных примеров, поскольку оно более лаконично и оставляет меньше места для ошибок.
Нахождение среднего с методом уменьшения в JavaScript
Вместо регистрации суммы вы можете разделить сумму по длине массива, прежде чем вернуть конечное значение.
Способ сделать это – воспользоваться другими аргументами в методе снижения. Первый из этих аргументов является индекс Отказ Подобно как для цикла, индекс относится к количеству раз, когда редуктор зацикливается над массивом. Последний аргумент – массив сам.
const euros = [29.76, 41.85, 46.5];
const average = euros.reduce((total, amount, index, array) => {
total += amount;
if( index === array.length-1) {
return total/array.length;
}else {
return total;
}
});
average // 39.37Карта и фильтр в качестве снижения
Если вы можете использовать функцию «Уменьшить», чтобы выплавить в среднем, вы можете использовать его, как вы хотите.
Например, вы можете удвоить общую сумму или половину каждого номера, прежде чем добавлять их вместе, или использовать оператор, если внутри редуктора только добавляют номера, которые больше 10. Моя точка зрения является то, что Уменьшить метод в JavaScript Дает вам мини-кодепен, где вы можете написать любая логика, которую вы хотите. Это Повторит логику для каждой суммы в массиве, а затем вернуть одно значение.
Дело в том, что вам не всегда нужно вернуть одно значение. Вы можете уменьшить массив в новый массив.
Например, позволяет уменьшить массив количества в другой массив, где каждая сумма удваивается. Для этого нам нужно установить начальное значение для нашего аккумулятора в пустой массив.
Начальное значение – это значение общего параметра при запуске восстановления. Вы устанавливаете начальное значение, добавив запятую, за которой следует ваше начальное значение внутри скобок, но после фигурных скобок ( жильщики в примере ниже ).
const average = euros.reduce((total, amount, index, array) => {
total += amount
return total/array.length
}, 0);В предыдущих примерах начальное значение было ноль, поэтому я его опустил. Пропуская начальное значение, Всего будет по умолчанию на первую сумму в массиве.
Установив начальное значение для пустого массива, мы можем топить каждый сумма в Всего Отказ Если мы хотим уменьшить массив значений в другой массив, где каждое значение удвоилось, нам нужно нажать сумма * 2. Затем мы возвращаем общую сумму, когда больше не нажимается.
const euros = [29.76, 41.85, 46.5];
const doubled = euros.reduce((total, amount) => {
total.push(amount * 2);
return total;
}, []);
doubled // [59.52, 83.7, 93]Мы создали новый массив, где каждая сумма удваивается. Мы также могли бы отфильтровать номера, которые мы не хотим удвоить, добавив заявление о если внутри нашего редуктора.
const euro = [29.76, 41.85, 46.5];
const above30 = euro.reduce((total, amount) => {
if (amount > 30) {
total.push(amount);
}
return total;
}, []);
above30 // [ 41.85, 46.5 ]Эти операции являются карта и Фильтр Методы переписаны как метод уменьшения.
Для этих примеров было бы больше смысла использовать карту или фильтр, потому что они проще в использовании. Преимущество использования уменьшения вступает в игру, когда вы хотите отобразить и фильтруйте вместе, и у вас есть много данных, чтобы перейти.
Если вы создаете карту и фильтруете вместе, вы делаете работу дважды. Вы отфильтроваете каждое значение, а затем отобразите оставшиеся значения. С уменьшением вы можете фильтровать, а затем отображаться в одном проходе.
Используйте карту и фильтр, но когда вы начинаете цепи много методов вместе, вы теперь знаете, что вместо этого будет быстрее.
Создание соответствующего методом Уменьша в JavaScript
Используйте это, когда : У вас есть коллекция предметов, и вы хотите знать, сколько из каждого элемента находится в коллекции.
const fruitBasket = ['banana', 'cherry', 'orange', 'apple', 'cherry', 'orange', 'apple', 'banana', 'cherry', 'orange', 'fig' ];
const count = fruitBasket.reduce( (tally, fruit) => {
tally[fruit] = (tally[fruit] || 0) + 1 ;
return tally;
} , {})
count // { banana: 2, cherry: 3, orange: 3, apple: 2, fig: 1 }Для подсельных элементов в массиве наше начальное значение должно быть пустой объект, а не пустой массив, как он был в последнем примере.
Поскольку мы собираемся вернуть объект, мы теперь можем хранить пары ключа-значений в общей сложности.
fruitBasket.reduce( (tally, fruit) => {
tally[fruit] = 1;
return tally;
}, {})На нашем первом проходе мы хотим, чтобы имя первого ключа было нашей текущей стоимостью, и мы хотим дать ему значение 1.
Это дает нам объект со всеми плодоовощными клавишами, каждый со значением 1. Мы хотим увеличить количество каждого фрукта, если они повторяются.
Для этого на нашей второй цикле мы проверяем, содержат ли наш полную клавишу с текущими плодами редуктора. Если это не так, то мы создаем это. Если это происходит, мы увеличиваем сумму на один.
fruitBasket.reduce((tally, fruit) => {
if (!tally[fruit]) {
tally[fruit] = 1;
} else {
tally[fruit] = tally[fruit] + 1;
}
return tally;
}, {});Я переписал точную же логику в более лаконичке вверху
Сравнивая массив массивов с методом Уменьшимися в JavaScript
Мы можем использовать уменьшение, чтобы сглаживать вложенные количества в один массив.
Мы устанавливаем начальное значение для пустого массива, а затем объединить текущее значение в общей сложности.
const data = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const flat = data.reduce((total, amount) => {
return total.concat(amount);
}, []);
flat // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]Чаще всего, информация вложена более сложные способы. Например, позволяет сказать, что мы просто хотим все цвета в переменной данных ниже.
const data = [
{a: 'happy', b: 'robin', c: ['blue','green']},
{a: 'tired', b: 'panther', c: ['green','black','orange','blue']},
{a: 'sad', b: 'goldfish', c: ['green','red']}
];Мы собираемся выйти через каждый объект и вытащить цвета. Мы делаем это, указав количество .C для каждого объекта в массиве. Затем мы используем петлю FOREACH для толкания каждого значения в вложенном массиве в общей сложности.
const colors = data.reduce((total, amount) => {
amount.c.forEach( color => {
total.push(color);
})
return total;
}, [])
colors //['blue','green','green','black','orange','blue','green','red']Если нам нужен только уникальный номер, то мы можем проверить, чтобы узнать номер уже существует в Всего Прежде чем мы толкаем.
const uniqueColors = data.reduce((total, amount) => {
amount.c.forEach( color => {
if (total.indexOf(color) === -1){
total.push(color);
}
});
return total;
}, []);
uniqueColors // [ 'blue', 'red', 'green', 'black', 'orange']Трубопровод с уменьшением
Интересным аспектом метода уменьшения в JavaScript является то, что вы можете уменьшить функции, а также цифры и строки.
Допустим, у нас есть коллекция простых математических функций. Эти функции позволяют нам увеличить, уменьшить, двойное и вдвое меньше.
function increment(input) { return input + 1;}
function decrement(input) { return input — 1; }
function double(input) { return input * 2; }
function halve(input) { return input / 2; }По какой-то причине нам нужно увеличить, затем удвоить, затем уменьшить количество.
Вы можете написать функцию, которая принимает вход и возвращает (вход + 1) * 2 -1. Проблема в том, что мы знаем, что нам нужно будет увеличивать сумму три раза, а затем удвоить его, затем уменьшить его, а затем вдвое впомнить в некоторой степени в будущем. Мы не хотим переписать нашу функцию каждый раз, чтобы мы использовали, чтобы уменьшить, чтобы создать конвейер.
Трубопровод – это термин, используемый для списка функций, которые преобразуют некоторое начальное значение в конечное значение. Наш трубопровод будет состоять из наших трех функций в том порядке, что мы хотим их использовать.
let pipeline = [increment, double, decrement];
Вместо того, чтобы уменьшить массив значений, мы сокращаем наш трубопровод функций. Это работает, потому что мы устанавливаем начальное значение в качестве суммы, которую мы хотим преобразовать.
const result = pipeline.reduce(function(total, func) {
return func(total);
}, 1);
result // 3Поскольку трубопровод – это массив, его можно легко модифицировать. Если мы хотим уменьшить что-то три раза, то удваивайте его, уменьшайте его, и надуй его, тогда мы просто изменим трубопровод.
var pipeline = [ increment, increment, increment, double, decrement, halve ];
Снижение функции остается точно такой же.
Глупые ошибки, чтобы избежать
Если вы не передадите начальное значение, уменьшите, предположим, что первый элемент в вашем массиве является ваше начальное значение. Это отлично работало в первых нескольких примерах, потому что мы добавили список номеров.
Если вы пытаетесь поднять фрукты, и вы оставляете первоначальное значение, то вещи странно. Не входя в первоначальное значение – это простое ошибка, чтобы сделать и одну из первых вещей, которые вы должны проверить при отладке.
Еще одна распространенная ошибка – забыть вернуть общую сумму. Вы должны вернуть что-то для функции уменьшения для работы. Всегда проверьте и убедитесь, что вы действительно возвращаете нужное значение.
Инструменты, Советы и ссылки
- Все в этом посте пришло из фантастической серии видео на Egghead под названием Представляя уменьшить Отказ Я даю Николай Билоконский Полный кредит, и я благодарен ему за все, что теперь я знаю об использовании метода уменьшения в JavaScript. Я пытался переписать большую часть того, что он объясняет своими словами как упражнение, чтобы лучше понять каждую концепцию. Кроме того, для меня легче ссылаться на статью, в отличие от видео, когда мне нужно вспомнить, как что-то сделать.
- MDN уменьшить документацию этикетки, что я позвонил Всего
АккумуляторОтказ Важно знать это, потому что большинство людей будут ссылаться на него как аккумулятор, если вы читаете об этом онлайн. Некоторые люди называют этоРанеекак в предыдущее значение Отказ Все это относится к тому же. Мне было легче подумать о Всего Когда я учился, уменьшил. - Если вы хотите попрактиковаться, используя Уменьшить, я рекомендую подписаться на FreeCodecamp и завершив как многие из Промежуточные алгоритмы Как вы можете использовать уменьшить.
- Если переменные «COND» в примерных фрагментах являются новыми для вас, я написал еще одну статью о Переменные ES6 и почему вы можете использовать их Отказ
- Я также написал статью под названием Беда с петлями которые объясняют, как использовать карту () и фильтр (), если новые для вас.
Спасибо за чтение! Если вы хотите быть уведомленным, когда я пишу новую статью, пожалуйста Введите адрес электронной почты здесь.
И если вам понравилась статья, пожалуйста, поделитесь этим в социальных сетях, чтобы другие могли его найти.