Учитесь уменьшить через 10 минут

Надеюсь, это уменьшает путаницу.

В моем опыте обучения и преподавании JavaScript, Уменьшить является одной из самых сложных концепций для трещины. В этой статье я постараюсь обратиться к одному ясному вопросу …

Что такое Уменьшить И почему это называется это?

Уменьшить многомен

Некоторые из них, По словам Википедии , являются

Уменьшать
Складывать
Накапливаться
Совокупность
Компресс

Все они намекают на основную идею. Это все о Разбие структуру в одно значение Отказ

Уменьшите – функция, которая складывает список в любой тип данных.

Это как складная коробка! С Уменьшить Вы можете повернуть массив [1,2,3,4,5] в число 15 добавив их все вверх.

Старомодный путь

Обычно вам нужен цикл для «сгибая» список в число.

const add = (x, y) => x + y;
const numbers = [1, 2, 3, 4, 5];
let total = 0;

for (let i = 0; i < numbers.length; i++) {
    total = add(total, numbers[i]);
}

console.log(total); // 15

Крутые детские пути

Но с Уменьшить Вы можете подключить свой Добавить Функция и цикл обрабатывается для вас!

const add = (x, y) => x + y;
const numbers = [1, 2, 3, 4, 5];

numbers.reduce(add);
// 15

Вы буквально складываются 1-5, чтобы получить 15.

Большое три

Перед погружением глубже я думаю, что важно анализировать Уменьшить рядом со своими известными товарищами- карта и Фильтр Отказ Они сильно омрают Уменьшить Делать это похоже на чудаку куча.

Несмотря на их соответствующие популярности, объединение этих трех титанов позволяет манипулировать списками, однако вы хотите!

На мгновение юмора мне и притворяйся JavaScript не может использовать петли, рекурсию или методы массива, такие как foreach , некоторые , Найти и т. Д. Только три левые – карта , Фильтр и Уменьшить Отказ

Однако наша работа как программистов не изменилась. Нам все еще нужно три типа функциональности в наших приложениях.

Преобразование списков
Фильтрующие списки
Переключение списков в другие типы данных (номер, строку, логический, объект и т. Д.).

Давайте посмотрим, как наши единственные инструменты- карта , Фильтр , Уменьшить Гнада это вызов.

✅ Списки преобразований Array.map

Включение списков в другие списки – это предельное развитие в двух словах. Поэтому карта охватывает большую часть вашего списка работы.

Допустим, наше приложение вызывает API для списка пользователей, и нам нужно имя каждого пользователя, отображаемое на экране. Просто создайте функцию, которая возвращает один Имя пользователя.

const getUserName = (user) => user.name;

И подключить его в карта Чтобы запустить это против целого списка пользователей.

users.map(getUserName)
// ['Marie', 'Ken', 'Sara', 'Geoff', ...]

✅ Списки судей Array.Filter

Что, если вы хотите новый список с удаленными элементами, как когда пользователь ищет свой список контактов? Просто создайте функцию, которая возвращает правда или ложь на основе его входа (предикат).

const isEven = (x) => x % 2 === 0;

И подключить его в Фильтр применить это против целого списка.

const numbers = [1, 2, 3, 4, 5];
numbers.filter(isEven);
// [2, 4]

✅ Array.recuce делает все это, и больше

Когда карта и Фильтр Не хватает, вы приносите большие оружия. Уменьшить Метод может сделать то, что карта / Фильтр Делайте, и все остальное, что включает в себя циклирование на массив.

Например, как бы вы рассчитывали общий возраст ваших пользователей? Возникая наших пользователей составляют 25, 22, 29 и 30.

const users = [
  { name: 'Marie', age: 25 },
  { name: 'Ken', age: 22 },
  { name: 'Sara', age: 29 },
  { name: 'Geoff', age: 30 },
];

карта и Фильтр Может только вернуть массивы, но нам нужен Номер !

users.map(?);
users.filter(?);

// Nope! I need a number, not arrays.

Если бы у нас были петли, мы просто прошли Пользователи И все возрасты в прилавке! Ну что если я тебе сказал, что это еще проще с Уменьшить ?

users.reduce((total, currentUser) => total + currentUser.age, 0);
// 106

Выйдите из этого

Я думаю, что самый простой способ переварить это в console.log на каждом шаге.

const users = [
  { name: 'Marie', age: 25 },
  { name: 'Ken', age: 22 },
  { name: 'Sara', age: 29 },
  { name: 'Geoff', age: 30 },
];

const reducer = (total, currentUser) => {
    console.log('current total:', total);
    console.log('currentUser:', currentUser);
    
    // just for spacing
    console.log('\n');
    
    return total + currentUser.age;
}

users.reduce(reducer, 0);

Вот скриншот из Chrome devtools.

Сломай

Как ты только что видел, Array.reduce принимает два параметра.

Редуктор
Начальное значение (необязательно)

Редуктор – это функция, выполняя всю работу. Как Уменьшить Петли по вашему списку он питает два параметра для вашего редуктора.

Аккумулятор
Текущее значение

Текущее значение является самоснабжением, как при использовании массив [я] в обычной петле. Аккумулятор, тем не менее, является страшно-страшным сроком информатики, который на самом деле просто.

Аккумулятор – это возможное возвращаемое значение

Когда вы зацикливаетесь через Пользователи Как вы отслеживаете их общий возраст? Тебе нужна …| счетчик переменная для его удержания. Это аккумулятор. Это возможное значение Уменьшить выплю, когда это сделано.

На каждом шаге в петле он питает последний аккумулятор и текущий элемент к вашему редуктору. Какой бы ни был редуктор возвращается, становится следующим аккумулятором. Цикл заканчивается, когда список закончен, и у вас есть одно пониженное значение.

Начальное значение необязательно

Второй параметр для Уменьшить является начальным значением. Если вы не поставляете его, Уменьшить по умолчанию на первом элементе списка.

Это хорошо, если вы суммируете простые номера.

[1, 2, 3].reduce((total, current) => total + current);
// 6

Но ломается, если вы используете объект или массив, потому что вы не должны добавлять эти вещи.

[{ age: 1 }, { age: 2 }, { age: 3 }]
    .reduce((total, obj) => total + obj.age);
    
// [object Object]23
// Broken result, use an initial value.

В этом случае вы должны дать начальное значение 0 Отказ

[{ age: 1 }, { age: 2 }, { age: 3 }]
    .reduce((total, obj) => total + obj.age, 0);
    
// 6
// Initial value fixes it.
// 0 + 1 + 2 + 3 = 6

Давайте воссоздать уменьшить

Что я не могу создать, я не понимаю – Ричард Фейнман

Надеюсь, я так помог тебе до сих пор. Теперь пришло время написать свой собственный Уменьшить Функция, чтобы действительно забить этот дом.

Это будет функция, которая принимает три параметра.

Редуктор
Начальное значение
Массив для работы на

Для этого демонстрационное значение не является необязательным.

const reduce = (reducer, initialValue, array) => {
    let accumulator = initialValue;

    for (let i = 0; i < array.length; i++) {
        const currentItem = array[i];
        accumulator = reducer(accumulator, currentItem);
    }
    
    return accumulator;
}

Удивительно всего 10 строк кода, 6 ключевых шагов. Я пойду один за другим.

Определить Уменьшить и его три параметра.
Инициализировать Аккумулятор Использование предоставленного InitivalValue Отказ Эта переменная изменит каждый цикл.
Начните зацикливаться над массивом.
Захватить массив CurrentiTem за этот цикл.
Позвоните Редуктор с Аккумулятор и CurrentiTem Сохранение его как новый Аккумулятор Отказ
Когда цикл закончен и Аккумулятор Сделано меняется, вернуть его.

Разная история

Я хотел больше поговорить об истории Уменьшить И редукторы, но не совсем уверены, где это соответствовать. Тем не менее, это очень интересно!

Редукторы древние

Redux Заставили редукторы остыть для разработчиков JavaScript, но он их не изобрел. На самом деле не понятно, кто придумал термин, но вот несколько ссылок, которые я выкопал.

Теория рекурсии (1952)

Эта книга С 1952 года обсуждается Уменьшить от метаматематической перспективы, ссылаясь на него как сложить Отказ

Руководство пользователя LISP (1960)

Руководство пользователя Lisp Manage С 1960 года есть раздел на Уменьшить функция.

Введение в функциональное программирование (1988)

Эта книга С 1988 года разговоры об использовании Уменьшить Чтобы повернуть списки в другие значения.

Нижняя линия – это старая тема. Чем больше вы изучаете компьютерную науку, тем больше вы понимаете, что в основном повторно упаковывая концепции, обнаруженные десятилетия назад.

Чем больше вы изучаете компьютерную науку, тем больше вы понимаете, что в основном повторно упаковывая концепции, обнаруженные десятилетия назад.

Упражнения для вас

Ради времени, мы заканчиваем здесь. Однако я надеюсь, что я хотя бы намекнул, что Уменьшить невероятно мощный и полезный путь за пределами только суммирования номеров.

Если вы заинтересованы, попробуйте эти упражнения и Сообщите мне о них позже Отказ Я могу написать следующую статью на них.

Переосмысление . Array.map Функция с использованием Уменьшить Отказ
Переосмысление . Array.Filter Функция с использованием Уменьшить Отказ
Переосмысление . Array.some Функция с использованием Уменьшить Отказ
Переосмысление . Array.ewly Функция с использованием Уменьшить Отказ
Переосмысление . Array.find Функция с использованием Уменьшить Отказ
Переосмысление . Array.Foreach Функция с использованием Уменьшить Отказ
Поверните массив в объект, используя Уменьшить Отказ
Поверните 2D массив в 1D (плоский) массив, используя Уменьшить Отказ

Хотите бесплатную коучинг?

Если вы хотите запланировать бесплатный 15-30 минутный призыв, чтобы обсудить вопросы в области фронта, касающиеся кода, интервью, карьеры или чего-либо еще Следуй за мной в Twitter и DM мне Отказ

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

Спасибо за чтение

Для большего количества контента посмотрите https://yazeedb.com!

До скорого!