13,9 тыс подписчиков

Почему Lodash по-прежнему полезен?

6 августа 20206 авг 2020

4 мин

Оглавление

_.times
_.debounce
_.get

С выпуском ES6 и более поздними версиями JavaScript появилось множество методов, расширяющих функциональность языка. Например, появились новые методы массивов и строк, а также такие полезные операторы, как spread и rest.

Однако такие служебные библиотеки, как Lodash, продолжают оставаться актуальными, так как содержат множество полезных методов, всё ещё не доступных в JavaScript из коробки.

В этой статье мы рассмотрим несколько методов из Lodash, которые по-прежнему делают разработку проще, чем чистый JavaScript: times, get, set , debounce, deburr и keyBy.

_.times

Метод times позволяет вызвать функцию несколько раз, помещает результат вызова каждой функции в массив и возвращает массив.

Метод принимает два аргумента: количество вызовов функции и саму функцию для вызова. Например:

Результат:

[16, 83, 35, 87, 41]

_.debounce

Метод debounce используется для того, чтобы отложить вызов функции на определённое время. В JavaScript не существует простого способа сделать это.

Метод полезен для обработки событий, если мы хотим подождать, пока выполнится что-то, а затем вызвать функцию. Например, при поиске с ввода клавиатуры debounce будет ждать, пока пользователь закончит ввод, прежде чем вызвать API, удаляя ненужные обращения к серверу.

Например, учтём численный ввод:

Пишем следующий JavaScript код:

Он содержит функцию checkPositiveNumber, которая проверяет, является ли введённое значение положительным. Затем используем метод debounce, который принимает в качестве значений функцию и задержку вызова в миллисекундах.

Функция, которую возвращает debouce, имеет те же параметры, что и исходная функция, за исключением того, что её вызов задерживается на указанное время.

_.get

Метод get позволяет нам безопасным способом получить доступ к свойствам объекта. Даже если путь к свойствам не существует, метод вернёт undefined или значение по умолчанию вместо сбоя программы.

Например, дан следующий объект:

Доступ к свойствам obj можно получить следующим образом:

const result = _.get(obj, "foo.bar.baz.a", 1);

Первый аргумент — это объект, к значению свойства которого мы хотим получить доступ. Второй — это путь к свойству. Последний аргумент — значение по умолчанию. Получим 3 в качестве result.

В то же время, если путь не существует или undefined, мы получим undefined или значение по умолчанию. Например, если у нас есть:

const result = _.get(obj, "foo.bar.a", 1);

Мы получим 1 в result. Если мы не зададим значение по умолчанию:

const result = _.get(obj, "foo.bar.a");

Получим undefined. Не существует способа безопасно получить значение глубоко вложенного свойства, пока оператор опциональной последовательности не станет основным.

_.set

Метод set нужен, чтобы задать значение свойству объекта. Например, дан тот же объект, что мы использовали выше:

Задать значение свойства можно, написав:

_.set(obj, "foo.bar.a", 1);

Объект obj изменён. Как видим, метод может задавать значения для свойств, которые до этого не существовали. У исходного объекта не было foo.bar.a, он автоматически добавился после того, как было задано значение 1.

Получаем:

Это работает, даже если вложенный объект не существует. Напишем:

_.set(obj, "foo.foofoo.bar.a.b", 1);

Получим:

_.deburr

Чтобы удалить надстрочные знаки у символов строки, используем метод deburr. Он принимает строку и возвращает новую, где символы с надстрочными знаками заменены на символы без них.

Например, строка “S’il vous plaît”:

const result = _.deburr("S'il vous plaît");

Превращается в "S’il vous plait". У ‘i’ больше нет надстрочного знака.

_.keyBy

Метод keyBy принимает массив и имя свойства и возвращает объект со значением свойства в качестве ключей объекта. Например, у нас есть следующий массив:

const people = [
{ name: "Joe", age: 20 },
{ name: "Jane", age: 18 },
{ name: "Mary", age: 20 }
];

Используем keyBy:

const results = _.keyBy(people, "name");

Тогда results будет следующим:

Затем получим объект с именем 'Joe', написав:

results['Joe']

В чистом JavaScript нет простого способа сделать это без написания нескольких строк кода.

Заключение

В Lodash есть множество полезных функций, простых аналогов которым нет в чистом JavaScript.

Метод times для многократного вызова функции в одной строке; debounce для возврата новой функции с той же сигнатурой и кодом, что у исходной, но вызов которой отложен на заданное в миллисекундах время.

Для безопасного доступа и установки значений свойств есть методы get и set, не вызывающие сбоя при попытке доступа к несуществующему пути свойства или возвращающие значение undefined. Также существует метод deburr для замены символов с надстрочными знаками символами без знаков.

И, наконец, метод keyBy для преобразования массива в объект, который содержит значение заданного свойства каждой записи в качестве ключей и запись со значением имени заданного свойства в качестве значения.