Просто магия: 9 полезных приемов для работы с JavaScript-кодом
Писать JavaScript-код можно по-разному, но что если есть способы делать это быстрее и проще? Всего-то нужно знать маленькие хитрости, и код будет чище и понятнее. Некоторыми из них в своем блоге поделился разработчик программного обеспечения Майк Чен.
1. Проверка параметров метода
JavaScript позволяет задавать значения по умолчанию для параметров. Так можно проверять параметры метода.
const isRequired = () => { throw new Error('param is required'); };
const print = (num = isRequired()) => { console.log(`printing ${num}`) };
print(2);//printing 2
print()// error
print(null)//printing null
2. Форматирование JSON-кода
Вероятно, вы уже знакомы с методом JSON.stringify, который преобразует значения JavaScript в строку JSON, но знаете ли вы, что с помощью stringify можно форматировать вывод?
Метод stringify принимает три входных параметра — value, replace и space. Последние два — необязательные, поэтому их редко кто использует. Чтобы сделать отступ в JSON, нужно использовать параметр space как в коде ниже:
console.log(JSON.stringify({name:"John",Age:23},null,'\t'));
>>>
{
"name": "John",
"Age": 23
}
По ссылке найдете компонент React с примером использования метода stringify.
3. Получение уникальных значений из массива
Чтобы получить уникальные значения из массива, в основном используется метод filter. Вместо него можно использовать новый объект Set — это особый вид коллекции значений, по которым можно выполнять обход в порядке вставки элементов. Вот как он работает:
let uniqueArray = [...new Set([1, 2, 3, 3,3,"school","school",'ball',false,false,true,true])]; >>> [1, 2, 3, "school", "ball", false, true]
4. Удаление ложных значений из массивов
Иногда бывает нужно удалить ложные значения из массива — это значения, которые считают ложными, когда встречаются в контексте Boolean. В JavaScript существует шесть ложных значений:
undefined;null;NaN;0;“”(пустая строка);False.
Один из самых простых способов отфильтровать ложные значения — использовать приведенную ниже функцию:
myArray
.filter(Boolean);
Если нужно внести изменения в массив, а затем отфильтровывать новый массив, можно попробовать следующий способ. Но помните, что исходный массив myArray остается неизменным.
myArray
.map(item => {
// Do your changes and return the new item
})
.filter(Boolean);
5. Слияние нескольких объектов
Для слияния двух или более классов можно использовать следующий подход:
const user = {
name: 'John Ludwig',
gender: 'Male'
};
const college = {
primary: 'Mani Primary School',
secondary: 'Lass Secondary School'
};
const skills = {
programming: 'Extreme',
swimming: 'Average',
sleeping: 'Pro'
};
const summary = {...user, ...college, ...skills};
В JavaScript … или spread — оператор расширения (разброса), который позволяет расширять выражения в местах, где предусмотрено использование нескольких аргументов. Подробнее о его использовании можно почитать здесь.
6. Сортировка числовых массивов
Массивы JavaScript содержат встроенный методом сортировки. Он преобразует элементы массива в строки и по дефолту выполняет лексикографическую сортировку. Это может вызвать проблемы при сортировке числовых массивов. Вот как ее решить:
[0,10,4,9,123,54,1].sort((a,b) => a-b); >>> [0, 1, 4, 9, 10, 54, 123]
С помощью кода выше для сравнения двух элементов в массиве чисел методом сортировки предоставляется функция, которая помогает получить правильный вывод.
7. Отключение щелчка правой кнопки мыши на сайте
Если когда-нибудь нужно будет запретить пользователям щелкать правой кнопкой мыши на веб-странице, воспользуйтесь следующей функцией:
<body oncontextmenu="return false">
<div></div>
</body>
8. Деструктуризация с помощью псевдонимов
Деструктурирующее присваивание — это специальный синтаксис, который позволяет «распаковать» значения из массивов или объектов в отдельные переменные. Вместо того чтобы придерживаться существующей переменной объекта, можно переименовать их на свое усмотрение.
const object = { number: 10 };
// Grabbing number
const { number } = object;
// Grabbing number and renaming it as otherNumber
const { number: otherNumber } = object;
console.log(otherNumber); //10
9. Получение последних элементов массива
Если нужно получить элементы с конца массива, можно использовать метод slice с отрицательными целыми числами.
let array = [0, 1, 2, 3, 4, 5, 6, 7] console.log(array.slice(-1)); >>>[7] console.log(array.slice(-2)); >>>[6, 7] console.log(array.slice(-3)); >>>[5, 6, 7]
Вот и все!
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: