12 JavaScripti töövõtet, mida enamik õpetusi ei käsitle.

Kui ma alustasin JavaScripti õppimist, tegin ma kohe nimekirja nippidest, mis aitasid mul aega säästa. Vaatasin neid teiste programmeerijate juurest, erinevates veebilehtedes ja juhendites.

Selles artiklis näitan ma 12 suurepärast viisi, kuidas oma JavaScripti koodi parandada ja kiirendada. Enamikul juhtudel on need universaalsed.

Tuletame meelde: kõigile «Habra» lugejatele — 10 000 rubla soodustus, kui registreerite end Skillboxi mis tahes kursusele promokoodi «Habr» abil.

Skillbox soovitab: Praktiline kursus «Mobiilne arendaja PRO».

Unikaalsete väärtuste filtreerimine

MASSED

Objekti tüüp Set, mis on tutvustatud ES6-s, koos …, levitamisoperaatoriga, saame seda kasutada uue massiivi loomiseks, mis sisaldab ainult unikaalseid väärtusi.

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

Tavalistes olukordades vajaks sama operatsiooni tegemiseks palju rohkem koodi.

See nipp töötab massiivide puhul, mis sisaldavad primitiivseid tüüpe: undefined, null, boolean, string ja number. Kui töötate massiiviga, mis sisaldab objekte, funktsioone või täiendavaid massiive, vajate teistsugust lähenemist.

Cache-massiivi pikkus tsüklites

TSÜKLID

Kui õpite for-lauseid tsüklite jaoks, järgite standardset protseduuri:

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

Siiski kontrollib for-süntaks massiivi pikkust igal itereerimisel uuesti.

Mõnikord võib see olla kasulik, kuid enamasti on efektiivsem massiivi pikkust vahemäletada, mis vajab vaid ühte juurdepääsu. Saame seda teha, määrates pikkuse muutujana, näiteks nii:

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

Põhimõtteliselt on see peaaegu sama, mis eelnevalt, kuid tsükli suuruse suurendamisel saame märkimisväärset ajakulu kokkuhoidu.

Lühiülevaade (McCarthy hinnang)

TINGIMUSOPERAATORID

Ternaarne operaator on kiire ja efektiivne viis lihtsate (ja mõnikord ka mitte nii lihtsate) tingimuslause kirjutamiseks:

x > 100 ? "rohkem kui 100" : "vähem kui 100";
x > 100 ? (x > 200 ? "rohkem kui 200" : "vahemikus 100-200") : "vähem kui 100";

Kuid mõnikord on isegi ternaarne operaator keerulisem, kui vajalik. Selle asemel võime kasutada 'and' && ja 'or' || loogilisi operaatorid, et hinnata mõningaid väljendeid veelgi lühemalt. Seda nimetatakse sageli "lühiülevaateks" või "lühiülevaate hindamiseks".

Kuidas see toimib

Oletame, et soovime tagastada ainult ühe kahel või enam tingimusel.

Kasutamine && tagastab esimese vale väärtuse. Kui iga operand hindab tõeks, siis tagastatakse viimane arvutatud väljend.

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

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

Kasutamine || võimaldab tagastada esimese tõese väärtuse. Kui iga operand hindab vale, siis tagastatakse viimane arvutatud väärtus.

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

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

Näide 1

Oletame, et soovime tagastada muutujat length, kuid ei tea, mis on tema tüüp.

Sellisel juhul saame kasutada if/else, et kontrollida, kas foo on õige tüüp, kuid see meetod võib osutuda liiga pikaks. Seetõttu on parem kasutada meie 'lühikest sulgemist'.

return (foo || []).length;

Kui muutuja foo omab sobivat length, siis see tagastatakse. Vastasel juhul saame 0.

Näide 2

Kas olete kogenud probleeme sissekaetud objekti juurde pääsemisega? Te ei pruugi teada, kas objekt või üks tema alamomadustest eksisteerib, ja see võib põhjustada probleeme.

Näiteks soovisime pääseda juurde this.state omadusele data, kuid data ei ole määratletud, kuni meie programm ei tagasta päringu valiku.

Sõltuvalt sellest, kus me seda kasutame, võib this.state.data kutse takistada rakenduse käivitumist. Probleemi lahendamiseks võiksime selle panna tingimuslause sisse:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Andmete laadimine';
}

Sobivam variant oleks kasutada 'or' operaatorit.

return (this.state.data || 'Andmete laadimine');

Me ei saa ülaltoodud koodi muuta nii, et kasutada '&&'. Operaator ‘Andmete laadimine’ && this.state.data tagastab this.state.data, sõltumata sellest, kas see on määratlemata või mitte.

Valikuline ahel

Soovitame kasutada valikulist ahelat, püüdes tagastada omadust sügaval puustruktuuris. Seega võib küsimärk ? olla kasutusel omaduse väljavõtmiseks, ainult siis, kui see ei ole null (null).

Näiteks võiksime eelmise näite ümber kirjutada, saades this.state.data?.. (). See tähendab, et data tagastatakse ainult siis, kui väärtus ei ole null.

