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

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

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

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

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

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

Масиви

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

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";

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

Как работи

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

Използването на && ще върне първата 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 са truthy, с изключение на 0, „“, null, undefined, NaN и, разбира се, false. Последните са falsy.

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

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, { Component } от React;
 
експорт по подразбиране клас App разширява Component {
  конструктор(свойства) {
  супер(свойства);
  това.състояние = {};
  }
 
мояМетод = () =&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».

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

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

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