Просто магия: 9 полезных приемов для работы с JavaScript-кодом

Богдан Мирченко

10.11.2021 14:22

Писать 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.

Пример использования 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]

Вот и все!