#1 Метод each в lodash

poster
В этом уроке мы разберем как использовать метод each в lodash.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

Всем привет. Сегодня мы с вами начинаем серию уроков о библиотеке lodash. Зачем она вообще нужна и что это такое? Она представляет собой набор полезных функций для работы с данными, для конвертирования их из одного формата в другой, фильтрации, маппинга и имеет много других фич.

Лично я ее использую на всех своих проектах. И большинство функций по работе с данными представляют для меня цепочки вызовов lodash функций. Сама библиотека, как вы можете видеть, на оффициальном сайте, достаточно небольшая. Она занимает в сжатом виде всего лишь 22 килобайта, но достаточно полезна.

Сегодня мы с вами познакомимся с очень популярным методом forEach или each, как его обычно используют и посмотрим чем он отличается он нативного метода javascript each.

Давайте посмотрим.

Нативно forEach обычно используют так

[1,2].forEach(function (item) {
  console.log(item);
});

допустим у нас есть массив из двух елементов и в forEach мы передаем функцию, в которой будет аргумент item. И выведем этот item.

Как мы видим, на экран вывелось 1 и 2. То есть мы в этой функции, которую мы передали в forEach получаем доступ к каждому елементу, тем самым проходя по циклу. Первым аргументом идет каждый елемент массива.

Давайте напишем тоже самое с помощью each lodash.

_.each([1, 2], function (item) {
  console.log(item);
});

Первым аргументом у нас идет массив, а вторым функция, внутри которой мы передаем этот же item. Если же мы выведем сдесь item, то мы увидим те же самые значения. Исключение составляет только то, что в нативном методе у нас вернулось undefined, а тут вернулся исходных массив. В чем же разница и зачем нам использовать lodash, если можно эту же функцию использовать нативно.

Очень часто нам нужно пройти по обьекту, а не по массиву. И с нативным forEach это сделать нельзя.

Например у нас есть обьект

var a = {id: 1, name: "some name"}

и мы хотим по нему пройти. Если мы попробуем

a.forEach

то мы увидим, что такой функции нет, поскольку у обьекта нет функции forEach.

В lodash же мы можем это сделать. Первым параметром передаем наш обьект, вторым параметром нашу функцию

_.each(a, function (item) {
  console.log(item);
})

то мы увидим, что у нас вывелись значения нашего обьекта. Так же мы видим, что в ответ нам вернулся наш обьект. Если мы добавим вторым аргументом index и выведем его, то мы увидим, что нам вывелись ключи вместе с значениями.

_.each(a, function (item, index) {
  console.log(item, index);
})

То есть внутри в этой функции мы можем получить не только значения полей, но и ключи.

Давайте напишем пример, который очень часто приходится использовать на реальных проектах.

Допустим, у нас есть пустой массив и мы хотим пройти по всем елементам нашего обьекта а и записать все значения этого обьекта в массив.

var arr = [];
_.each(a, function (item) {
  arr.push(item);
});

Если мы теперь посмотрим на arr, то мы видим, что это массив из двух елементов.

В следующем уроке мы разберем, что такое map и чем он отличается от нативного.

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
Moe Green
11 месяцев назад
Конечно, в последнем примере можно использовать Object.values. Но это решение не будет кросс-браузерным, верно?
monsterlessons
11 месяцев назад
Object.values вернет только массив значений. Если нужен также доступ к ключу, то это не поможет. Если вы не хотите рисковать, или каждый раз проверять поддерживается ли метод всеми браузерами, то проще использовать методы из библиотеки.
Moe Green
11 месяцев назад
да, именно. на одном боевом проекте видел употребление lodash часто и густо. )
Moe Green
11 месяцев назад
стрелочные функции можно свободно использовать в lodash (и в таких примерах) вместо обычных? _.each(arr, el => console.log(el))
monsterlessons
11 месяцев назад
Да, конечно.