Kun aloin oppia JavaScriptiä, tein ensimmäisenä luettelon temppuista, jotka auttoivat minua säästämään aikaa. Huomasin ne muilta ohjelmoijilta, eri sivustoilta ja käsikirjoista.
Tässä artikkelissa näytän sinulle 12 loistavaa tapaa parantaa ja nopeuttaa JavaScript-koodiasi. Useimmissa tapauksissa ne ovat universaaleja.
Muistutamme sinua: kaikille "Habrin" lukijoille - 10 000 ruplan alennus ilmoittautuessaan mille tahansa Skillbox-kurssille "Habr" -tarjouskoodilla.
Skillbox suosittelee: Käytännön kurssi .
Yksilöllisten arvojen suodattaminen
MATKELIT
Set-objektityyppi otettiin käyttöön ES6:ssa, sekä..., spread-operaattori, jonka avulla voimme luoda uuden taulukon, joka sisältää vain yksilöllisiä arvoja.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Normaalissa tilanteessa tarvitaan paljon enemmän koodia saman toiminnon suorittamiseen.
Tämä tekniikka toimii taulukoissa, jotka sisältävät primitiivisiä tyyppejä: undefined, null, boolen, merkkijono ja numero. Jos työskentelet objekteja, toimintoja tai lisätaulukoita sisältävän taulukon kanssa, tarvitset toisenlaisen lähestymistavan.
Välimuistitaulukon pituus jaksoissa
PYÖRÄT
Kun opit silmukoita, noudatat vakiomenettelyä:
for (let i = 0; i < array.length; i++){
console.log(i);
}Kuitenkin tällä syntaksilla for-silmukka tarkistaa toistuvasti taulukon pituuden jokaisessa iteraatiossa.
Joskus tämä voi olla hyödyllistä, mutta useimmissa tapauksissa on tehokkaampaa tallentaa taulukon pituus välimuistiin, mikä vaatii yhden pääsyn siihen. Voimme tehdä tämän määrittämällä pituusmuuttujan, jossa määritämme muuttujan i, seuraavasti:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Periaatteessa lähes sama kuin yllä, mutta silmukan kokoa suurentamalla saadaan aikaan merkittäviä ajansäästöjä.
Oikosulkuluokitus (McCarthy-luokitus)
EHDOLLISET OPERAATTORIT
Kolmiosainen operaattori on nopea ja tehokas tapa kirjoittaa yksinkertaisia (ja joskus ei niin yksinkertaisia) ehdollisia lausekkeita:
x> 100? "yli 100": "vähemmän kuin 100";
x> 100? (x>200? "enemmän kuin 200": "100-200"): "vähemmän kuin 100";
Mutta joskus jopa kolmiosainen operaattori on monimutkaisempi kuin vaaditaan. Voimme käyttää "ja" && ja "tai" sijasta || Boolen operaattorit arvioimaan tiettyjä lausekkeita vieläkin tiiviimmällä tavalla. Sitä kutsutaan usein "oikosulkuksi" tai "oikosulkuarvoksi".
Kuinka tämä toimii
Oletetaan, että haluamme palauttaa vain yhden kahdesta tai useammasta ehdosta.
&& palauttaa ensimmäisen väärän arvon. Jos kunkin operandin arvo on tosi, viimeksi arvioitu lauseke palautetaan.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Käytetään || palauttaa ensimmäisen todellisen arvon. Jos jokaisen operandin arvo on epätosi, palautetaan viimeinen arvioitu arvo.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullEsimerkki 1
Oletetaan, että haluamme palauttaa muuttujan pituuden, mutta emme tiedä sen tyyppiä.
Tässä tapauksessa voit tarkistaa if/else-komennolla, että foo on oikea tyyppi, mutta tämä menetelmä voi olla liian pitkä. Siksi on parempi ottaa "oikosulkumme".
return (foo || []).length;Jos muuttujalla foo on sopiva pituus, se palautetaan. Muuten saamme 0.
Esimerkki 2
Onko sinulla ollut ongelmia sisäkkäisen objektin käytössä? Et ehkä tiedä, onko objekti tai jokin sen aliominaisuuksista olemassa, ja tämä voi johtaa ongelmiin.
Halusimme esimerkiksi päästä data-ominaisuuteen this.state, mutta tietoja ei määritellä ennen kuin ohjelmamme palauttaa hakupyynnön.
Riippuen siitä, missä käytämme sitä, tämän.state.data-tiedoston kutsuminen voi estää sovelluksen käynnistymisen. Ongelman ratkaisemiseksi voisimme kääriä tämän ehdolliseen lausekkeeseen:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Parempi vaihtoehto olisi käyttää "tai"-operaattoria.
return (this.state.data || 'Fetching Data');Emme voi muuttaa yllä olevaa koodia käyttämään &&. Tietojen haku -operaattori && this.state.data palauttaa tämän.tilatiedot riippumatta siitä, onko se määrittelemätön vai ei.
Valinnainen ketju
Voidaan ehdottaa valinnaisen ketjutuksen käyttöä, kun yrität palauttaa ominaisuuden syvälle puurakenteeseen. Eli kysymysmerkkisymboli? voidaan käyttää ominaisuuden hakemiseen vain, jos se ei ole tyhjä.
Voisimme esimerkiksi refaktoroida yllä olevan esimerkin saadaksemme this.state.data?..(). Toisin sanoen tiedot palautetaan vain, jos arvo ei ole nolla.
Tai jos sillä on merkitystä, onko tila määritetty vai ei, voimme palauttaa tämän.tila?.data.
Muunna Boolen kieleksi
TYYPIN MUUNNOS
Tavallisten loogisten funktioiden true ja false lisäksi JavaScript käsittelee myös kaikkia muita arvoja totuuksina tai väärinä.
Ellei toisin mainita, kaikki JavaScriptin arvot ovat totuudenmukaisia, paitsi 0, "", null, määrittelemätön, NaN ja tietysti false. Jälkimmäiset ovat vääriä.
Voimme helposti vaihtaa näiden välillä käyttämällä !-operaattoria, joka myös muuntaa tyypin loogisiksi.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Muunna merkkijonoksi
TYYPIN MUUNNOS
Nopea muunnos kokonaisluvusta merkkijonoksi voidaan tehdä seuraavasti.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Muunna kokonaisluvuksi
TYYPIN MUUNNOS
Suoritamme käänteisen muunnoksen näin.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Tätä menetelmää voidaan käyttää myös loogisen datatyypin muuntamiseen tavallisiksi numeerisiksi arvoiksi, kuten alla on esitetty:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Saattaa olla tilanteita, joissa + tulkitaan ketjutusoperaattoriksi eikä summausoperaattoriksi. Tämän välttämiseksi sinun tulee käyttää tildejä: ~~. Tämä operaattori vastaa -n-1:tä. Esimerkiksi ~15 on yhtä kuin -16.
Kahden aaltoviivan käyttäminen peräkkäin kumoaa operaation, koska - (- - n - 1) - 1 = n + 1 - 1 = n. Toisin sanoen ~-16 on yhtä suuri kuin 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
TOIMINTA
ES7:stä alkaen voit käyttää eksponentiooperaattoria ** potenssien lyhenteenä. Tämä on paljon nopeampaa kuin Math.pow(2, 3) käyttäminen. Se näyttää yksinkertaiselta, mutta tämä kohta on sisällytetty tekniikoiden luetteloon, koska sitä ei mainita kaikkialla.
console.log(2 ** 3); // Result: 8Sitä ei pidä sekoittaa ^-symboliin, jota käytetään yleisesti eksponentioinnissa. Mutta JavaScriptissä tämä on XOR-operaattori.
Ennen ES7:ää **-oikopolkua voitiin käyttää vain kanta 2:n tehoille käyttämällä bittikohtaista vasemman siirtooperaattoria <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Esimerkiksi 2 << 3 = 16 vastaa 2** 4 = 16.
Kelluu kokonaislukuun
TOIMINNOT / TYYPIN MUUNTAMINEN
Jos haluat muuntaa floatin kokonaisluvuksi, voit käyttää Math.floor(), Math.ceil() tai Math.round(). Mutta on olemassa nopeampi tapa, tähän käytämme |, eli OR-operaattoria.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Käyttäytyminen | riippuu suurelta osin siitä, onko kyseessä positiivinen vai negatiivinen luku, joten tämä menetelmä sopii vain, jos olet varma tekemästäsi.
n | 0 poistaa kaiken desimaalierottimen jälkeen ja katkaisee floatin kokonaisluvuksi.
Voit saada saman pyöristystehosteen käyttämällä ~~. Pakotetun muuntamisen jälkeen kokonaisluvuksi arvo pysyy muuttumattomana.
Loppunumeroiden poistaminen
TAI-operaattoria voidaan käyttää minkä tahansa määrän numeroiden poistamiseen numerosta. Tämä tarkoittaa, että meidän ei tarvitse muuntaa tyyppejä, kuten tässä:
let str = "1553";
Number(str.substring(0, str.length - 1));Sen sijaan kirjoitamme yksinkertaisesti:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Automaattinen linkitys
LUOKAT
ES6-nuolimerkintöjä voidaan käyttää luokkametodeissa, ja sitominen on implisiittistä. Tämä tarkoittaa, että voit sanoa hyvästit toistuville ilmauksille, kuten 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>
</>
)
}
};Array trimmaus
MATKELIT
Jos sinun on poistettava arvot taulukosta, on olemassa nopeampia menetelmiä kuin splice().
Jos esimerkiksi tiedät alkuperäisen taulukon koon, voit ohittaa sen pituusominaisuuden seuraavasti:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Mutta on toinenkin tapa ja nopeampi. Jos nopeus on sinulle tärkeintä, tässä on valintamme:
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]Tulostetaan taulukon viimeinen arvo
MATKELIT
Tämä tekniikka edellyttää slice()-menetelmän käyttöä.
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-koodin muotoilu
JSON
Olet ehkä jo käyttänyt JSON.stringifyta. Tiesitkö, että se auttaa alustamaan JSON:si?
Stringify()-menetelmässä on kaksi valinnaista parametria: korvausfunktio, jota voidaan käyttää näytettävän JSON-tiedoston suodattamiseen, ja välilyöntiarvo.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Siinä kaikki, toivon, että kaikista näistä tekniikoista oli hyötyä. Mitä temppuja tiedät? Kirjoita ne kommentteihin.
Skillbox suosittelee:
- Kahden vuoden käytännön kurssi .
- Verkkokurssi .
- Käytännön vuoden kurssi .
Lähde: will.com