ProHoster > Blogi > internetiuudised > 12 JavaScripti trikki, millest enamik õpetusi mööda ei pane

12 JavaScripti trikki, millest enamik õpetusi mööda ei pane

12 JavaScripti trikki, millest enamik õpetusi mööda ei pane

Kui hakkasin JavaScripti õppima, koostasin esimese asjana nimekirja nippidest, mis aitasid mul aega säästa. Märkasin neid teistelt programmeerijatelt, erinevatel saitidel ja käsiraamatutes.

Selles artiklis näitan teile 12 suurepärast viisi JavaScripti koodi täiustamiseks ja kiirendamiseks. Enamikul juhtudel on need universaalsed.

Tuletame meelde: kõigile "Habr" lugejatele - allahindlus 10 000 rubla, kui registreerute mis tahes Skillboxi kursusele, kasutades sooduskoodi "Habr".

Skillbox soovitab: Praktiline kursus "Mobile Developer PRO".

Unikaalsete väärtuste filtreerimine

MAASSID

Objektitüüp Set võeti kasutusele ES6-s koos operaatoriga..., spread, 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); // Result: [1, 2, 3, 5]

Tavaolukorras on sama toimingu tegemiseks vaja palju rohkem koodi.

See meetod töötab massiivide puhul, mis sisaldavad primitiivseid tüüpe: määratlemata, null, tõeväärtus, string ja arv. Kui töötate massiiviga, mis sisaldab objekte, funktsioone või täiendavaid massiive, vajate teistsugust lähenemist.

Vahemälu massiivi pikkus tsüklites

TSIKLID

Silmuste õppimisel järgite standardprotseduuri:

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

Kuid selle süntaksiga kontrollib for-silmus iga iteratsiooni korral korduvalt massiivi pikkust.

Mõnikord võib see olla kasulik, kuid enamikul juhtudel on tõhusam massiivi pikkuse vahemällu salvestamine, mis nõuab ühte juurdepääsu. Seda saame teha, defineerides pikkuse muutuja, kus defineerime muutuja i järgmiselt:

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

Põhimõtteliselt peaaegu sama, mis ülal, kuid silmuse suurust suurendades saame märkimisväärse aja kokkuhoiu.

Lühise reiting (McCarthy reiting)

TINGIMUSLIKUD OPERAATORID

Kolmikoperaator on kiire ja tõhus viis lihtsate (ja mõnikord mitte nii lihtsate) tingimuslausete kirjutamiseks:

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

Kuid mõnikord on isegi kolmeosaline operaator nõutavast keerulisem. Võime kasutada 'ja' && ja 'või' asemel || Boole'i ​​operaatorid, et hinnata teatud avaldisi veelgi kokkuvõtlikumal viisil. Seda nimetatakse sageli "lühiseks" või "lühise reitinguks".

Kuidas see töötab

Oletame, et tahame tagastada ainult ühe kahest või enamast tingimusest.

&& kasutamine tagastab esimese vale väärtuse. Kui iga operandi väärtus on tõene, tagastatakse viimati hinnatud avaldis.

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

Kasutades || tagastab esimese tõelise väärtuse. Kui iga operandi väärtus on väär, tagastatakse viimati hinnatud väärtus.

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

Näide 1

Oletame, et tahame tagastada muutuja pikkuse, kuid me ei tea selle tüüpi.

Sel juhul saate kasutada if/else, et kontrollida, kas foo on õige tüüp, kuid see meetod võib olla liiga pikk. Seetõttu on parem võtta meie "lühis".

return (foo || []).length;

Kui muutujal foo on sobiv pikkus, siis see tagastatakse. Muidu saame 0.

Näide 2

Kas teil on olnud probleeme pesastatud objektile juurdepääsuga? Te ei pruugi teada, kas objekt või mõni selle alamomadustest on olemas, ja see võib põhjustada probleeme.

Näiteks soovisime juurdepääsu andmeatribuudile this.state, kuid andmeid ei määratleta enne, kui meie programm tagastab toomispäringu.

Olenevalt sellest, kus me seda kasutame, võib this.state.data kutsumine takistada rakenduse käivitamist. Probleemi lahendamiseks võiksime selle mähkida tingimusavaldisesse:

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

Parem variant oleks kasutada operaatorit "või".

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

Me ei saa ülaltoodud koodi && kasutamiseks muuta. Operaator 'Andmete toomine' && this.state.data tagastab selle.state.data olenemata sellest, kas need on määratlemata või mitte.

Valikuline kett

Kui proovite tagastada atribuut sügavale puustruktuuri, võib soovitada kasutada valikulist aheldamist. Niisiis, küsimärgi sümbol? saab kasutada atribuudi hankimiseks ainult siis, kui see pole null.

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

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

Teisenda Boole'i ​​keeleks

TÜÜBI KONVERSIOON

Lisaks tavalistele tõeväärtusfunktsioonidele tõene ja väär, käsitleb JavaScript ka kõiki muid väärtusi tõeste või vääratena.

Kuni pole teisiti märgitud, on kõik JavaScripti väärtused tõesed, välja arvatud 0, "", null, määratlemata, NaN ja loomulikult väär. Viimased on valed.

Nende kahe vahel saame hõlpsalt vahetada operaatori ! abil, mis teisendab tüübi ka tõeväärtuslikuks.

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

Teisenda stringiks

TÜÜBI KONVERSIOON

Kiire teisenduse täisarvust stringiks saab teha järgmiselt.

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

Teisenda täisarvuks

TÜÜBI KONVERSIOON

Teostame pöördteisendust nii.

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

Seda meetodit saab kasutada ka tõeväärtusliku andmetüübi teisendamiseks tavalisteks arvväärtusteks, nagu allpool näidatud:

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

Võib esineda olukordi, kus + tõlgendatakse pigem konkatenatsioonioperaatorina kui liitmistehterina. Selle vältimiseks peaksite kasutama tilde: ~~. See operaator on samaväärne -n-1-ga. Näiteks ~15 võrdub -16.

Kahe järjestikuse tilde kasutamine tühistab operatsiooni, sest - (- - n - 1) - 1 = n + 1 - 1 = n. Teisisõnu, ~-16 võrdub 15-ga.

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

<Quick Powers

TEGEVUSED

Alates ES7-st saate astmete lühendina kasutada astendamise operaatorit **. See on palju kiirem kui Math.pow(2, 3) kasutamine. Tundub lihtne, kuid see punkt on tehnikate loendis, kuna seda ei mainita kõikjal.

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

Seda ei tohiks segi ajada sümboliga ^, mida tavaliselt kasutatakse astendamiseks. Kuid JavaScriptis on see XOR-i operaator.

Enne ES7 sai ** otseteed kasutada ainult aluse 2 võimsuste jaoks, kasutades bitipõhise vasakpoolse nihke operaatorit <<:

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

Näiteks 2 << 3 = 16 võrdub 2 ** 4 = 16.

Ujumine täisarvuni

TEGEVUSED / TÜÜBI TEISED

Kui teil on vaja ujuk teisendada täisarvuks, saate kasutada Math.floor(), Math.ceil() või Math.round(). Kuid on ka kiirem viis, selleks kasutame |, see tähendab operaatorit VÕI.

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

Käitumine | sõltub suuresti sellest, kas tegemist on positiivsete või negatiivsete arvudega, seega sobib see meetod ainult siis, kui olete oma tegemistes kindel.

n | 0 eemaldab kõik pärast kümnendkoha eraldajat, kärpides ujuki täisarvuks.

Sama ümardusefekti saate kasutada ~~ abil. Pärast täisarvuks sunnitud teisendamist jääb väärtus muutumatuks.

Lõpunumbrite eemaldamine

Operaatorit VÕI saab kasutada numbrist mis tahes arvu numbrite eemaldamiseks. See tähendab, et me ei pea teisendama tüüpe nagu siin:

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

Selle asemel kirjutame lihtsalt:

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

Automaatne linkimine

KLASSID

Klassimeetodites saab kasutada ES6 noolemärke ja see eeldab sidumist. See tähendab, et saate hüvasti jätta selliste korduvate väljenditega nagu 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>
      </>
    )
  }
};

Massiivi kärpimine

MAASSID

Kui teil on vaja massiivist väärtusi eemaldada, on olemas kiiremad meetodid kui splaiss().

Näiteks kui teate algse massiivi suurust, saate selle pikkuse atribuudi järgmiselt alistada.

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

Kuid on veel üks ja kiirem meetod. Kui kiirus on teie jaoks oluline, on siin meie valikud:

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]

Massiivi viimaste väärtuste trükkimine

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

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-koodi vormindamine

JSON

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

Stringify() meetodil on kaks valikulist parameetrit: asendusfunktsioon, mida saab kasutada kuvatava JSON-i filtreerimiseks, ja tühiku väärtus.

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

See on kõik, ma loodan, et kõik need tehnikad olid kasulikud. Milliseid nippe sa tead? Kirjutage need kommentaaridesse.

Skillbox soovitab:

Allikas: www.habr.com

Lisa kommentaar