12 JavaScripti töövõtet, mida enamikus õpetustes ei ole

Kui ma JavaScripti õppimist alustasin, koostasin ma kõigepealt loendi nippidest, mis aitasid mul aega säästa. Tõin need välja teiste programmeerijate käest, erinevatelt veebisaitidelt ja käsiraamatutest.

Selles artiklis tutvustan ma 12 suurepärast viisi oma JavaScripti koodi parandamiseks ja kiirendamiseks. Enamasti on need universaalsed.

Tuletame meelde: kõigile «Habr» lugejatele – 10 000 rubla allahindlus igale Skillboxi kursusele, kasutades sooduskoodi «Habr».

Skillbox soovitab: Praktiline kursus «Mobiilne arendaja PRO».

Ainult unikaalsete väärtuste filtreerimine

MASSED

ES6-s tutvustatud Set objektitüübi abil, koos …, levitamisoperaatoriga, saame kasutada seda uue massiivi loomiseks, milles on vaid unikaalsed väärtused.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];

console.log(uniqueArray); // Tulem: [1, 2, 3, 5]

Tavalisel juhul oleks sama toimingu täitmiseks vajalik 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, funksioone või lisamassiive, vajate teistsugust lähenemist.

Massiivi pikkuse vahemälu tsüklites

TSÜKLID

Kui õpite for tsüklite kohta, järgite teie tavapärast protseduuri:

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

Kuid sel juhul kontrollib for-tsükkel massiivi pikkust iga kord, kui see käib.

Mõnikord võib see olla kasulik, kuid enamasti on efektiivsem massiivi pikkuse vahemälu salvestamine, mis nõuab ühe päringu. Saame seda teha määrates pikkuse muutujaks, kus seame i muutuja, näiteks nii:

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

Põhimõtteliselt on see peaaegu sama nagu ülal, kuid tsükli suuruse suurenedes saame märkimisväärset ajasäästu.

Lühikese tõukefulga hindamine (McCarthy hindamine)

TINGIMUSE OPERATORID

Kolmeline operaator on kiire ja tõhus viis lihtsate (ja mõnikord mitte nii lihtsate) tingimuslause kirjutamiseks:

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

Kuid mõnikord on isegi kolmene operaator keerulisem, kui vaja. Selle asemel saame kasutada ‘ja’ && ja ‘või’ || loogilisi operaatorid mõne väljendi hindamiseks veel lühemal viisil. Seda nimetatakse sageli "lühikeseks tõukefulgaks" või "lühidetuks hindamiseks".

Kuidas see töötab

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

Kasutamine && tagastab esimese false väärtuse. Kui iga operand hinnatakse true-ks, 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 true väärtuse. Kui iga operand hinnatakse false-ks, 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 muutuja pikkuse, kuid ei tea selle tüüpi.

Sellisel juhul võiksime kasutada if/else, et kontrollida, kas foo on sobiv tüüp, kuid see meetod võib osutuda liiga pikkaks. Seetõttu on parem kasutada meie "lühiühendust".

return (foo || []).length;

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

Näide 2

Kas olete kogenud raskusi sissekud objekte? Te ei pruugi teada, kas objekt või üks tema alamomadustest eksisteerib, ja see võib põhjustada probleeme.

Näiteks tahtsime pääseda this.state sees olevale data omadusele, kuid data ei ole määratletud, kuni meie programm ei tagasta päringut.

Sõltuvalt sellest, kus me seda kasutame, võib this.state.data kutsumine takistada rakenduse käivitamist. Probleemi lahendamiseks võiksime seda tingimusväljendisse panna:

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

Sobivam lahendus oleks kasutada 'või' operaatorit.

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

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

Valikuline ahel

Saame kaaluda valikulise ahela kasutamist, kui proovime tagastada omadust sügaval puustruktuuris. Seega saab küsimärk? kasutada omaduse väljavõtmiseks, ainult kui see ei ole null.

Näiteks võiksime ülaltoodud näite refaktoreerida, 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ääratud või mitte, võiksime tagastada this.state?.data.

Tüüpide Muundamine

TÜÜPIDE MUUNDAMINE

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

Kuni teisiti ei ole märgitud, on kõik JavaScripti väärtused tõele vastavad, välja arvatud 0, „”, null, määratlemata, NaN ja loomulikult false. Viimased on valeväärtused.

Saame lihtsalt vahetada nende vahel, kasutades operaatorit !, mis muudab tüübi ka loogiliseks.

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

Muundamine stringiks

TÜÜPIDE MUUNDAMINE

Kiiret täisarvu muundamist stringiks saab teha järgmiselt.

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

Muundamine täisarvuks

TÜÜPIDE MUUNDAMINE

Tagasimuundamine toimub nii.

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

Seda meetodit saab kasutada ka boolean tüüpi andmete muundamiseks tavaliseks arvuks, nagu allpool näidatud:

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

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

Kaks järjestikust tilde tühistavad toimingu, sest — (- — n — 1) — 1 = n + 1 — 1 = n. Teisisõnu, ~ -16 on 15.

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

<Quick Powers

OPERATSIOONS

Alates ES7-st saab kasutada astendamise operaatorit ** kui lühendit astmete jaoks. See on palju kiirem kui Math.pow (2, 3) kasutamine. Tundub lihtne, kuid see punkt on loetelu trikkides, kuna see ei ole alati mainitud.

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

Ärge segage seda sümboliga ^, mida tavaliselt kasutatakse astendamiseks. Kuid JavaScriptis on see operaator XOR.

Enne ES7 lühendit ** sai kasutada ainult astmete jaoks, mille aluseks oli 2, kasutades bititasemel vasakpoolset nihutamist <<:

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

Näiteks, 2 << 3 = 16 on ekvivalentne väljendile 2 ** 4 = 16.

Float täisarvuks

OPERATSIOONS / TÜÜPIDE MUUNDAMINE

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

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

Käitumine sõltub enamikul juhtudel 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 kümnendkomma, muutes ujuva koma arvu täisarvuks.

Sama tulemuse ringmiseks saate kasutada ~~. Pärast sundmuundamist täisarvuks jääb väärtus muutumatuks.

Eemaldame lõpparvud

OR operaatorit saab kasutada, et eemaldada mistahes arv numbreid. See tähendab, et me ei pea tüüpe ümber 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 nooldeklareerimist saab kasutada klassi meetodites ja see eeldab sidumist. Tänu sellele saame 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 meetod se on automaatselt seotud!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

Massiivi lõikamine

MASSED

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

Näiteks, kui teate originaalmassiivi suurust, saate ümber määrata selle pikkuse omaduse järgmise koodiga:

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

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

Kuid on olemas veel üks meetod, mis on isegi kiirem. Kui kiirus on teile oluline, on meie valik järgmine:

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

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

Viimase (viimaste) massiivi väärtuste prindik

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

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

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

JSON-koodi vormindamine

JSON

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

Stringify() meetod võtab kaks valikulist parameetrit: replacer funktsiooni, mida saab kasutada kuvatava JSONi filtreerimiseks, ja space väärtuse.

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

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

Ja kõik, loodan, et kõik mainitud nipid on olnud kasulikud. Milliseid trikke tead sina? Kirjuta need kommentaaridesse.

Skillbox soovitab:

• Kaks aastat praktilist kursust „Mina olen PRO veebiarendaja“.
• Veebikursus C# arendaja 0-st.
• Praktiline aastakursus «PHP-arendaja 0-st PRO-ni».

Allikas: habr.com