Главная

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

2018-05-03 в 8:05, admin, рубрики: javascript, Блог компании RUVDS.com, разработка, Разработка веб-сайтов

Автор материала, перевод которого мы сегодня публикуем, рассказывает о девяти полезных приёмах работы, которые могут пригодиться 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({ foo: 'Hello', bar: 'Hey!', baz: 42 });
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]