Рубрики
Без рубрики

Демистифицирующий Array.reduce (): Как это понять и когда использовать его в вашем коде

Давайте уточним, раз и навсегда, как уменьшить работу и когда его использовать. Помечено JavaScript, узел, реагировать, начинающими.

ES5 и более поздние версии JavaScript принесли несколько новых методов для обработки массивов. Многие из них стали лучшими практикой для общих задач с массивами и JavaScript намного лучше с ними.

Array.map () и Array.filter () Есть два примера ежедневных добавок ES5 Driver ES5, которые являются скобами для большинства разработчиков JS.

Одинаково полезный, но часто менее понятый инструмент в комплекте Array.reduce () Отказ В последнее время я использовал Уменьшить Чаще, но потребовалось некоторое время, чтобы почувствовать естественное, и я часто вижу, как другие разработчики, борющиеся с ним … или просто не используете его вообще.

Уменьшить часто учил не так и, следовательно, неправильно понял

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

Наиболее распространенным примером при обучении редукторов является чем-то подобное:

const array = [1, 2, 3, 4];
const sum = array.reduce((accumulator, currentItem) => {
    return accumulator + currentItem;
}, 0);

// sum = 10

Это довольно чисто показывает, как функция редукторов. Вы звоните Уменьшить () На массиве и пропустите его начальное значение, а также функцию, которая запускается для каждого элемента этого массива.

Пропущенной функции, Уменьшить Отправляет:

1) Текущий предмет и 2) Значение, возвращаемое предыдущим обратным вызовом (или исходным состоянием, при вызове в первый раз)

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

В результате в этом случае редуктор сводится к значениям массива и возвращает общее значение.

Итак … Добавление массивов чисел, это то, что все уменьшается?

Я видел этот пример так много раз, но редко видел объяснения, которые стали намного дальше.

“Хм, интересно”. Я бы подумал, как я продолжал с моим днем.

Итак, какая реальная сделка с редукторами? Для чего они на самом деле хорошо?

Вот реальная сила:

Редукторы полезны, когда вы хотите обработать массив, но выведите то, что не является массивом

Это действительно то, к чему это сводится к, и это полезно Очень часто Отказ

Ведь не то, что мы делаем в примере выше? Мы принимаем в массиве и возвращая целое число. В этом контексте это имеет некоторое смысл, что мы «уменьшаем» массив, но нам не всегда нужно что-то выводить так просто, как целое число.

Возьми этот пример:

const trips = [{type: 'car', dist: 42}, {type: 'foot', dist: 3}, {type:'flight', dist: 212}, {type: 'car', dist: 90}, {type: 'foot', dist: 7}] 

const distanceByType = trip.reduce((out, curr) => {
    const { type, dist } = curr;
    if (out[type]) {
        out[type] += dist;
    } else {
        out[type] = dist;
    }
    return out;
}, {});

// distanceByType = {car: 132, foot: 10, flight: 212};

Итак, здесь мы принимаем в массиве, но возвращая объект сумм, а не только одного.

Здесь мы начинаем видеть сущность того, что действительно редуктор:

Редуктор – это трансформатор

Это берет в массиве и превращает его в что-то еще.

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

  • Иметь массив пользователей, но хочу выводить строку, как, Майк, Бека и 3 других будет посещать ? Редуктор отлично подходит для этого!

  • Имейте массив статей и хотите, чтобы объект с ними ключи от категории? Редуктор отлично подходит для этого!

Использовать случаи продолжаются и включены.

Я действительно надеюсь, что поможет и понравится уточнить вещи дальше в комментариях, если смогу.

Получил использование для Уменьшить Что ты любишь? Комментарий ниже, и я добавлю его в статью 🚀

Оригинал: “https://dev.to/nickyhajal/demystifying-arrayreduce-how-to-understand-it-and-when-to-use-it-in-your-code-5b96”

Читайте ещё по теме: