JavaScript трюки.

Изучите эти аккуратные трюки JavaScript менее чем за 5 минут.

Методы экономии времени, используемые профессионалами!

В этой статье мы рассмотрим:

1. Очистка или усечение массива.
2. Имитация именованных параметров с деструкцией объектов.
3. Деструктуризация объектов для элементов массива.
4. Переключение с диапазонами.
5. await нескольких асинхронных функций с помощью async / wait
6. Создание чистых объектов
7. Форматирование кода JSON
8. Удаление повторяющихся элементов из массива.
9. Сглаживание (объединение) многомерных массивов

Все материалы по JS в этом блоге, смотрите по ссылке.

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

Легкий способ очистки или усечения массива без его переназначения - это изменить его значение свойства length:



const arr = [11, 22, 33, 44, 55, 66];

// truncanting
arr.length = 3;
console.log(arr); //=> [11, 22, 33]

// clearing
arr.length = 0;
console.log(arr); //=> []
console.log(arr[2]); //=> undefined





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

Скорее всего, вы уже используете объекты конфигурации, когда вам нужно передать в переменную набор параметров для некоторой функции, например:



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 }) {
  // ...
}



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



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





Деструктуризация объектов для элементов массива.

Назначение элементов массива отдельным переменным с деструкцией объектов:



const csvFileLine = '1997,John Doe,US,john@doe.com,New York';

const { 2: country, 4: state } = csvFileLine.split(',');





Переключение с диапазонами.

ПРИМЕЧАНИЕ. После некоторого раздумья я решил выделить этот трюк от других в этой статье. Это НЕ экономия времени, НO он подходит для кода реальной жизни. Имейте в виду: IF в таких ситуациях всегда лучше. В отличие от других советов в этом посте, это скорее любопытство, чем что-то для реального использования. Во всяком случае, я сохраню его в этой статье по историческим причинам.


Вот простой способ использовать диапазоны в операторах 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;
}





await нескольких асинхронных функций с помощью async / wait.

Можно ожидать - await завершения нескольких асинхронных функций с помощью Promise.all:



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





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

Вы можете создать 100% чистый объект, который не наследует какое-либо свойство или метод из 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





Форматирование кода 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"
// =>        }
// =>    }
// =>}"





Удаление повторяющихся элементов из массива.

Используя ES2015 Sets вместе с оператором Spread - (...), вы можете легко удалить повторяющиеся элементы из массива:



const removeDuplicateItems = arr => [...new Set(arr)];

removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
//=> [42, "foo", true]





Сглаживание (объединение) многомерных массивов

Сглаживание массивов тривиально с оператором Spread:



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.

Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.

Удачного кодирования!                                                                                                                                                              

Телеграм канал - Full Stack JavaScript Developer

---

Помочь проекту (любая валюта). DONATE