Научете тези чисти 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. Извикването на функцията изглежда добре. От друга страна, логиката за обработка на обекта на конфигурация е излишно многословна. С деструктурирането на обекти 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.