Просто магия: 9 полезных приемов для работы с JavaScript-кодом
Писать JavaScript-код можно по-разному, но что если есть способы делать это быстрее и проще? Всего-то нужно знать маленькие хитрости, и код будет чище и понятнее. Некоторыми из них в своем блоге поделился разработчик программного обеспечения Майк Чен.
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
Вероятно, вы уже знакомы с методом 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
.
Чтобы получить уникальные значения из массива, в основном используется метод 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]
Иногда бывает нужно удалить ложные значения из массива — это значения, которые считают ложными, когда встречаются в контексте Boolean. В JavaScript существует шесть ложных значений:
undefined
;null
;NaN
;0
;“”
(пустая строка);False
.Один из самых простых способов отфильтровать ложные значения — использовать приведенную ниже функцию:
myArray .filter(Boolean);
Если нужно внести изменения в массив, а затем отфильтровывать новый массив, можно попробовать следующий способ. Но помните, что исходный массив myArray
остается неизменным.
myArray .map(item => { // Do your changes and return the new item }) .filter(Boolean);
Для слияния двух или более классов можно использовать следующий подход:
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
— оператор расширения (разброса), который позволяет расширять выражения в местах, где предусмотрено использование нескольких аргументов. Подробнее о его использовании можно почитать здесь.
Массивы JavaScript содержат встроенный методом сортировки. Он преобразует элементы массива в строки и по дефолту выполняет лексикографическую сортировку. Это может вызвать проблемы при сортировке числовых массивов. Вот как ее решить:
[0,10,4,9,123,54,1].sort((a,b) => a-b); >>> [0, 1, 4, 9, 10, 54, 123]
С помощью кода выше для сравнения двух элементов в массиве чисел методом сортировки предоставляется функция, которая помогает получить правильный вывод.
Если когда-нибудь нужно будет запретить пользователям щелкать правой кнопкой мыши на веб-странице, воспользуйтесь следующей функцией:
<body oncontextmenu="return false"> <div></div> </body>
Деструктурирующее присваивание — это специальный синтаксис, который позволяет «распаковать» значения из массивов или объектов в отдельные переменные. Вместо того чтобы придерживаться существующей переменной объекта, можно переименовать их на свое усмотрение.
const object = { number: 10 }; // Grabbing number const { number } = object; // Grabbing number and renaming it as otherNumber const { number: otherNumber } = object; console.log(otherNumber); //10
Если нужно получить элементы с конца массива, можно использовать метод 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]
Вот и все!
Прокси (proxy), или прокси-сервер — это программа-посредник, которая обеспечивает соединение между пользователем и интернет-ресурсом. Принцип…
Согласитесь, было бы неплохо соединить в одно сайт и приложение для смартфона. Если вы еще…
Повсеместное распространение смартфонов привело к огромному спросу на мобильные игры и приложения. Миллиарды пользователей гаджетов…
В перечне популярных чат-ботов с искусственным интеллектом Google Bard (Gemini) еще не пользуется такой популярностью…
Скрипт (англ. — сценарий), — это небольшая программа, как правило, для веб-интерфейса, выполняющая определенную задачу.…
Дедлайн (от англ. deadline — «крайний срок») — это конечная дата стачи проекта или задачи…