оу-йоу, Други! Как ваши дела? Стало скучно? У нас тут новое ч | Dev House Jun Front

оу-йоу, Други! Как ваши дела? Стало скучно?
У нас тут новое чтиво от Atom Baytovich (это его авторский канал с интересным контентом).
Минут за 5 прочтешь, за 30 - поймешь!


Сегодня хотелось бы рассказать и поделиться опытом с методами перебора массивов.

Зачем и почему?
На своём опыте я сталкивался много раз с перебором массивов, где приходилось переделывать данные под свои нужды, в частности если это:

• Работа на backend стороне, то создание понятной структуры для ответа на запрос к api,
• Если frontend, то подгонять данные под какие - то библиотеки или под выдачу информации пользователям.

Разберём следующие методы (не все существующие):

1. forEach (любимый, потому что самый простой)
2. map ( Оптимус Прайм)
3. filter (говорит сам за себя)
4. reduce (аккумулятор блин)
5. some (адвокат на один раз)

Начнём-с по порядку.

• 1-ый:
forEach был создан (ES5) для перебора массива, он имеет только синхронное поведение (в след.статье разберём про async)
О нём не имеет смысла много говорить.
Он не изменяет массив, у которого вызван этот метод.

Имеет след.синтаксис:
arr.forEach(function(item, index, array) { });

item - это сам элемент перебираемого массива,
index - сам индекс элемента
array - сам массив у которого был вызван этот метод

• 2-ой.
Почему Оптимус Прайм? Потому что трансформирует массив, создавая свой новый.
И он тоже имеет только синхронное поведение.
Обычно его используются тогда, когда нужно выполнить:
1. Некую последовательность действий над каждым элементом
2. вернуть значение, которое, может, было изменено.

Синтаксис:
(принимает в себя callback function)
Всё те же параметры, что и у forEach.

let newArr = arr.map(function(item, index, array) {
// возвращается новое значение вместо элемента
});


Зададимся вопросом "Что такое синхронное поведение у метода перебора массива"?

Это когда в асинхронной функции движок js не будет ждать выполнения задачи перебора массива.
Подробнее: у нас есть БОЛЬШОЙ массив данных, который нужно преобразовать(map) и после этого вызвать функцию-отправитель, передав туда наш новый массив.
Проблема встанет в том, что если перебор данных не успеет выполниться быстро, то запустится та самая функция -отправитель, в которой будет неполный или пустой массив данных.
Это нормальное поведение с точки зрения кода, но не нормальное с точки зрения логики.

(поговорим об этом в следующей статье подробнее, пока что просто знайте про это)

• 3-й.
Это filter, он работает по принципу: "Всё что мне подходит по условию, то и оставлю".
И он тоже синхронный.
let results = arr.filter(function(item, index, array) {
// если true - элемент добавляется к результату, и перебор продолжается
// возвращается пустой массив в случае, если ничего не найдено
});

Пример подробнее:
const numbers = [1,2,3,4,5,6,7,8];
let newNum = numbers.filter(num => num % 2);
Вернёт массив чисел, у которых есть остаток от деления на 2.

• 4-ый. (синхронный)
Используются для вычисления какого-нибудь единого значения на основе всего массива.
Синтаксис:
let value = arr.reduce(function(previousValue, item, index, array) {
//
}, [initial]);

previousValue - результат предыдущего вызова (равен initial при первом вызове)

Самый распространённый пример - подсчитать сумму цифр в массиве.
const getAverage = (arrNum) => {
const sum = arrNum.reduce((acc, number) => acc + number, 0);
return sum;
}
console.log( getAverage([1, 2, 3, 4, 5]
) )
Вывод: 15

• И последний. 5-ый. (синхронный)
Метод some. Почему адвокат на один раз?
Потому что проверяет соответствует ли по крайней мере один элемент в массиве условию, заданному в передаваемой функции.

Синтаксис:
arr.some((element, index, array) => { })

Пример:
const arr = [1, 2, 3, 4, 5];
const even = (element) => element % 2 === 0;
console.log(arr.some(even));
Вывод: true


Ну что, зашло? Вован нам пишет статьи за просто так, поэтому давайте его отблагодарим - залетай на его канал.
Там полезно, да и побольше таких постов.)