Вивчіть ці акуратні трюки на JavaScript менш ніж за 5 хвилин

Методи економії часу, які використовують професіонали

1. Очищення або обрізання масиву

Простий спосіб очищення або скорочення масиву без його перепризначення - це зміна lengthзначення його властивості:

const arr = [11, 22, 33, 44, 55, 66];
// truncantingarr.length = 3;console.log(arr); //=> [11, 22, 33]
// clearingarr.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. Виклик функції виглядає нормально. З іншого боку, логіка обробки об'єктів config є надмірно багатослівною. За допомогою деструктуризації об’єктів ES2015 ви можете обійти цей мінус:

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

І якщо вам потрібно зробити об’єкт конфігурації необов’язковим, це теж дуже просто:

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

3. Деструктуризація об’єктів для елементів масиву

Присвоєння елементів масиву окремим змінним з деструктуризацією об’єктів:

const csvFileLine = '1997,John Doe,US,[email protected],New York';
const { 2: country, 4: state } = csvFileLine.split(',');

4. Перемикач з діапазонами

ПРИМІТКА. Поміркувавши, я вирішив відрізнити цей фокус від інших у цій статті. Це НЕ економить час техніка, НІ придатне для реального коду життя. Майте на увазі: “Якщо” завжди краще в таких ситуаціях.

На відміну від інших порад у цій публікації, це більше цікавість, ніж те, що насправді використовувати.

У будь-якому разі, я збережу це в цій статті з історичних причин.

Ось простий прийом використання діапазонів у операторах перемикання:

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

5. Очікуйте кілька функцій асинхронізації з async / await

Можна awaitзавершити кілька асинхронних функцій, використовуючи Promise.all:

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

6. Створення чистих об’єктів

Ви можете створити 100% чистий об'єкт, який не буде успадковувати майно або метод з Object(наприклад, constructor, toString()і так далі).

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

7. Форматування коду JSON

JSON.stringifyможе зробити більше, ніж просто розшифрувати об’єкт. Ви також можете прикрасити свій вихід JSON цим:

const obj = { foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } } };
// The third parameter is the number of spaces used to // beautify the JSON output.JSON.stringify(obj, null, 4); // =>"{// => "foo": {// => "bar": [// => 11,// => 22,// => 33,// => 44// => ],// => "baz": {// => "bing": true,// => "boom": "Hello"// => }// => }// =>}"

8. Видалення повторюваних елементів з масиву

Використовуючи ES2015 Sets разом з оператором Spread, ви можете легко видалити повторювані елементи з масиву:

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

9. Зрівняння багатовимірних масивів

Згладжування масивів тривіальне з оператором Spread:

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

На жаль, вищевказаний фокус спрацює лише з двовимірними масивами. Але за допомогою рекурсивних викликів ми можемо зробити його придатним для масивів із більш ніж 2 вимірами:

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.