#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 и чем он отличается от нативного.

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