Методы массивов: reduce, spread

JavaScript простым языком

Метод reduce

Метод reduce, пожалуй, самый сложный метод при работе с массивом, поэтому придется напрячь свои извилины и внимательно вникнуть в суть происходящего.

Метод работает с элементами слева направо.

Один из главных аргументов метода, как и у многих других – callback-функция. Данный метод необычен тем, что результат callback-функции сохраняется для следующего элемента. Т.е. при вызове callback на следующем элементе, метод позволяет получить доступ к значению вернувшемуся из этого же callback, но на предыдущем элементе. Грубо говоря, метод выполнил callback-функцию на первом элементе массива и переходя ко второму элементу, мы имеем доступ к значению которое вернул callback на первом элементе. Итак, пока ты не запутался и не упал на пол, нужно добавить в объяснения щепотку кода.

Давай с помощью данного метода посчитаем сумму всех элементов массива:

const numbers = [50, 50, 1];

const results = numbers.reduce(function(previousValue, \
currentElem){
   return previousValue + currentElem; 
}, 0);

results; // 101

Пожалуй, стоит объяснить, что здесь происходит.

Итак, разберем все аргументы, которые может принимать callback-функция:

• Первый аргумент (previousValue) – значение, которое вернула callback-функция для предыдущего элемента;

• Второй аргумент (currentElem) – текущий элемент;

• Третий аргумент – индекс текущего элемента в массиве;

• Четвертый аргумент – сам массив, по которому бежит метод reduce.

Мы в своей callback-функции использовали только первые два аргумента, т.к. для нашей задачи этого достаточно.

Наша callback-функция возвращает следующее значение:

return previousValue + currentElem;

Т.е. каждый новый элемент суммируется с предыдущим. По итогу мы и получим сумму всех элементов.

Второй аргумент метода reduce – начальное значение (initialValue) для всего метода. В нашем случае мы указали значение 0. Если бы мы указали, например, значение 100, то результатом работы метода стало бы значение не 101, а 201. Т.е., если тебе нужно к какому-то числу прибавить сумму всего массива, то это самое число нужно указать в качестве начального значения.

У данного метода есть брат акробат, который выполняет все то же самое и работает точно так же, но начинает пробегать по элементам справа налево и называется данный метод – reduceRight.

Оператор spread

Оператор spread не является методом массива, но достаточно полезен при работе с массивами, поэтому пройти мимо него – преступление.

Оператор выглядит достаточно непривычно относительно других ранее увиденных тобой операторов. Выглядит он так: ...

Да-да, этот оператор представляет собой три точки =)

С его помощью, можно объединять массивы:

const numbers = [3, 4, 5];
const arr = [1, 2, ...numbers];

arr; // [1, 2, 3, 4, 5]

Надеюсь ты заметил, что внутри определения нового массива, одним из элементов я указал другой массив с оператором spread перед ним. Тем самым мы объединяем 2 массива в один. Но можно не 2, а сколько угодно:

const numbers = [1, 2, 3];
const otherNumbers = [4, 5, 6];

const resultArr = [...numbers, ...otherNumbers];

resultArr; // [1, 2, 3, 4, 5, 6]

Так же с помощью данного оператора можно скопировать массив. Но запомни, что таким методом можно копировать только массивы с примитивными значениями (числа, строки, булевы значения ), но никак не массивы, элементами которых являются сложные объекты. Пример копирования:

const numbers = [1, 2, 3, 4, 5];
const copyNumbers = [...numbers];

copyNumbers; // [1, 2, 3, 4, 5]