Сделайте свой код JavaScript более читабельным с помощью библиотеки Lodash.
При использовании JavaScript вам часто придется тесно работать с массивами, объектами и строками и манипулировать ими. Традиционно это потребует от вас написания собственных методов, но если вы хотите использовать некоторые готовые методы, вы можете использовать библиотеку Lodash.
Зачем использовать Лодаш?
Используя Lodash, вы можете легко сократить объем кода, который вам потребуется написать для работы с массивами, строками и объектами. Это сделает ваш код более читабельным и лаконичным.
Настраивать
Использование нпм:
$ npm i — save lodash
Использование CDN:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
В Node.js:
// Load the full build.
var _ = require('lodash');
// Load the core build.
var _ = require('lodash/core');
// Load the FP build for immutable auto-curried iteratee-first data-last methods.
var fp = require('lodash/fp');
// Load method categories.
var array = require('lodash/array');
var object = require('lodash/fp/object');
// Cherry-pick methods for smaller browserify/rollup/webpack bundles.
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');
Важные методы
равно
_.isEqual(value, other)
Вы можете подумать, что это похоже на метод равенства строк, но этот метод очень удобен для сравнения объектов. Он будет сравнивать не только структуру, но и каждое значение, поскольку это глубокое сравнение.
const obj1 = {
name: ‘Sumeet’,
age: 30,
location: {
state: ‘AR’
}
};
const obj2 = {
name: ‘Sumeet’,
age: 30,
location: {
state: ‘AR’
}
};
console.log(_.isEqual(obj1, obj2)); //true
obj2.name = "lilo"
console.log(_.isEqual(obj1, obj2)); //false
Это будет очень полезно, если вы поддерживаете какое-то состояние и хотите вызывать какую-либо службу/метод только в том случае, если пользователь что-то изменил в этом объекте.
Примечание. Как правило, это быстрее, чем другие методы сравнения объектов, а также является наиболее распространенным способом.
пусто
_.isEmpty(value)
Это очень удобный метод для быстрой проверки объекта, который может быть нулевым, неопределенным, пустым массивом или пустым объектом, обернутым в 1.
const obj1 = { name: ‘foo’ };
console.log(_.isEmpty(obj1)); // false
const obj2 = {};
console.log(_.isEmpty(obj2)); // true
const array1 = [];
console.log( _.isEmpty(array1)); // true
const array2 = [1, 2, 3];
console.log(_.isEmpty(array2)); // false
const nullValue = null;
console.log(_.isEmpty(nullValue)); // true
const undefinedValue = undefined;
console.log(_.isEmpty(undefinedValue)); // true
Это особенно удобно для проверки наличия пустого объекта, где вы можете использовать это вместо стандартного Object.keys(obj1).length === 0.
раз
_.times(value, methodName)
Этот метод принимает 2 параметра, а затем вызывает предоставленный метод столько раз, сколько указано значением первого параметра, и возвращает данные в массиве.
function getRandomInteger() {
return Math.round(Math.random() * 100);
}
var result = _.times(5, getRandomNumber);
// result => [64, 70, 29, 10, 23]
Это особенно полезно при создании фиктивных данных.
отклонить
_.debounce(methodName, timeInMilliSec)
Этот метод вызовет имя метода, переданное только после второго параметра, эквивалентного времени в миллисекундах.
function validateEmail() {
//check here if user entered proper email format and show error
}
var emailInputField = document.getElementById("email-field");
emailInputField.addEventListener("keyup", _.debounce(validateEmail, 500));
В приведенном выше примере пользователю будет показана ошибка формата электронной почты только через 500 мс после последнего нажатия клавиши. Таким образом, вы можете не показывать ему ошибки при каждом нажатии клавиши.
получить
_.get(object, path, [defaultValue])
Это очень полезный метод для получения значения внутри объекта по определенному пути, если он существует. Если значение не существует в пути, вы можете назначить значение по умолчанию
const user = {
name: ‘Sumeet’,
age: 30,
location: {
state: ‘AR’
}
};
console.log(_.get(user, 'location.state', {})); // AR
console.log(_.get(user, 'location.city', "NA")); //NA
Это очень удобно, если вам нужно проверить, существует ли какое-либо значение в ответе службы, прежде чем предпринимать какие-либо действия. Используя этот метод, вам не нужно добавлять кучу проверок undefined и null для вложенных объектов. И если вы используете это для доступа к объекту, он не вернет стандартную ошибку (Ошибка: невозможно прочитать свойство «xxx» из undefined), а вместо этого напрямую вернет значение по умолчанию, если поле отсутствует.
удалить заусенцы
_.deburr(value)
Это удалит все «комбинированные диакритические знаки», поэтому «é» станет «e».
_.deburr(“déjà vu”);// -> deja vu _.deburr(“Juan José”);// -> Juan Jose
Это особенно удобно, если ваш продукт поддерживает несколько языков или вам необходимо очистить данные перед их сохранением в БД. Это хорошая привычка зачищать текст для функции поиска, когда есть интернационализация и локализация.
cloneDeep
_.cloneDeep(value)
Это, наверное, метод, который я использовал очень часто. Он будет клонировать объект с его значениями без сохранения ссылок.
const user = {
name: ‘Sumeet’,
age: 30,
location: {
state: ‘AR’
}
};
const cloneUser = _.cloneDeep(user);
console.log(user.name === cloneUser.name); // false
console.log(cloneUser === user); // false
Это особенно полезно, если вы планируете изменить значения исходного объекта, но при этом хотите сохранить его копию для дальнейшего использования.
сортировать по и упорядочивать по
_.sortBy(collection, [iteratees=[_.identity]])
Вы можете использовать этот метод для сортировки массива объектов в порядке возрастания на основе определенного условия или значения внутри объекта, что очень удобно.
const users = [
{ 'user': 'fred', 'age': 48 },
{ 'user': 'barney', 'age': 36 },
{ 'user': 'frank', 'age': 40 },
{ 'user': 'bailey', 'age': 34 }
];
//sort users by age
console.log(_.sortBy(users, [function(user) { return user.age }]));
// output:
{'user':'bailey','age':34},
{'user':'barney','age':36},
{'user':'frank','age':40},
{'user':'fred','age':48}]
_.orderBy(collection, [iteratees=[_.identity]], [orders])
Метод orderBy похож на sort by, но здесь вы также можете определить, хотите ли вы получить результат в порядке возрастания или убывания.
const users = [
{ 'user': 'fred', 'age': 48 },
{ 'user': 'barney', 'age': 36 },
{ 'user': 'frank', 'age': 50 },
{ 'user': 'bailey', 'age': 34 }
];
// sort by user in descending order
console.log(_.orderBy(users, ['user'], ['asc']));
// output:
[{'user':'bailey','age':34},
{'user':'barney','age':36},
{'user':'frank','age':40},
{'user':'fred','age':48}]
// sort by user in ascending order and age by descending order
console.log(_.orderBy(users, ['user', 'age'], ['asc', 'desc']));
// output:
{'user':'bailey','age':34},
{'user':'barney','age':36},
{'user':'frank','age':50},
{'user':'fred','age':48}]
Заключение
Lodash — отличная вспомогательная библиотека, предоставляющая множество полезных методов, которые упростят вашу работу и упростят код. Это одна из самых популярных библиотек JavaScript. Библиотека очень легкая (69 КБ), эффективная, популярная и любимая (более 18 000 звезд на Github). Я настоятельно рекомендую вам включить эту библиотеку в ваш новый или существующий проект, и вы не будете разочарованы.
Если вам понравилась эта статья, посмотрите и другие:
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
