Хабрахабр

[Перевод] 9 полезных приёмов для тех, кто программирует на JavaScript

Автор материала, перевод которого мы сегодня публикуем, рассказывает о девяти полезных приёмах работы, которые могут пригодиться JavaScript-программисту. Он говорит о том, что эти приёмы позволяют экономить время, и о том, что ими пользуются профессионалы.

1. Очистка или усечение массива

Для того чтобы очистить массив или уменьшить его длину, можно изменить его свойство length. При этом, например, нет необходимости в том, чтобы, для очистки массива, записывать в переменную, хранящую ссылку на него, ссылку на новый массив.

const arr = [11, 22, 33, 44, 55, 66];
// усечение массива
arr.length = 3;
console.log(arr); //=> [11, 22, 33]
// очистка массива
arr.length = 0;
console.log(arr); //=> []
console.log(arr[2]); //=> undefined

2. Имитация именованных параметров при деструктурировании объекта

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

doSomething();
function doSomething(config) { const foo = config.foo !== undefined ? config.foo : 'Hi'; const bar = config.bar !== undefined ? config.bar : 'Yo!'; const baz = config.baz !== undefined ? config.baz : 13; // ...
}

Это — старый, но эффективный паттерн, который используется для имитации именованных параметров в JavaScript. Вызов такой функции выглядит вполне нормально, но, с другой стороны, для реализации логики обработки объекта с параметрами нужно слишком много кода. Благодаря возможностям по деструктурированию объектов ES2015 этот недостаток можно обойти:

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) { // ...
}

И, если нужно сделать объект с параметрами необязательным, это тоже сложностей не вызывает:

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) { // ...
}

3. Деструктурирование и элементы массивов

Вот как присваивать элементы массива отдельным переменным с использованием возможностей деструктурирования:

const csvFileLine = '1997,John Doe,US,john@doe.com,New York';
const { 2: country, 4: state } = csvFileLine.split(',');

4. Использование диапазонов значений в операторе switch

Вот простой приём, демонстрирующий использование диапазонов значений в операторе switch:

function getWaterState(tempInCelsius) { let state; switch (true) { case (tempInCelsius <= 0): state = 'Solid'; break; case (tempInCelsius > 0 && tempInCelsius < 100): state = 'Liquid'; break; default: state = 'Gas'; } return state;
}

5. Организация ожидания выполнения нескольких асинхронных функций в конструкции async/await

Благодаря следующему приёму, в котором используется Promise.all, можно организовать ожидание выполнения нескольких асинхронных функций:

await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])

6. Создание чистых объектов

При необходимости можно создать абсолютно пустой, чистый объект, который не наследует никаких свойств и методов от Object (например — это constructor, toString() и так далее). Вот как это сделать:

const pureObject = Object.create(null);
console.log(pureObject); //=> {}
console.log(pureObject.constructor); //=> undefined
console.log(pureObject.toString); //=> undefined
console.log(pureObject.hasOwnProperty); //=> undefined

7. Форматирование JSON-кода

Метод JSON.stringify способен на большее, нежели обычное преобразование объектов в их строковое представление. В частности, получающийся при работе с этим методом JSON-код можно форматировать:

const obj = { foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } } };
// Третий параметр - это число пробелов, которые используются для // форматирования JSON-данных.
JSON.stringify(obj, null, 4); // =>"{
// => "foo": {
// => "bar": [
// => 11,
// => 22,
// => 33,
// => 44
// => ],
// => "baz": {
// => "bing": true,
// => "boom": "Hello"
// => }
// => }
// =>}"

8. Удаление дублирующихся элементов массивов

Использование объекта типа Set из ES2015 с оператором расширения позволяет легко и удобно удалять из массивов дублирующиеся элементы:

const removeDuplicateItems = arr => [...new Set(arr)];
removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
//=> [42, "foo", true]

9. Линеаризация многомерных массивов

Линеаризация массивов с использованием оператора расширения — это предельно простая задача:

const arr = [11, [22, 33], [44, 55], 66];
const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]

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

function flattenArray(arr) { const flattened = [].concat(...arr); return flattened.some(item => Array.isArray(item)) ? flattenArray(flattened) : flattened;
} const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
const flatArr = flattenArray(arr); //=> [11, 22, 33, 44, 55, 66, 77, 88, 99]

Итоги

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

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

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть