Рубріки: Решения

Просто магия: 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]

Вот и все!

Останні статті

Что такое прокси-сервер: пояснение простыми словами, зачем нужны прокси

Прокси (proxy), или прокси-сервер — это программа-посредник, которая обеспечивает соединение между пользователем и интернет-ресурсом. Принцип…

21.11.2024

Что такое PWA приложение? Зачем необходимо прогрессивное веб-приложение

Согласитесь, было бы неплохо соединить в одно сайт и приложение для смартфона. Если вы еще…

19.11.2024

Как создать игру на телефоне: программирование с помощью конструктора

Повсеместное распространение смартфонов привело к огромному спросу на мобильные игры и приложения. Миллиарды пользователей гаджетов…

17.11.2024

Google Bard: эффективный аналог ChatGPT

В перечне популярных чат-ботов с искусственным интеллектом Google Bard (Gemini) еще не пользуется такой популярностью…

14.11.2024

Скрипт и программирование: что это такое простыми словами

Скрипт (англ. — сценарий), — это небольшая программа, как правило, для веб-интерфейса, выполняющая определенную задачу.…

12.11.2024

Дедлайн в разработке: что это такое простыми словами

Дедлайн (от англ. deadline — «крайний срок») — это конечная дата стачи проекта или задачи…

11.11.2024