Array.reduce() может быть одним из самых сложных методов для новичков в изучении JavaScript. Но не бойтесь. Вместе мы рассмотрим простой пример, шаг за шагом, чтобы действительно закрепить ваше понимание.
Во-первых, давайте посмотрим на немного кода:
Это вся наша функция редукции, и хотя она может выглядеть не так уж и много кода, это чрезвычайно мощные три строки. Для начала мы инициализируем массив, а затем вызываем для него «.reduce()». (**Примечание** В этой статье кавычки используются просто для того, чтобы подчеркнуть тот фрагмент кода, который вы должны написать. НЕ включайте их в функцию сокращения.)
Затем наш метод сокращения принимает функцию обратного вызова, как показано ниже:
Я предпочитаю писать array.reduce() поэтапно просто потому, что это помогает мне понять, что я делаю. Далее мы передадим параметры.
Первым параметром в функции обратного вызова будет наше начальное значение. Это значение, которое мы будем добавлять, вычитать, умножать, делить или иным образом изменять. По умолчанию начальным значением является первое значение, указанное в нулевом индексе массива. Однако, если мы не хотим начинать со значения по умолчанию, мы можем объявить свое собственное, как показано ниже:
Видишь это там^? «5», которое передается после нашей функции обратного вызова, теперь является нашим значением по умолчанию. В этой простой демонстрации мы просто будем добавлять каждое число массива к 5, что, опять же, является нашим начальным значением.
Мы также должны дать имя нашему начальному значению, чтобы мы могли передать его в функцию обратного вызова. Я обычно использую «init», просто для простоты и ясности. Как вы можете видеть в приведенном выше коде, я передал «init» в качестве параметра в функцию обратного вызова.
Я понимаю, что последние два абзаца потенциально могут сбить с толку. Чтобы уточнить, «инициализация» теперь относится к «5», которая передается после функции обратного вызова. Если бы начальное значение не было объявлено, наш параметр «init» просто ссылался бы на первое значение массива, равное «1».
Далее мы объявляем еще один параметр, который будет использоваться для ссылки на текущее значение в нашей итерации. Делается это так:
Опять же, я хотел бы быть как можно более ясным, поэтому я просто использовал «curr» для обозначения текущего значения. В этой функции «curr» будет равно «1» при первом проходе, затем «2» при втором проходе, затем «3» и так далее, пока мы не доберемся до конца всего массива.
Затем мы добавляем наш последний фрагмент кода, например:
Мы возвращаем все, что хотим сделать, в наш массив. В приведенном выше фрагменте кода мы возвращаем наш init, равный 5, плюс наш curr, равный 1. Это дает нам «6», которое теперь является нашим значением init, а curr становится «2». Затем мы добавляем 2 + 6, что дает нам 8, что теперь «инициализация». Наш «curr» теперь равен 3. Делайте так, пока не пройдем весь массив. Перечисленная демонстрация показана ниже:
инициализация: 5, текущий: 1
инициализация: 6, текущий: 2
инициализация: 8, текущий: 3
инициализация: 11, текущий: 4
инициализация: 15, текущий: 5
вернуть 20
Вся эта функция array.reduce() вернет 20. Ключ в том, чтобы проходить ее медленно, шаг за шагом, отслеживая каждую переменную по мере выполнения итерации. Если вам нужно, напишите это, как я сделал выше. Это очень помогает тому, кто изучает процесс.
Надеюсь, эта статья помогла вам хоть немного! Надеюсь, теперь вы видите, насколько мощным и чистым может быть метод array.reduce(). Не стесняйтесь обращаться, если вам нужны какие-либо разъяснения или помощь. Удачи!
