JavaScript: 7 полезных мелочей

Автор заметки, перевод которой мы сегодня публикуем, говорит, что в JavaScript, как и в любом другом языке программирования, можно обнаружить множество маленьких хитростей, предназначенных для решения самых разных задач, как простых, так и довольно сложных. Некоторые из подобных приёмов широко известны, а другие, не такие распространённые, могут приятно удивить тех, кто о них не знает. Сейчас мы рассмотрим 7 полезных приёмов программирования на JavaScript.

1. Получение уникальных значений массива

В JavaScript сформировать массив, содержащий лишь уникальные значения из другого массива, вероятно, проще, чем вы думаете:

var j = [...new Set([1, 2, 3, 3])]
// [1, 2, 3]

Мне нравится то, как эту задачу можно решить, совместно используя оператор ... и тип данных Set.

2. Массивы и логические значения

Вам когда-нибудь нужно было убрать из массива значения, приведение которых к логическому типу даёт false? Например, это такие значения, как 0, undefined, null, false. Возможно, вы не знали, что для того, чтобы это сделать, можно поступить так:

myArray
    .map(item => {
        // ...
    })
    // Избавляемся от ненужных значений
    .filter(Boolean);

Как видите, для того, чтобы избавиться от всех подобных значений, достаточно передать Boolean методу массивов .filter().

3. Создание по-настоящему пустых объектов

Уверен в том, что вы можете создать объект, который кажется пустым, воспользовавшись синтаксисом объектного литерала: {}. Но такому объекту будет назначен прототип (__proto__), у него будет метод hasOwnProperty() и другие методы объектов. Для того чтобы создать по-настоящему пустой объект, который можно, например, использовать в качестве «словаря», можно поступить так:

let dict = Object.create(null);

// dict.__proto__ === "undefined"
// У объекта нет никаких свойств до тех пор, пока вы их в явном виде не добавите к нему

В объекте, созданном таким способом, нет свойств и методов, которые не добавлены в него самим программистом.

4. Слияние объектов

Тем, кто пишет на JavaScript, всегда было нужно создавать такие объекты, которые включали бы в себя содержимое других объектов. Особенно актуальной эта задача стала тогда, когда в JavaScript появились классы, тогда, когда программистам приходится работать с чем-то вроде программных представлений виджетов. Вот как создать новый объект на основе нескольких других объектов:

const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };
const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };

const summary = {...person, ...tools, ...attributes};
/*
Object {
  "computer": "Mac",
  "editor": "Atom",
  "eyes": "Blue",
  "gender": "Male",
  "hair": "Brown",
  "handsomeness": "Extreme",
  "name": "David Walsh",
}
*/

Оператор ... значительно упрощает решение задачи слияния объектов.

5. Обязательные параметры функций

Задание значений аргументов функций по умолчанию стало отличным расширением возможностей JavaScript. А вот как сделать так, чтобы без передачи некоторых обязательных параметров функции попросту отказывались бы работать:

const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

// Тут будет выдана ошибка, функции не передан аргумент name
hello();

// Здесь тоже будет ошибка
hello(undefined);

// Эти варианты вызова функции будут работать нормально
hello(null);
hello('David');

Перед нами — дополнительный уровень проверки того, что передаётся функциям.

6. Деструктурирующее присваивание и новые имена извлечённых свойств объектов

Деструктурирование — это новая полезная возможность JavaScript, но иногда свойствам, извлекаемым из объектов, нужно назначать имена, отличающиеся от тех, которые они имеют в этих объектах. Вот как это сделать:

const obj = { x: 1 };

// Теперь мы можем работать с obj.x как с x
const { x } = obj;

// А теперь obj.x для нас выглядит как otherName
const { x: otherName } = obj;

Этот приём полезен в тех случаях, когда нужно избежать конфликта имён переменных или констант.

7. Разбор строк запросов

Многие годы мы, для разбора строк запросов, писали регулярные выражения, но эти времена прошли. Теперь для решения этой задачи можно воспользоваться замечательным API URLSearchParams:

// Предполагается, что мы работаем с "?post=1234&action=edit"

var urlParams = new URLSearchParams(window.location.search);

console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"

Использовать API URLSearchParams куда легче, чем решать те же задачи, применяя регулярные выражения.

Итоги

Современный JavaScript очень быстро развивается, в нём постоянно появляются различные полезные улучшения. Но совершенствование языка не означает, что программистам не нужно думать над кодом и искать эффективные решения различных задач, встающих перед ними. Надеемся, те маленькие хитрости JavaScript, о которых мы сегодня говорили, вам пригодятся.

Уважаемые читатели! Знаете какие-нибудь полезные приёмы JS-программирования? Если так — просим ими поделиться.