Lodash — это служебная библиотека Javascript, которая помогает вам работать с массивами, объектами, строками и просто писать меньше функций в целом. Давайте поговорим о Lodash и некоторых из его наиболее полезных методов!
1.) _.получить()
Метод _.get() может помочь нам найти элемент в объекте. Если элемент не найден по указанному пути, мы можем указать значение по умолчанию для возвращаемого метода _.get().
const foodObj = {
favFoods: [
“Pizza”,
“Chicken Nuggets”,
“Lasagna”,
{ favCandy: “Sour Boys Candy” },
],
};
// We will use the _.get() method to find my favorite candy.
const myFavCandy = _.get(foodObj, ‘favFoods[3].favCandy’, ‘Chocolate’)
// mymyFavCandy => “Sour Boys Candy”
console.log(myFavCandy)
Вот несколько вещей, на которые стоит обратить внимание:
- Метод _.get() может принимать три аргумента, первым из которых является объект, из которого мы хотим получить элемент. Второй – путь. Третий — это значение по умолчанию, которое мы хотим вернуть, если элемент не найден.
- Путь к элементу представляет собой строку.
- Перенастраиваемое значение по умолчанию может быть любым типом данных (объект, строка, число, ноль и т. д.). По умолчанию метод _.get() возвращает неопределенное значение, если элемент не удалось найти.
2.) _.найти()
Вы можете подумать, что метод _find() похож на метод _.get(), и да, оба они возвращают искомое значение, но есть несколько ключевых отличий, которые важно понимать. Давайте сначала посмотрим на метод _.find().
const adoptableDogs = [
{ name: “Rex”, age: 7, breed: “German Sheperd” },
{ name: “Sundance”, age: 4, breed: “Timber wolf — Mutt” },
{ name: “Milo”, age: 0.8, breed: “Husky” },
{ name: “Snowflake”, age: 3, breed: “White Lab” },
{ name: “Chip”, age: 3, breed: “Pug” },
{ name: “Bolt”, age: 5, breed: “White Lab” },
];
// The _.find method will iterates over an object or an array and retun the first element that returns true.
const myNewBestFirend = _.find(
adoptableDogs,
// This function will be called on every iteration.
(obj) => obj.breed === “White Lab” && obj.age > 2,
2
);
// myNewBestFirend => { name: ‘Snowflake’, age: 3, breed: ‘White Lab’ }
console.log(myNewBestFirend);
Типа круто правда? Мы должны говорить об этих различиях.
- Метод _.find() также принимает три аргумента, но в отличие от метода _.get() первым аргументом может быть массив или объект.
- Второй аргумент — это функция, которая будет срабатывать на каждой итерации. Я использовал функцию в приведенном выше примере, чтобы закрепить эту концепцию. Это важно понимать, и мы надеемся, что это поможет продемонстрировать возможности.
- Третий аргумент — это начальный индекс коллекции. Поскольку метод _.find() перебирает каждый элемент в коллекции. Производительность — это то, о чем следует подумать при работе с большими наборами/коллекциями данных. Вы можете указать начальный индекс для метода _.find(), с которого будет начинаться поиск.
3.) _.карта()
Метод _.map будет перебирать коллекцию (массив, объект) и возвращать новый массив на основе возвращаемого значения функции, вызываемой на каждой итерации. Давайте посмотрим.
const adoptableDogs = [
{ name: “Rex”, age: 7, breed: “German Sheperd” },
{ name: “Sundance”, age: 4, breed: “Timber wolf — Mutt” },
{ name: “Milo”, age: 0.8, breed: “Husky” },
{ name: “Snowflake”, age: 3, breed: “White Lab” },
{ name: “Chip”, age: 3, breed: “Pug” },
{ name: “Bolt”, age: 5, breed: “White Lab” },
];
// The _.map method will iterate over the adoptableDogs array and return a new array with all of the dogs’ names.
const adoptableDogsNames = _.map(adoptableDogs, (dog) => dog.name);
// adoptableDogsNames => [ ‘Rex’, ‘Sundance’, ‘Milo’, ‘Snowflake’, ‘Chip’, ‘Bolt’ ]
console.log(adoptableDogsNames);
Как видите, метод _.map() возвращает новый массив, содержащий только имена собак в качестве элементов массива.
4 _.set()
Метод _.set() противоположен методу _.get(). Он _установит_ значение элемента по указанному пути. Первый аргумент — это объект или массив, второй — путь, а третий — значение, которое вы хотите установить.
const adoptableDogs = [
{ name: “Rex”, age: 7, breed: “German Sheperd” },
{ name: “Sundance”, age: 4, breed: “Timber wolf — Mutt” },
{ name: “Milo”, age: 0.8, breed: “Husky” },
{ name: “Snowflake”, age: 3, breed: “White Lab” },
{ name: “Chip”, age: 3, breed: “Pug” },
{ name: “Bolt”, age: 5, breed: “White Lab” },
];
// Sets the age of the dog at the second index of the adoptableDogs array to 1.
_.set(adoptableDogs, “[2].age”, 1);
// adoptableDogs[2] => { name: ‘Milo’, age: 1, breed: ‘Husky’ }
console.dir(adoptableDogs[2]);
5.) _.debounce()
На мой взгляд, это один из самых мощных методов lodash. Также может быть очень сложно понять, что он делает и когда вы можете захотеть его использовать. Метод _.debounce() вернет функцию. Функция, возвращаемая методом _.debounce(), будет откладывать свой вызов до тех пор, пока не пройдет указанное количество миллисекунд с момента последнего вызова функции.
Допустим, вы слушали событие DOM (прокрутка, изменение размера и т. д.) или маршрут API/Webhook, событие или API могут вызываться несколько раз в день или даже в секунду. Теперь предположим, что вы хотите запускать функцию только один раз в 24 часа, даже если событие или API вызывается несколько раз в секунду, и здесь поможет функция с отложенным отказом. Давайте взглянем на код!
const updateData = _.debounce(
() => {
// Code here! We might update some kind of data that might need to be updated once a day.
console.log(“Went and grabbed some new data”);
},
1000 * 60 * 60 * 24, // 1 Day Timeout
{
// defines if the invocation of the function is on the trailing or leading edge of the timeout.
leading: true,
trailing: false,
}
);
// We can call the function returned by the _.debounce method.
updateData();
Заключение
Lodash — очень полезная служебная библиотека, и в ней есть множество полезных методов! В этом посте мы едва коснулись lodash. Если вы хотите узнать больше о методе _.debounce и глубже погрузиться в него, ознакомьтесь с этой записью в блоге Дэвид Корбахо — устранение дребезга и регулирование на примерах.
Вы также можете следить за мной на GitHub, Youtube и Twitter.
