🥇12 trikov z JavaScriptom, ki jih ni v večini tutorialov

Ko sem začel raziskovati JavaScript, sem najprej sestavil seznam trikov, ki so mi pomagali prihraniti čas. Prevzel sem jih od drugih programerjev, z različnih spletnih strani in iz priročnikov.

V tem članku bom predstavil 12 odličnih načinov, kako izboljšati in pospešiti svoj JavaScript kode. V večini primerov so ti načini univerzalni.

Opominjamo: za vse bralce »Habra« — popust 10 000 rubljev ob vpisu na kateri koli tečaj Skillbox s promo kodo »Habr«.

Skillbox priporoča: Praktični tečaj Mobilni razvijalec PRO.

Filtriranje unikatnih vrednosti

MATRICE

Tip objekta Set je bil uveden v ES6, skupaj z …, spread operatorjem, lahko ga uporabimo za ustvarjanje novega matrice, ki vsebuje le unikatne vrednosti.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
 
console.log(uniqueArray); // Rezultat: [1, 2, 3, 5]

V običajnih okoliščinah bi za opravljanje iste operacije potrebovali veliko več kode.

Ta trik deluje za matrice, ki vsebujejo primitivne tipe: undefined, null, boolean, string in number. Če delate z matrico, ki vsebuje objekte, funkcije ali dodatne matrice, boste potrebovali drugačen pristop.

Dolžina matrike v zankah

ZANKE

Ko se učite for za zanke, sledite standardni proceduri:

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

Kljub temu pa ta sintaksa v for zanki ponovno preverja dolžino matrice pri vsakem ponovitvi.

Včasih je to lahko koristno, vendar je v večini primerov učinkoviteje shraniti dolžino matrice, kar zahteva en dostop do nje. To lahko storimo tako, da določimo spremenljivko dolžine, kjer določimo spremenljivko i, na primer, tako:

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

Načeloma skoraj enako kot zgoraj, vendar pri povečevanju velikosti zanke pridobimo znatno prihranek časa.

Ocenjevanje kratkega preklopa (ocena McCarthyja)

POGOJNI OPERATIVI

Ternarni operator je hiter in učinkovit način pisanja preprostih (včasih tudi ne tako preprostih) pogojnih stavkov:

x > 100? «več kot 100»: «manj kot 100»;
x > 100? (x > 200? «več kot 200»: «med 100-200»): «manj kot 100»;

Vendar pa je včasih celo ternarni operator bolj zapleten, kot je potrebno. Namesto tega lahko uporabimo ‘and’ && in ‘or’ || logične operatorje za oceno nekaterih izrazov še bolj jedrnato. To nekateri imenujejo »kratki preklop« ali »ocene kratkega preklopa«.

Kako to funkcionira

Recimo, da želimo vrniti le enega od dveh ali več pogojev.

Uporaba && bo vrnila prvo false vrednost. Če se vsak operand oceni kot true, bo vrnjeno zadnje izračunano izraza.

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

console.log(0 && null); // Rezultat: 0

Uporaba || bo omogočila vrnitev prve true vrednosti. Če se vsak operand oceni kot false, bo vrnjena zadnja izračunana vrednost.

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

console.log(0 || null); // Rezultat: null

Primer 1

Recimo, da želimo vrniti dolžino spremenljivke, vendar ne vemo njenega tipa.

V tem primeru lahko uporabimo if/else za preverjanje, ali je foo ustrezen tip, vendar je ta metoda lahko predolga. Zato raje vzamemo naše "kratko kratko vezje".

return (foo || []).length;

Če ima spremenljivka foo ustrezno dolžino, bo ta vrnjena. V nasprotnem primeru bomo dobili 0.

Primer 2

Ste imeli težave z dostopom do vgrajenega objekta? Morda ne veste, ali objekt ali njegova lastnost obstaja, kar lahko vodi do težav.

Na primer, želeli smo dostopati do lastnosti data v this.state, vendar je data nedoločen, dokler naša aplikacija ne vrne poizvedbe.

Glede na to, kje ga uporabljamo, lahko klic this.state.data ovira zagon aplikacije. Da bi rešili težavo, bi lahko to ovili v pogojno izjavo:

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

Bolj primerna izbira bi bila uporaba operatorja "or".

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

Ne moremo spremeniti zgornjega kode, da bi uporabili &&. Operator 'Fetching Data' && this.state.data vedno vrne this.state.data ne glede na to, ali je nedoločen ali ne.

Opcijska veriga

Lahko predlagamo uporabo opcijske verige pri poskusu vrnitve lastnosti globoko v drevesni strukturi. Tako se simbol vprašaja ? lahko uporablja za pridobivanje lastnosti, le če ni enak nič (null).

Na primer, lahko bi refaktorizirali zgornji primer, da bi dobili this.state.data?.. (). To pomeni, da se data vrne le, če vrednost ni null.

Ali pa, če je pomembno, ali je stanje določeno ali ne, bi lahko vrnili this.state?.data.

Pretvorba v Boolean

PRETVORBA TIPOV

