🥇12 трика за работа с JavaScript, които липсват в повечето уроци

Когато започнах да изучавам JavaScript, първото нещо, което направих, беше да съставя списък с техники, които ми помагаха да спестявам време. Взех ги назаем от други програмисти, от различни сайтове и ръководства.

В тази статия ще покажа 12 отлични начина за подобряване и ускоряване на JavaScript кода си. В повечето случаи те са универсални.

Напомняме: за всички читатели на "Хабра" — отстъпка от 10 000 рубли при записване на всякакъв курс на Skillbox с промокод "Хабр".

Skillbox препоръчва: Практически курс «Мобилен разработчик PRO».

Филтриране на уникални стойности

МАСИВИ

Типът обект Set беше въведен в ES6, а с ... операторът spread можем да го използваме за създаване на нов масив, съдържащ само уникални стойности.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];

console.log(uniqueArray); // Резултат: [1, 2, 3, 5]

В стандартна ситуация, за извършване на същата операция, е необходимо значително повече код.

Тази техника работи за масиви, съдържащи примитивни типове: undefined, null, boolean, string и number. Ако работите с масив, съдържащ обекти, функции или допълнителни масиви, ще ви трябва друг подход.

Дължина на кэширания масив в цикли

ЦИКЛИ

Когато изучавате for за цикли, следвате стандартна процедура:

for (let i = 0; i < array.length; i++){
  console.log(i);
}

Въпреки това, с този синтаксис цикълът for проверява дължината на масива при всяка итерация.

Понякога това може да бъде полезно, но в повечето случаи е по-ефективно да кэшираш дължината на масива, което изисква едно единствено извикване. Можем да го направим, като определим променлива за дължината, където задаваме променливата i, например така:

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

В принцип, почти същото като горното, но при увеличаване на размера на цикъла, ще получим значителна икономия на време.

Оценка на краткото замикване (оценка Маккарти)

УСЛОВНИ ОПЕРАТОРИ

Тернарният оператор е бърз и ефективен начин за написване на прости (а понякога и не много прости) условни изрази:

x > 100? "повече от 100": "по-малко от 100";
x > 100? (x > 200? "повече от 200": "между 100-200"): "по-малко от 100";

Но понякога дори тернарният оператор е по-сложен от необходимото. Вместо него можем да използваме логическите оператори 'и' && и 'или' || за оценка на някои изрази по-стегнат начин. Често го наричат "кратко замикване" или "оценка на краткото замикване".

Как работи това

Да кажем, че искаме да върнем само едно от две или повече условия.

Използването на && ще върне първото false значение. Ако всеки операнд е оценен като true, ще бъде върнато последното изчислено изразяване.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Резултат: 3
 
console.log(0 && null); // Резултат: 0

Използването на || ще позволи да се върне първото true значение. Ако всеки операнд е оценен като false, ще бъде върнато последното изчислено значение.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Резултат: 1
 
console.log(0 || null); // Резултат: null

Пример 1

Да кажем, че искаме да върнем length на променливата, но не знаем нейния тип.

В този случай можем да използваме if/else за проверка дали foo е подходящ тип, но този метод може да се окаже твърде дълъг. Затова е по-добре да използваме нашето „късо замикане“.

return (foo || []).length;

Ако променливата foo има подходящ length, то той ще бъде върнат. В противен случай ще получим 0.

Пример 2

Имахте ли проблеми с достъпа до вложен обект? Може да не знаете дали обектът или едно от неговите подсвойства съществува, което може да доведе до проблеми.

Например, искахме да получим достъп до свойството data в this.state, но data не е определено, докато нашата програма не върне запитване за извличане.

В зависимост от това къде го използваме, извикването на this.state.data може да попречи на стартирането на приложението. За да решим проблема, можем да го обвием в условно изразяване:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

По-подходящ вариант би било използването на оператора „или“.

return (this.state.data || 'Fetching Data');

Не можем да променим кода по-горе, за да използваме &&. Операторът ‘Fetching Data’ && this.state.data ще върне this.state.data независимо от това дали е undefined или не.

Опционална верига

Може да предложите да се използва опционална верига при опит за извличане на свойство дълбоко в дървовидна структура. Символът на въпросителен знак ? може да се използва за извличане на свойството само ако то не е равно на нула (null).

Например, можем да извършим рефакторинг на примера по-горе, получавайки this.state.data?.. (). Тоест data се връща само ако стойността не е null.

Или, ако е важно дали state е определен или не, можем да върнем this.state?.data.

Преобразуване в Boolean

ПРЕОБРАЗУВАНЕ НА ТИПОВЕТЕ

Освен стандартните логически функции true и false, JavaScript също така разглежда всички останали стойности като truthy или falsy.

Докато не е посочено друго, всички стойности в JavaScript са истински, с изключение на 0, «», null, undefined, NaN и, разбира се, false. Последните са фалшиви.

Лесно можем да превключваме между тях, използвайки оператора !, който също преобразува типа в логически.

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;

console.log(true); // Резултат: true
console.log(typeof true); // Резултат: "boolean"

Преобразуване в низ

ПРЕОБРАЗУВАНЕ НА ТИПОВЕТЕ

Бързото преобразуване на цяло число в низ може да се извърши по следния начин.

const val = 1 + "";

