Сокращение - одна из тех вещей, на понимание которых мне потребовалась целая вечность. Честно говоря, я все еще чувствую себя менее комфортно с сокращением, чем я хочу чувствовать. Вы знаете, что действительно знакомы с инструментом, когда чувствуете себя очень комфортно, используя его во многих ситуациях.
Это то, что я хочу дать вам сегодня - возможность почувствовать себя комфортно с помощью сокращения.
Версии reduce существуют в большинстве коллекций на большинстве языков, но мы конкретно будем говорить о JavaScript Array.reduce () - и, следовательно, Array.reduceRight (), поскольку он идентичен с одним небольшим изменением. Мы сделаем это на нескольких примерах, а затем выполним упражнение, которое вы можете выполнить. Если вы прочтете это, вы многое поймете о сокращении, но большую часть забудете завтра. Если вы потратите 10 минут и выполните упражнение, вы запомните все это надолго и дадите себе новый инструмент, который сможете добавить в свой набор инструментов.
Вкратце, что такое сокращение, сводится к тому, что он сводит весь массив к одному элементу. Это может быть математика, складывающая все элементы вместе; это может быть логическая логика, объединяющая все значения вместе. Это ограничено только вашим воображением.
Есть две версии: reduce () и reduceRight (). Reduce перебирает каждый элемент от индекса 0 до последнего элемента, reduceRight перебирает элементы от последнего элемента до индекса 0.
Каждый раз, когда reduce выполняет итерацию, он отслеживает, какая работа была сделана до сих пор, в промежуточном значении, а затем берет текущий элемент и каким-то образом объединяет его с работой, выполненной на данный момент.
Канонический пример - просуммировать все числа в массиве.
Давайте сначала посмотрим на пример использования стандартного метода с циклом forEach.
Теперь давайте посмотрим на то же самое с сокращением
Выше вы можете увидеть, как работает сокращение. Требуется обратный вызов. Первый параметр - результат предыдущей операции. Второй параметр - это текущий элемент. Когда мы складываем эти два значения, мы получаем промежуточную сумму. В нашем массиве 2, 6, 10 мы сначала складываем 2 и 6 и получаем 8. Затем это промежуточное значение, 8, снова передается в функцию с новым текущим элементом, которым является значение 10. 8 + 10 равно 18. Это наш окончательный результат.
Обратите внимание на пару вещей. Reduce выполняется на один раз меньше, чем количество элементов. При первом выполнении он использует первый элемент - в нашем случае номер 2 - в качестве первого параметра нашего обратного вызова, а второй элемент - в качестве второго параметра.
Первый параметр функции уменьшения - это обратный вызов, который выполняется на каждой итерации. Есть необязательный второй аргумент, который является начальным значением. Если мы передаем этот второй аргумент, то reduce выполняется один раз для каждого элемента массива, используя это начальное значение в качестве первого аргумента нашего обратного вызова вместо использования первого элемента.
Давайте возьмем значение 10 в качестве начального значения и посмотрим на это еще раз.
Теперь результат будет 28. 10 + 2 + 6 + 10.
Первый вызов передаст 10 в качестве результата и 2 в качестве аргументов нашего обратного вызова. Второй вызов будет 12 и 6, а третья и последняя итерация будет 18 и 10.
Это начальное значение очень полезно, если нам когда-либо нужно что-то сделать с каждым текущим элементом перед его объединением. Например, предположим, что мы суммируем стоимость товаров в корзине. Наша тележка будет выглядеть так:
Теперь нам сначала нужно умножить количество на стоимость, а затем добавить это к предыдущему результату. Элементы в массиве являются объектами. Таким образом, мы не можем добавить результат этой математики к объекту. Нам нужно добавить его к числу. Итак, мы используем начальное значение 0, чтобы получить правильный результат, добавив количество умноженное на стоимость к предыдущему значению на первой итерации. Это будет выглядеть так:
Каждая операция с сокращением может быть написана с использованием цикла forEach или for, но сокращение делает синтаксис намного более лаконичным.
Возможно, вам это еще не совсем удобно. Но практическая работа это исправит.
Пришло время попрактиковаться. Щелкните ссылку, чтобы перейти к упражнению, и следуйте инструкциям. Я гарантирую, что если вы выполните каждое упражнение, вы почувствуете себя ОЧЕНЬ комфортно с помощью reduce и удивитесь, как часто вы можете использовать его в своих программах. Просто следите за временами, когда вам нужно работать с элементами массива и объединять их вместе в какой-то один результат. Обращайтесь к решению ТОЛЬКО после того, как вы закончите упражнение, или если вы застряли, просто чтобы отстать, но выполнение работы - это то, как вы получите знания. Не обманывай себя.
Если вы хотите ДЕЙСТВИТЕЛЬНО изучить JavaScript, ознакомьтесь с нашей задачей 100 алгоритмов.
И не забудьте ознакомиться со всеми нашими замечательными курсами по JavaScript, Node, React, Angular, Vue, Docker и т. Д.
Удачного кодирования!
Нравится это обсуждение? Подпишитесь на нашу рассылку здесь.
Приходите к нам: thinkster.io | Facebook: @gothinkster | Twitter: @GoThinkster
