Da jeg begynte å lære JavaScript, var det første jeg gjorde å lage en liste over triks som hjalp meg å spare tid. Jeg så dem fra andre programmerere, på forskjellige nettsteder og i manualer.
I denne artikkelen skal jeg vise deg 12 flotte måter å forbedre og øke hastigheten på JavaScript-koden på. I de fleste tilfeller er de universelle.
Vi minner om: for alle lesere av "Habr" - en rabatt på 10 000 rubler når du melder deg på et hvilket som helst Skillbox-kurs ved å bruke kampanjekoden "Habr".
Skillbox anbefaler: Praktisk kurs .
Filtrering av unike verdier
ARRASER
Set-objekttypen ble introdusert i ES6, sammen med..., spredningsoperatoren, vi kan bruke den til å lage en ny matrise som bare inneholder unike verdier.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]I en normal situasjon trengs mye mer kode for å utføre den samme operasjonen.
Denne teknikken fungerer for matriser som inneholder primitive typer: udefinert, null, boolsk, streng og tall. Hvis du arbeider med en matrise som inneholder objekter, funksjoner eller ekstra matriser, trenger du en annen tilnærming.
Lengde på cache-array i sykluser
SYKLER
Når du lærer for loops, følger du standardprosedyren:
for (let i = 0; i < array.length; i++){
console.log(i);
}Men med denne syntaksen kontrollerer for-løkken gjentatte ganger lengden på matrisen hver iterasjon.
Noen ganger kan dette være nyttig, men i de fleste tilfeller er det mer effektivt å cache lengden på matrisen, noe som vil kreve én tilgang til den. Vi kan gjøre dette ved å definere en lengdevariabel der vi definerer variabelen i, slik:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}I prinsippet nesten det samme som ovenfor, men ved å øke løkkestørrelsen vil vi få betydelige tidsbesparelser.
Kortslutningsvurdering (McCarthy-vurdering)
BETINGEDE OPERATØRER
Den ternære operatoren er en rask og effektiv måte å skrive enkle (og noen ganger ikke så enkle) betingede utsagn:
x> 100? «mer enn 100»: «mindre enn 100»;
x> 100? (x>200? "mer enn 200": "mellom 100-200"): "mindre enn 100";
Men noen ganger er til og med den ternære operatøren mer komplisert enn nødvendig. Vi kan bruke 'og' && og 'eller' i stedet || Boolske operatorer for å evaluere visse uttrykk på en enda mer kortfattet måte. Det kalles ofte "kortslutning" eller "kortslutningsvurdering".
Hvordan fungerer det
La oss si at vi ønsker å returnere bare én av to eller flere forhold.
Bruk av && vil returnere den første falske verdien. Hvis hver operand evalueres til sann, vil det siste evaluerte uttrykket bli returnert.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Bruke || vil returnere den første sanne verdien. Hvis hver operand evalueres til usann, vil den siste evaluerte verdien bli returnert.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullEksempel 1
La oss si at vi ønsker å returnere lengden til en variabel, men vi vet ikke typen.
I dette tilfellet kan du bruke if/else for å sjekke at foo er riktig type, men denne metoden kan være for lang. Derfor er det bedre å ta vår "kortslutning".
return (foo || []).length;Hvis variabelen foo har en passende lengde, vil den bli returnert. Ellers får vi 0.
Eksempel 2
Har du hatt problemer med å få tilgang til et nestet objekt? Du vet kanskje ikke om et objekt eller en av dets underegenskaper eksisterer, og dette kan føre til problemer.
For eksempel ønsket vi å få tilgang til dataegenskapen i this.state, men data er ikke definert før programmet vårt returnerer en henteforespørsel.
Avhengig av hvor vi bruker det, kan det å kalle this.state.data forhindre at applikasjonen starter. For å løse problemet kan vi pakke dette inn i et betinget uttrykk:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Et bedre alternativ ville være å bruke "eller"-operatoren.
return (this.state.data || 'Fetching Data');Vi kan ikke endre koden ovenfor for å bruke &&. 'Henter data' && this.state.data-operatøren vil returnere this.state.data uansett om det er udefinert eller ikke.
Valgfri kjede
Man kan foreslå å bruke valgfri kjetting når man prøver å returnere en eiendom dypt inn i en trestruktur. Så spørsmålstegnsymbolet? kan brukes til å hente en egenskap bare hvis den ikke er null.
For eksempel kan vi refaktorisere eksempelet ovenfor for å få denne.tilstandsdata?..(). Det vil si at data returneres bare hvis verdien ikke er null.
Eller, hvis det spiller noen rolle om tilstand er definert eller ikke, kan vi returnere denne.tilstand?.data.
Konverter til boolsk
TYPE KONVERTERING
I tillegg til de vanlige boolske funksjonene sant og usant, behandler JavaScript også alle andre verdier som sanne eller falske.
Inntil annet er angitt, er alle verdier i JavaScript sanne, bortsett fra 0, "", null, undefined, NaN og, selvfølgelig, falsk. Sistnevnte er falske.
Vi kan enkelt bytte mellom de to ved å bruke !-operatoren, som også konverterer typen til boolsk.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Konverter til streng
TYPE KONVERTERING
En rask konvertering fra et heltall til en streng kan gjøres som følger.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Konverter til heltall
TYPE KONVERTERING
Vi utfører den omvendte transformasjonen slik.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Denne metoden kan også brukes til å konvertere den boolske datatypen til vanlige numeriske verdier, som vist nedenfor:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Det kan være situasjoner der + vil bli tolket som en sammenkoblingsoperator i stedet for en addisjonsoperator. For å unngå dette bør du bruke tildes: ~~. Denne operatoren tilsvarer -n-1. For eksempel er ~15 lik -16.
Å bruke to tilder på rad negerer operasjonen fordi - (- - n - 1) - 1 = n + 1 - 1 = n. Med andre ord, ~-16 er lik 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
OPERASJONER
Fra og med ES7 kan du bruke eksponentieringsoperatoren ** som en forkortelse for potenser. Dette er mye raskere enn å bruke Math.pow(2, 3). Det virker enkelt, men dette punktet er inkludert i listen over teknikker, siden det ikke er nevnt overalt.
console.log(2 ** 3); // Result: 8Det må ikke forveksles med ^-symbolet, som vanligvis brukes for eksponentiering. Men i JavaScript er dette XOR-operatøren.
Før ES7 kunne **-snarveien bare brukes for potenser til base 2 ved å bruke den bitvise venstreskiftoperatoren <<:
Math.pow(2, n);
2 << (n - 1);
2**n;For eksempel tilsvarer 2 << 3 = 16 2 ** 4 = 16.
Flyte til heltall
OPERASJONER / TYPE KONVERTERING
Hvis du trenger å konvertere en float til et heltall, kan du bruke Math.floor(), Math.ceil() eller Math.round(). Men det er en raskere måte, for dette bruker vi |, det vil si OR-operatoren.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Atferd | avhenger i stor grad av om du har å gjøre med positive eller negative tall, så denne metoden er kun egnet hvis du er trygg på det du gjør.
n | 0 fjerner alt etter desimalskilletegnet, og avkorter flottøren til et heltall.
Du kan få samme avrundingseffekt ved å bruke ~~. Etter tvungen konvertering til et heltall forblir verdien uendret.
Fjerner etterfølgende tall
OR-operatoren kan brukes til å fjerne et hvilket som helst antall sifre fra et tall. Dette betyr at vi ikke trenger å konvertere typer som her:
let str = "1553";
Number(str.substring(0, str.length - 1));I stedet skriver vi bare:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Automatisk kobling
KLASSER
ES6 pilnotasjoner kan brukes i klassemetoder, og binding er underforstått. Dette betyr at du kan si farvel til repeterende uttrykk som 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 trimming
ARRASER
Hvis du trenger å fjerne verdier fra en matrise, finnes det raskere metoder enn spleise().
Hvis du for eksempel vet størrelsen på den originale matrisen, kan du overstyre lengdeegenskapen på følgende måte:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Men det finnes en annen metode, og en raskere. Hvis hastighet er det som betyr noe for deg, her er våre valg:
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]Skriver ut siste verdi(e) av en matrise
ARRASER
Denne teknikken krever bruk av slice()-metoden.
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]Formatering av JSON-kode
JSON
Du har kanskje allerede brukt JSON.stringify. Visste du at det hjelper med å formatere JSON-en din?
stringify()-metoden tar to valgfrie parametere: en erstatningsfunksjon, som kan brukes til å filtrere JSON-en som vises, og en mellomromsverdi.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Det er alt, jeg håper at alle disse teknikkene var nyttige. Hvilke triks kan du? Skriv dem i kommentarene.
Skillbox anbefaler:
- Toårig praktisk kurs .
- Online kurs .
- Praktisk årskurs .
Kilde: www.habr.com