Poleg običajnih logičnih funkcij true in false, JavaScript obravnava vse druge vrednosti kot truthy ali falsy.

Dokler ni drugače navedeno, so vse vrednosti v JavaScriptu - truthy, razen 0, „“, null, undefined, NaN in seveda false. Zadnje so falsy.

Zlahka se lahko preklapljamo med obema s pomočjo operatorja !, ki prav tako pretvarja tip v logični.

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

Pretvorba v niz

PRETVORBA TIPOV

Hitro pretvorbo celo število v niz lahko izvedemo na naslednji način.

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

Pretvorba v celo število

PRETVORBA TIPOV

Obratno pretvorbo opravimo tako.

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

Ta način se lahko uporablja tudi za pretvorbo logičnega tipa podatkov boolean v običajne številčne vrednosti, kot je prikazano spodaj:

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

Lahko so situacije, ko bo + interpretiran kot operator konkatenacije in ne seštevanja. Da bi se temu izognili, je smiselno uporabiti tilde: ~~. Ta operator je enak izrazu -n-1. Na primer, ~ 15 je enakovreden -16.

Uporaba dveh tilde zaporedoma odpravi operacijo, saj - (- n - 1) - 1 = n + 1 - 1 = n. Drugimi besedami, ~ -16 enako 15.

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

<Quick Powers

OPERACIJE

Od ES7 dalje lahko za potenco uporabimo operator ** kot bližnjico za potence. To je veliko hitreje kot uporaba Math.pow(2, 3). Zdi se preprosto, a ta trenutek je v seznamu trikov, saj se ne omenja povsod.

console.log(2 ** 3); // Rezultat: 8

Ne mešajte ga s simbolom ^, ki se običajno uporablja za potenciranje. V JavaScriptu pa je to operator XOR.

Do ES7 se je lahko bližnjico ** uporabljalo le za potence z osnovo 2 z uporabo operatorja bitnega pomika levo <<:

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

Na primer, 2 << 3 = 16 je ekvivalentno izrazu 2 ** 4 = 16.

Float v celo število

OPERACIJE / PRETVORBA TIPOV

Če je potrebno pretvoriti float v celo število, lahko uporabite Math.floor(), Math.ceil() ali Math.round(). Vendar je na voljo še hitrejši način, za to uporabimo |, torej operator OR.

console.log(23.9 | 0);  // Rezultat: 23
console.log(-23.9 | 0); // Rezultat: -23

Obnašanje | v veliki meri je odvisno od tega, ali imate opravka s pozitivnimi ali negativnimi številkami, zato je ta način primeren le, če ste prepričani v to, kar počnete.

n | 0 odstrani vse, kar sledi decimalni piki, zaokroževanje števila s plavajočo vejico na celo število.

Enak učinek zaokroževanja lahko dosežete s ~~. Po prisilnem pretvorbi v celo število vrednost ostane nespremenjena.

Odstranitev povezanih števil

Operator OR se lahko uporablja za odstranitev kateregakoli števila iz številke. To pomeni, da ni treba pretvarjati tipov, kot je tukaj:

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

Namesto tega preprosto zapišemo:

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

Samodejno povezovanje

KLASE

Puščične oznake ES6 se lahko uporabljajo v metodah razreda, pri čemer se predpostavlja vezava. Tako se lahko poslovite od ponavljajočih se izrazov, kot je this.myMethod = this.myMethod.bind (this)!

import React, { Component } from React;
 
export default class App extends Component {
  constructor(props) {
  super(props);
  this.state = {};
  }
 
myMethod = () =&gt; {
    // Ta metoda jest implicitnie związana!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

Obrezovanje array-a

MATRICE

Če morate odstraniti vrednosti iz array-a, obstajajo hitrejši načini kot splice().

Na primer, če poznate velikost izvirnega array-a, lahko prepišete njegovo lastnost length na naslednji način:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;

console.log(array); // Rezultat: [0, 1, 2, 3]

Obstaja pa tudi še en način, ki je hitrejši. Če vam je ultravelu hitrost pomembna, je to naš izbira:

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

console.log(array); // Rezultat: [0, 1, 2, 3]

Izpis zadnje vrednosti (vrednosti) array-a

MATRICE
Ta trik zahteva uporabo metode slice().

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(array.slice(-1)); // Rezultat: [9]
console.log(array.slice(-2)); // Rezultat: [8, 9]
console.log(array.slice(-3)); // Rezultat: [7, 8, 9]

Formatiranje JSON kode

JSON

Morda ste že uporabljali JSON.stringify. Ali ste vedeli, da pomaga formatirati vaš JSON?

Metoda stringify() sprejme dva neobvezna parametra: funkcijo replacer, ki jo lahko uporabite za filtriranje prikazanega JSON-a, in vrednost space.

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

// Rezultat:
// '{
//     "alpha": A,
//     "beta": B
// }'

To je to, upam, da so vsi navedeni triki bili koristni. Kakšne trike poznate vi? Napišite jih v komentarjih.

Skillbox priporoča:

Двухлетний практический курс «Я — веб-разработчик PRO».

Spletni tečaj C# razvijalec z nič.

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

Izvor: habr.com