С выпуском ES6 и более поздними версиями JavaScript появилось множество методов, расширяющих функциональность языка. Например, появились новые методы массивов и строк, а также такие полезные операторы, как spread и rest.
Однако такие служебные библиотеки, как Lodash, продолжают оставаться актуальными, так как содержат множество полезных методов, всё ещё не доступных в JavaScript из коробки.
В этой статье мы рассмотрим несколько методов из Lodash, которые по-прежнему делают разработку проще, чем чистый JavaScript: times, get, set , debounce, deburr и keyBy.
_.times
Метод times позволяет вызвать функцию несколько раз, помещает результат вызова каждой функции в массив и возвращает массив.
Метод принимает два аргумента: количество вызовов функции и саму функцию для вызова. Например:
import * as _ from "lodash";
const getRandomInteger = () => Math.round(Math.random() * 100);
let result = _.times(5, getRandomInteger);
console.log(result);Результат:
[16, 83, 35, 87, 41]
_.debounce
Метод debounce используется для того, чтобы отложить вызов функции на определённое время. В JavaScript не существует простого способа сделать это.
Метод полезен для обработки событий, если мы хотим подождать, пока выполнится что-то, а затем вызвать функцию. Например, при поиске с ввода клавиатуры debounce будет ждать, пока пользователь закончит ввод, прежде чем вызвать API, удаляя ненужные обращения к серверу.
Например, учтём численный ввод:
<input type="number" />
Пишем следующий JavaScript код:
import * as _ from "lodash";
const checkPositiveNumber = e => {
console.log(+e.target.value > 0);
};
const numInput = document.querySelector("input[type=number]");
numInput.addEventListener("input", _.debounce(checkPositiveNumber, 600));Он содержит функцию checkPositiveNumber, которая проверяет, является ли введённое значение положительным. Затем используем метод debounce, который принимает в качестве значений функцию и задержку вызова в миллисекундах.
Функция, которую возвращает debouce, имеет те же параметры, что и исходная функция, за исключением того, что её вызов задерживается на указанное время.
_.get
Метод get позволяет нам безопасным способом получить доступ к свойствам объекта. Даже если путь к свойствам не существует, метод вернёт undefined или значение по умолчанию вместо сбоя программы.
Например, дан следующий объект:
const obj = {
foo: {
bar: { baz: { a: 3 } },
foo: { b: 2 },
baz: [1, 2, 3]
}
};Доступ к свойствам 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 нужен, чтобы задать значение свойству объекта. Например, дан тот же объект, что мы использовали выше:
const obj = {
foo: {
bar: { baz: { a: 3 } },
foo: { b: 2 },
baz: [1, 2, 3]
}
};Задать значение свойства можно, написав:
_.set(obj, "foo.bar.a", 1);
Объект obj изменён. Как видим, метод может задавать значения для свойств, которые до этого не существовали. У исходного объекта не было foo.bar.a, он автоматически добавился после того, как было задано значение 1.
Получаем:
{
"foo": {
"bar": {
"baz": {
"a": 3
},
"a": 1
},
"foo": {
"b": 2
},
"baz": [
1,
2,
3
]
}
}Это работает, даже если вложенный объект не существует. Напишем:
_.set(obj, "foo.foofoo.bar.a.b", 1);
Получим:
{
"foo": {
"bar": {
"baz": {
"a": 3
}
},
"foo": {
"b": 2
},
"baz": [
1,
2,
3
],
"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": {
"name": "Joe",
"age": 20
},
"Jane": {
"name": "Jane",
"age": 18
},
"Mary": {
"name": "Mary",
"age": 20
}
}Затем получим объект с именем 'Joe', написав:
results['Joe']
В чистом JavaScript нет простого способа сделать это без написания нескольких строк кода.
Заключение
В Lodash есть множество полезных функций, простых аналогов которым нет в чистом JavaScript.
Метод times для многократного вызова функции в одной строке; debounce для возврата новой функции с той же сигнатурой и кодом, что у исходной, но вызов которой отложен на заданное в миллисекундах время.
Для безопасного доступа и установки значений свойств есть методы get и set, не вызывающие сбоя при попытке доступа к несуществующему пути свойства или возвращающие значение undefined. Также существует метод deburr для замены символов с надстрочными знаками символами без знаков.
И, наконец, метод keyBy для преобразования массива в объект, который содержит значение заданного свойства каждой записи в качестве ключей и запись со значением имени заданного свойства в качестве значения.
Читайте также:
- Да не нужен вам фреймворк JavaScript!
- Создание тестового фреймворка JavaScript
- Лучшие практики JavaScript — производительность
Перевод статьи John Au-Yeung: Why is Lodash Still Useful?
