ProHoster > Блог > интернет новини > 12 JavaScript трика, които повечето уроци пропускат

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

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

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

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

Напомняме ви: за всички читатели на "Habr" - отстъпка от 10 000 рубли при записване във всеки курс Skillbox, използвайки промоционалния код на "Habr".

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

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

МАСИВИ

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

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
 
console.log(uniqueArray); // Result: [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";

Но понякога дори троичният оператор е по-сложен от необходимото. Можем да използваме „и“ && и „или“ вместо || Булеви оператори за оценка на определени изрази по още по-сбит начин. Често се нарича "късо съединение" или "оценка на късо съединение".

Как работи

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

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

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
 
console.log(0 && null); // Result: 0

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

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
 
console.log(0 || null); // Result: null

Пример 1

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

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

return (foo || []).length;

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

Пример 2

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

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

В зависимост от това къде го използваме, извикването на 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, независимо дали е недефиниран или не.

Верига по избор

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

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

Или, ако има значение дали състоянието е дефинирано или не, можем да върнем this.state?.data.

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

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

В допълнение към нормалните булеви функции true и false, JavaScript също третира всички други стойности като верни или неверни.

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

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

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"

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

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

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

const val = 1 + "";
 
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

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

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

Извършваме обратната трансформация по този начин.

let int = "15";
int = +int;
 
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

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

console.log(+true);  // Return: 1
console.log(+false); // Return: 0

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

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

const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

<Quick Powers

ОПЕРАЦИИ

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

console.log(2 ** 3); // Result: 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);  // Result: 23
console.log(-23.9 | 0); // Result: -23

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

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

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

Премахване на завършващи числа

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

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

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

console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.log(1553 / 1000 | 0)  // Result: 1

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

КЛАСОВЕ

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

import React, { Component } from React;
 
export default class App extends Compononent {
  constructor(props) {
  super(props);
  this.state = {};
  }
 
myMethod = () => {
    // This method is bound implicitly!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

Изрязване на масиви

МАСИВИ

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

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

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
 
console.log(array); // Result: [0, 1, 2, 3]

Но има друг метод, и то по-бърз. Ако скоростта е това, което има значение за вас, ето нашите избори:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
 
console.log(array); // Result: [0, 1, 2, 3]

Отпечатване на последната стойност(и) на масив

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

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

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

JSON

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

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

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
 
// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'

Това е всичко, надявам се, че всички тези техники са били полезни. Какви трикове знаете? Напишете ги в коментарите.

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

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

Добавяне на нов коментар