Ko sem se začel učiti JavaScript, sem najprej naredil seznam trikov, ki so mi pomagali prihraniti čas. Opazil sem jih od drugih programerjev, na različnih straneh in v priročnikih.
V tem članku vam bom pokazal 12 odličnih načinov za izboljšanje in pospešitev kode JavaScript. V večini primerov so univerzalni.
Spomnimo: za vse bralce "Habr" - popust v višini 10 rubljev ob vpisu v kateri koli tečaj Skillbox s promocijsko kodo "Habr".
Skillbox priporoča: Praktični tečaj .
Filtriranje edinstvenih vrednosti
NIZI
Tip predmeta Set je bil uveden v ES6, skupaj z operatorjem ..., razširitev, lahko ga uporabimo za ustvarjanje novega polja, ki vsebuje samo edinstvene vrednosti.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]V normalnih razmerah je za izvedbo iste operacije potrebno veliko več kode.
Ta tehnika deluje za nize, ki vsebujejo primitivne tipe: undefined, null, boolean, string in number. Če delate z matriko, ki vsebuje predmete, funkcije ali dodatne matrike, boste potrebovali drugačen pristop.
Dolžina polja predpomnilnika v ciklih
CIKLI
Ko se naučite for zank, sledite standardnemu postopku:
for (let i = 0; i < array.length; i++){
console.log(i);
}Vendar s to sintakso zanka for vedno znova preverja dolžino matrike ob vsaki ponovitvi.
Včasih je to lahko koristno, vendar je v večini primerov bolj učinkovito predpomniti dolžino matrike, kar bo zahtevalo en dostop do nje. To lahko naredimo tako, da definiramo spremenljivko dolžine, kjer definiramo spremenljivko i, takole:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Načeloma skoraj enako kot zgoraj, vendar bomo s povečanjem velikosti zanke znatno prihranili čas.
Ocena kratkega stika (McCarthyjeva ocena)
POGOJNI OPERATORJI
Ternarni operater je hiter in učinkovit način za pisanje preprostih (in včasih 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";
Toda včasih je celo ternarni operator bolj zapleten, kot je potrebno. Namesto tega lahko uporabimo 'in' && in 'ali' || Logični operatorji za vrednotenje določenih izrazov na še bolj jedrnat način. Pogosto se imenuje "kratek stik" ali "ocena kratkega stika".
Kako to deluje
Recimo, da želimo vrniti le enega od dveh ali več pogojev.
Uporaba && vrne prvo napačno vrednost. Če je vsak operand ovrednoten kot true, bo vrnjen zadnji ovrednoten izraz.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Uporaba || vrne prvo pravo vrednost. Če je vsak operand ovrednoten kot false, bo vrnjena zadnja ovrednotena vrednost.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullPrimer 1
Recimo, da želimo vrniti dolžino spremenljivke, vendar ne poznamo njene vrste.
V tem primeru lahko uporabite if/else, da preverite, ali je foo pravi tip, vendar je ta metoda morda predolga. Zato je bolje vzeti naš "kratek stik".
return (foo || []).length;Če ima spremenljivka foo ustrezno dolžino, bo to vrnjeno. V nasprotnem primeru bomo dobili 0.
Primer 2
Ste imeli težave z dostopom do ugnezdenega predmeta? Morda ne veste, ali predmet ali ena od njegovih podlastnosti obstaja, kar lahko povzroči težave.
Na primer, želeli smo dostopati do lastnosti podatkov v this.state, vendar podatki niso definirani, dokler naš program ne vrne zahteve za pridobitev.
Odvisno od tega, kje ga uporabljamo, lahko klic this.state.data prepreči zagon aplikacije. Da bi rešili problem, bi lahko to zavili v pogojni izraz:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Boljša možnost bi bila uporaba operatorja "ali".
return (this.state.data || 'Fetching Data');Zgornje kode ne moremo spremeniti za uporabo &&. Operater 'Fetching Data' && this.state.data bo vrnil this.state.data ne glede na to, ali je nedefiniran ali ne.
Opcijska veriga
Lahko bi predlagali uporabo neobveznega veriženja, ko poskušate vrniti lastnost globoko v drevesno strukturo. Torej, simbol vprašaja? se lahko uporabi za pridobitev lastnosti le, če ni ničelna.
Zgornji primer bi lahko na primer predelali, da bi dobili this.state.data?..(). To pomeni, da so podatki vrnjeni le, če vrednost ni ničelna.
Ali pa, če je pomembno, ali je stanje definirano ali ne, lahko vrnemo this.state?.data.
Pretvori v Boolean
PRETVORBA VRSTE
Poleg običajnih logičnih funkcij true in false JavaScript obravnava tudi vse druge vrednosti kot resnične ali lažne.
Dokler ni navedeno drugače, so vse vrednosti v JavaScriptu resnične, razen 0, "", null, undefined, NaN in seveda false. Slednje so lažne.
Med obema lahko preprosto preklapljamo z operatorjem !, ki tudi pretvori tip v logično vrednost.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Pretvori v niz
PRETVORBA VRSTE
Hitro pretvorbo iz celega števila v niz lahko izvedete na naslednji način.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Pretvori v celo število
PRETVORBA VRSTE
Vzvratno transformacijo izvedemo takole.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"To metodo lahko uporabite tudi za pretvorbo logičnega podatkovnega tipa v običajne številske vrednosti, kot je prikazano spodaj:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Obstajajo lahko situacije, ko bo + razložen kot operator veriženja in ne kot operator seštevanja. Da bi se temu izognili, uporabite tilde: ~~. Ta operator je enakovreden -n-1. Na primer, ~15 je enako -16.
Uporaba dveh tild v vrsti izniči operacijo, ker je - (- - n - 1) - 1 = n + 1 - 1 = n. Z drugimi besedami, ~-16 je enako 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
OPERACIJE
Od ES7 naprej lahko uporabite operator potenciranja ** kot okrajšavo za potence. To je veliko hitreje kot uporaba Math.pow(2, 3). Zdi se preprosto, vendar je ta točka vključena v seznam tehnik, saj ni omenjena povsod.
console.log(2 ** 3); // Result: 8Ne smemo ga zamenjati s simbolom ^, ki se običajno uporablja za potenciranje. Toda v JavaScriptu je to operator XOR.
Pred ES7 se je bližnjica ** lahko uporabljala samo za potence osnove 2 z uporabo bitnega operatorja premika v levo <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Na primer, 2 << 3 = 16 je enakovredno 2 ** 4 = 16.
Plavajoča na celo število
OPERACIJE / PRETVORBA VRSTE
Če morate pretvoriti float v celo število, lahko uporabite Math.floor(), Math.ceil() ali Math.round(). Obstaja pa hitrejša pot, za to uporabljamo |, to je operator OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Vedenje | v veliki meri odvisno od tega, ali imate opravka s pozitivnimi ali negativnimi števili, zato je ta metoda primerna le, če ste prepričani v to, kar počnete.
n | 0 odstrani vse za decimalnim ločilom in skrajša plavajoče število na celo število.
Enak učinek zaokroževanja lahko dosežete z uporabo ~~. Po vsiljeni pretvorbi v celo število vrednost ostane nespremenjena.
Odstranjevanje končnih številk
Operator OR lahko uporabite za odstranitev poljubnega števila števk iz števila. To pomeni, da nam ni treba pretvarjati tipov, kot je tukaj:
let str = "1553";
Number(str.substring(0, str.length - 1));Namesto tega preprosto napišemo:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Samodejno povezovanje
RAZREDI
Zaznamki s puščico ES6 se lahko uporabljajo v metodah razreda, vezava pa je implicirana. To pomeni, da 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 Compononent {
constructor(props) {
super(props);
this.state = {};
}
myMethod = () => {
// This method is bound implicitly!
}
render() {
return (
<>
<div>
{this.myMethod()}
</div>
</>
)
}
};Obrezovanje matrike
NIZI
Če morate odstraniti vrednosti iz matrike, obstajajo hitrejše metode kot splice().
Na primer, če poznate velikost izvirne matrike, lahko preglasite njeno lastnost dolžine, kot sledi:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Vendar obstaja še ena metoda in hitrejša. Če vam je pomembna hitrost, so tukaj naši izbori:
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]Tiskanje zadnjih vrednosti(-ev) matrike
NIZI
Ta tehnika zahteva uporabo metode 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]Oblikovanje kode JSON
JSON
Morda ste že uporabili JSON.stringify. Ali ste vedeli, da pomaga formatirati vaš JSON?
Metoda stringify() ima dva neobvezna parametra: nadomestno funkcijo, ki se lahko uporablja za filtriranje prikazanega JSON, in vrednost prostora.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'To je vse, upam, da so bile vse te tehnike koristne. Katere trike poznate? Zapiši jih v komentarje.
Skillbox priporoča:
- Dvoletni praktični tečaj .
- Spletni tečaj .
- Praktični enoletni tečaj .
Vir: www.habr.com