Või, kui on oluline, kas state on määratletud või mitte, võiksime tagastada this.state?.data.

Tüüpide konverteerimine

Tüüpide KONVERTIMINE

Lisaks tavalistele loogilistele funktsioonidele true ja false, käsitleb JavaScript ka kõiki teisi väärtusi kui truthy või falsy.

Kuni on märgitud teisiti, on kõik JavaScriptis väärtused truthy, välja arvatud 0, "", null, undefined, NaN ja loomulikult false. Viimased on falsy.

Saame hõlpsasti vahetada nende vahel, kasutades operaatorit !, mis teisendab tüübi ka loogiliseks.

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

console.log(true); // Tulem: true
console.log(typeof true); // Tulem: "boolean"

Stringiks teisendamine

Tüüpide KONVERTIMINE

Täisarvu kiireks stringiks teisendamiseks saab kasutada järgmist.

const val = 1 + "";

console.log(val); // Tulem: "1"
console.log(typeof val); // Tulem: "string"

Täisarvuks teisendamine

Tüüpide KONVERTIMINE

Tagasi teisendamine toimub järgmiselt.

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

console.log(int); // Tulem: 15
console.log(typeof int); // Tulem: "number"

Seda meetodit saab kasutada ka loogilise andmetüübi boolean teisendamiseks tavaliseks numbriliseks väärtuseks, nagu on näidatud allpool:

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

Võivad olla olukorrad, kus + tõlgendatakse konkateneerimise operaatorina, mitte liitmisena. Selle vältimiseks tasub kasutada tilde: ~~. See operaator on võrdne väljendiga -n-1. Näiteks ~ 15 on -16.

Kaks järjestikust tilde'i kasutamine tühistab operatsiooni, sest — (- — n — 1) — 1 = n + 1 — 1 = n. Teisisõnu, ~ -16 on võrdne 15-ga.

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

<Quick Powers

OPERAATSIOONID

Alates ES7-st saab kasutada astmeoperaatorit ** lühendina astmete jaoks. See on palju kiirem kui Math.pow(2, 3) kasutamine. Tundub lihtne, kuid see punkt on loendisse lisatud, kuna seda ei mainita alati.

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

Ärge segage seda sümboliga ^, mida tavaliselt kasutatakse astme tõstmiseks. Kuid JavaScriptis on see XOR operaatор.

Enne ES7 lühendit ** sai kasutada ainult astme 2 korral, kasutades vasakpoolsest nihutamise operaatorit <<:

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

Näiteks, 2 << 3 = 16 on võrdne väljendiga 2 ** 4 = 16.

Float täisarvuks

OPERAATSIOONID / Tüüpide MUUTMINE

Kui on vajalik muundada float täisarvuks, saab kasutada Math.floor(), Math.ceil() või Math.round(). Kuid on ka kiirem viis, kasutades |, st OR operaatorit.

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

Käitumine sõltub suures osas sellest, kas tegelete positiivsete või negatiivsete arvudega, seega sobib see meetod ainult siis, kui olete kindel, mida teete.

n | 0 eemaldab kõik, mis tuleb pärast koma, kärpides ujuva koma arvu täisarvuks.

Sama ümmardamise efekti saate saavutada, kasutades ~~. Pärast sunnitud teisendamist täisarvuks jääb väärtus muutumatuks.

Kustutame sulguvad numbrid

OR operaatorit saab kasutada, et eemaldada numbrist mis tahes arv numbreid. See tähendab, et me ei pea tüüpe teisendama, nagu siin:

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

Selle asemel kirjutame lihtsalt:

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

Automaatne sidumine

KLASSID

ES6 noolemärgid saab kasutada klassi meetodites, ja see toob kaasa sidumise. See võimaldab teil hüvasti jätta korduvate väljenditega, nagu this.myMethod = this.myMethod.bind(this)!

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

Massiivi kärpimine

MASSED

Kui peate massiivist väärtusi eemaldama, on olemas kiiremaid meetodeid kui splice().

Näiteks, kui teate algse massiivi suurust, saate määrata selle properties length järgmiselt:

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

Kuid on veel üks meetod, mis on isegi kiirem. Kui kiirus on teile oluline, siis siin on meie valik:

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

Viimase massiivi väärtuse (väärtuste) väljastamine

MASSED
See tehnika nõuab slice() meetodi kasutamist.

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

JSON-koodi vormindamine

JSON

Võib-olla olete juba kasutanud JSON.stringify. Kas teadsite, et see aitab teie JSON-i vormindamisel?

Stringify() meetod võtab vastu kaks valikulist parameetrit: funktsiooni replacer, mida saab kasutada kuvatava JSON-i filterdamiseks, ja väärtuse space.

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

Ja kõik, loodan, et kõik antud tehnikad olid kasulikud. Milliseid nippe te teate? Kirjutage need kommentaaridesse.

Skillbox soovitab:

• Kaheaastane praktiline kursus „Ma olen PRO veebiarendaja“.
• Veebikursus „C# arendaja algusest peale“.
• Praktiline aastakursus „PHP arendaja algusest PRO-ni“.

Allikas: habr.com