console.log(val); // Резултат: "1"
console.log(typeof val); // Резултат: "string"

Преобразуване в цяло число

ПРЕОБРАЗУВАНЕ НА ТИПОВЕТЕ

Обратното преобразуване се извършва по следния начин.

let int = "15";
int = +int;

console.log(int); // Резултат: 15
console.log(typeof int); Резултат: "number"

Този метод може да се използва и за преобразуване на логическия тип данни boolean в обикновени числови стойности, както е показано по-долу:

console.log(+true);  // Резултат: 1
console.log(+false); // Резултат: 0

Могат да има ситуации, когато + ще бъде интерпретиран като оператор за конкатенация, а не за събиране. За да се избегне това, е добре да използвате тилди: ~~. Този оператор е еквивалентен на израза -n-1. Например, ~ 15 е равно на -16.

Използването на две тилди последователно неутрализира операцията, защото — (- — n — 1) — 1 = n + 1 — 1 = n. С други думи, ~ -16 е равно на 15.

const int = ~~"15"
console.log(int); // Резултат: 15
console.log(typeof int); Резултат: "number"

<Quick Powers

ОПЕРАЦИИ

Започвайки от ES7, можете да използвате оператора за повдигане на степен ** като съкращение за степени. Това е много по-бързо от използването на Math.pow (2, 3). Изглежда просто, но този момент е включен в списъка с трикове, тъй като не навсякъде се споменава.

console.log(2 ** 3); // Резултат: 8

Не трябва да го бъркате с символа ^, който обикновено се използва за повдигане на степен. Но в JavaScript това е оператор XOR.

Пред ES7 съкращението ** можеше да се прилага само за степени с основание 2, използвайки оператора за побитово изместване наляво <<:

Math.pow(2, n);
2 << (n - 1);
2**n;

Например, 2 << 3 = 16 е еквивалентно на израза 2 ** 4 = 16.

Float в цяло число

ОПЕРАЦИИ / ПРЕОБРАЗУВАНЕ НА ТИПОВЕ

При необходимост да преобразувате float в цяло число, можете да използвате Math.floor(), Math.ceil() или Math.round(). Но има и по-бърз начин, за това използваме |, т.е. оператора OR.

console.log(23.9 | 0);  // Резултат: 23
console.log(-23.9 | 0); // Резултат: -23

Поведенческите характеристики зависят в значителна степен от това дали имате работа с положителни или отрицателни числа, поради което този метод е подходящ само ако сте сигурни в действията си.

n | 0 премахва всичко след десетичната запетая, закръглявайки числото с плаваща запетая до цяло число.

Можете да постигнете същия ефект на закръгляне, като използвате ~~. След принудително преобразуване в цяло число стойността остава непроменена.

Премахване на заключващи числа

Операторът OR може да се използва, за да премахнете произволен брой цифри от числото. Това означава, че не е необходимо да преобразувате типовете, както тук:

let str = "1553";
Number(str.substring(0, str.length - 1));

Вместо това просто пишем:

console.log(1553 / 10 | 0)  // Резултат: 155
console.log(1553 / 100 | 0)  // Резултат: 15
console.log(1553 / 1000 | 0)  // Резултат: 1

Автоматично свързване

КЛАСОВЕ

ES6 стрелковите обозначения могат да се използват в класовите методи, като по този начин се подразбира свързването. Благодарение на това можете да се сбогувате с повторението на изрази, като this.myMethod = this.myMethod.bind(this)!

импортиране на React, { Компонент } от React;
 
експорт по подразбиране клас App разширява Компонент {
  конструктор(пропс) {
  супер(пропс);
  това.състояние = {};
  }
 
моятМетод = () =&gt; {
    \/\/ Този метод е свързан имплицитно!
  }
 
рендер() {
    върни (
      <>
        <div>
          {този.моятМетод()}
        </div>
      </>
    )
  }
};

Обрязване на масив

МАСИВИ

Ако трябва да премахнете стойности от масив, има по-бързи методи от splice().

Например, ако знаете размера на оригиналния масив, можете да пренастроите свойството length по следния начин:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
 
console.log(array); // Резултат: [0, 1, 2, 3]

Но има и още един метод, който е по-бърз. Ако скоростта е важна за вас, ето нашият избор:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
 
console.log(array); // Резултат: [0, 1, 2, 3]

Извеждане на последната стойност (стойности) на масив

МАСИВИ
Тази техника изисква използването на метода slice().

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
console.log(array.slice(-1)); // Резултат: [9]
console.log(array.slice(-2)); // Резултат: [8, 9]
console.log(array.slice(-3)); // Резултат: [7, 8, 9]

Форматиране на JSON код

JSON

Може би вече сте използвали JSON.stringify. Знаете ли, че той помага за форматиране на вашия JSON?

Методът stringify() приема два необходими параметъра: функция replacer, която можете да използвате за филтриране на показания JSON и стойността space.

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
 
// Резултат:
// '{
//     "alpha": A,
//     "beta": B
// }'

И това е всичко, надявам се, че всички изброени техники са били полезни. А какви трикове знаете вие? Споделете ги в коментарите.

Skillbox препоръчва:

Двугодишен практически курс «Аз съм уеб разработчик PRO».

Онлайн курс «С# разработчик от 0».

Практически годишен курс «PHP разработчик от 0 до PRO».

Източник: habr.com