Уменьшение вашего массива Правильный путь
Кредиты изображений: Pixabay
Одним из преимуществ JavaScript в качестве языка является то, что он позволяет писать функциональный стиль программирования, то есть мы пишем программы, составив функции, которые описывают действия (что должно произойти) и рефераты процессы (как это должно произойти). Этот стиль программирования возможен в JavaScript, потому что функции являются частными гражданами, они являются данными и могут быть переданы в вашем приложении, как переменные.
Чистые функции
Один из основного принципа функционального программирования пишет чистые функции. Чистые функции.
Если чистая функция должна мутировать или изменять любую переменную (аргументы), передаваемые ему, она создаст копию, измените и возвращает копию, оставляя оригинальную переменную нетронутую. Это называется неизменность. Суть функционального программирования использует функции для преобразования данных из одной формы к другому, как уже упоминал ранее, эти данные копируются до того, как преобразовывают тем самым, оставляя исходные данные Intact. Это улучшает читаемость, тестируемость и правильность нашей программы.
Array.Prototype.recuce и Array.Prototype.reduceright.
Массив – это основная структура данных в JavaScript, есть несколько операций, которые мы можем выполнять на массиве, применяя его функции. Мы посмотрим на две из этих функций в этой статье. Они называются Уменьшить (Array.prototype.recuce) и Редустера (Array.prototype.reduceright). Что делает эти функции, заключается в том, чтобы обработать массив, итерацией по его элементам и наращиваю единое значение, которое возвращается на основе указанных критериев.
Уменьшить () и Редукторы () работает так же, кроме того, что Уменьшить () начинается с первого элемента в массиве до последнего пока Редукторы () начинается с последнего предмета к первому.
Оба Уменьшить () и Редукторы () Принять два аргумента, Функция, которая выполняет операцию по снижению (редуктору) и необязательное начальное значение, с помощью которого редуктор запускает его операцию. Редуктор принимает четыре аргумента: предыдущий элемент (также называемый накопленным значением), текущий элемент, индекс текущего элемента и сам массив. Первые два аргумента редуктора обычно используются. Значение, возвращенное из каждой итерации (накопленное значение), передается на следующую итерацию в качестве первого аргумента.
Уменьшение () и редустера () использует редуктор, редуктор – это функция, которая выполняет фактический расчет на каждой итерации.
Примеры
Позволяет использовать основной пример, чтобы проиллюстрировать, как уменьшить работу, мы собираемся суммируйте элементы массива, используя функцию уменьшения.
let numbers = [2,4,6,7,8]; let sum = numbers.reduce((acc, cur) => { return acc + cur; }); console.log(sum); // 27
Существует пять элементов в массиве чисел, редуктор произойдет через элементы с использованием первого значения (2) в качестве Intial Acamulator (ACC). Давайте посмотрим, как выглядит каждое значение для каждой итерации.
First iteration => acc = 2, cur = 4, acc + cur = 6 Second iteration => acc = 6, cur = 6, acc + cur = 12 Third iteration => acc = 12, cur = 7, acc + cur = 19 Fourth iteration => acc = 19, cur = 8, acc + cur = 27
Если второй аргумент передан в функцию уменьшения, как это
let numbers = [2,4,6,7,8]; let sum = numbers.reduce((acc, cur) => { return acc + cur; }, **20** ); console.log(sum); // 47
Это будет первый аргумент для редуктора, и итерация будет происходить пять раз вместо четырех, как это:
First iteration => acc = 20, cur = 2, acc + cur = 22 Second iteration => acc = 22, cur = 4, acc + cur = 26 Third iteration => acc = 26, cur = 6, acc + cur = 32 Fourth iteration => acc = 32, cur = 7, acc + cur = 39 Fifth iteration => acc = 39, cur = 8, acc + cur = 47
Наилучшая практика заключается в том, чтобы инициализировать функцию уменьшения до разумного по умолчанию, обеспечивая значение в качестве второго аргумента функции снижения.
Чтобы найти наибольшее количество в массиве с использованием функции уменьшения:
const numbers = [20,22,50,60,12]; const largestNumber = numbers.reduce((max, num) => { console.log(`${num} > ${max} is ${num > max}`); return (num > max) ? num : max }, 0); console.log(largestNumber); // 60
В приведенном выше примере максимальная переменная была инициализирована до 0, на каждой итерации редуктор сравнивает текущее значение Max с текущим элементом (Num) и возвращает больше двух значений, возвращаемое значение присваивается максимальной переменной и это используется для следующей итерации.
Чтобы удалить дубликаты элементов в массиве с использованием функции Уменьшими:
let numbers = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]; let distinctNumbers = numbers.reduce((distinct, num) => { return (distinct.indexOf(num)) !== -1 ? distinct : [...distinct, num]; }, []); console.log(distinctNumbers); // [1,2,3,5,4]
Обратите внимание, что функция уменьшения была инициализирована для пустого массива, потому что мы ожидаем нашего результата на нашем результате, это разумный по умолчанию. Что делает редуктор в этом примере, заключается в проверке, существует ли номер в инициализированном массиве, добавьте его, если оно не существует, и верните массив. Оператор спреда используется здесь.
Давайте еще иметь еще один пример, чтобы проиллюстрировать Редукторы () Отказ Предполагая, что нам нужно выполнить операцию, которая имеет право на левую приоритет, как арифметическая операция. Давайте посмотрим пример ниже:
Compute 3^(3^2) // We calculate (3 ^ 5) first, assuming the result is n, we then calculate (2 ^ n) to get the final answer. let numbers = [3,3,2]; let answer = numbers.reduceRight((ans, num) => { return Math.pow(num, ans); }); console.log(answer); // 19683
В приведенном ниже примере редуктор начинается справа (2), В первой итерации расчет будет (3²), который составляет 9, вторая итерация будет (3⁹), которая составляет 19683.
Заключение
Я только что показал вам немного возможностей Уменьшить () и Редукторы () , У них больше случаев использования, чем то, что мы лечили здесь. Чтобы узнать больше, Проверьте документы MDN Отказ Сара Драснер также написала статью о CSS-Tricks Отказ
Спасибо за прочтение
Оригинал: “https://dev.to/samolabams/reducing-your–array-the-right-way-787”