Da jeg begyndte at lære JavaScript, var det første, jeg gjorde, at lave en liste over tricks, der hjalp mig med at spare tid. Jeg så dem fra andre programmører, på forskellige websteder og i manualer.
I denne artikel vil jeg vise dig 12 gode måder at forbedre og fremskynde din JavaScript-kode på. I de fleste tilfælde er de universelle.
Påmindelse: for alle læsere af "Habr" - en rabat på 10 rubler ved tilmelding til ethvert Skillbox-kursus ved hjælp af "Habr"-kampagnekoden.
Skillbox anbefaler: Praktisk kursus .
Filtrering af unikke værdier
MATERIALER
Set-objekttypen blev introduceret i ES6, sammen med..., spread-operatoren, vi kan bruge den til at skabe et nyt array, der kun indeholder unikke værdier.
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 situation kræves der meget mere kode for at udføre den samme handling.
Denne teknik fungerer for arrays, der indeholder primitive typer: undefined, null, boolean, string og number. Hvis du arbejder med et array, der indeholder objekter, funktioner eller yderligere arrays, har du brug for en anden tilgang.
Længde af cache-array i cyklusser
CYKLER
Når du lærer for loops, følger du standardproceduren:
for (let i = 0; i < array.length; i++){
console.log(i);
}Men med denne syntaks kontrollerer for-løkken gentagne gange længden af arrayet hver iteration.
Nogle gange kan dette være nyttigt, men i de fleste tilfælde er det mere effektivt at cache længden af arrayet, hvilket vil kræve én adgang til det. Vi kan gøre dette ved at definere en længdevariabel, hvor vi definerer variablen i, sådan her:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}I princippet næsten det samme som ovenfor, men ved at øge løkkestørrelsen vil vi få betydelige tidsbesparelser.
Kortslutningsvurdering (McCarthy-vurdering)
BETINGEDE OPERATØRER
Den ternære operator er en hurtig og effektiv måde at skrive enkle (og nogle gange ikke så simple) betingede udsagn:
x> 100? "mere end 100": "mindre end 100";
x> 100? (x>200? "mere end 200": "mellem 100-200"): "mindre end 100";
Men nogle gange er selv den ternære operatør mere kompliceret end nødvendigt. Vi kan bruge 'og' && og 'eller' i stedet for || Booleske operatorer til at evaluere bestemte udtryk på en endnu mere kortfattet måde. Det kaldes ofte "kortslutning" eller "kortslutningsvurdering".
Hvordan fungerer denne her
Lad os sige, at vi kun ønsker at returnere én af to eller flere betingelser.
Brug af && vil returnere den første falske værdi. Hvis hver operand evalueres til sand, vil det sidst evaluerede udtryk blive returneret.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Brug af || vil returnere den første sande værdi. Hvis hver operand evalueres til falsk, vil den sidst evaluerede værdi blive returneret.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullEksempel 1
Lad os sige, at vi ønsker at returnere længden af en variabel, men vi kender ikke dens type.
I dette tilfælde kan du bruge if/else til at kontrollere, at foo er den rigtige type, men denne metode kan være for lang. Derfor er det bedre at tage vores "kortslutning".
return (foo || []).length;Hvis den variable foo har en passende længde, vil den blive returneret. Ellers får vi 0.
Eksempel 2
Har du haft problemer med at få adgang til et indlejret objekt? Du ved måske ikke, om et objekt eller en af dets underegenskaber eksisterer, og det kan føre til problemer.
For eksempel ønskede vi at få adgang til dataegenskaben i this.state, men data er ikke defineret, før vores program returnerer en hentningsanmodning.
Afhængigt af hvor vi bruger det, kan kald af this.state.data forhindre applikationen i at starte. For at løse problemet kunne vi pakke dette ind i et betinget udtryk:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}En bedre mulighed ville være at bruge "eller"-operatoren.
return (this.state.data || 'Fetching Data');Vi kan ikke ændre koden ovenfor for at bruge &&. Operatøren 'Fetching Data' && this.state.data returnerer this.state.data uanset om de er udefinerede eller ej.
Valgfri kæde
Man kunne foreslå at bruge valgfri kæde, når man forsøger at returnere en ejendom dybt ind i en træstruktur. Så spørgsmålstegnet symbolet? kan kun bruges til at hente en ejendom, hvis den ikke er nul.
For eksempel kunne vi refaktorisere eksemplet ovenfor for at få disse.tilstandsdata?..(). Det vil sige, at data kun returneres, hvis værdien ikke er null.
Eller, hvis det betyder noget, om tilstand er defineret eller ej, kunne vi returnere denne.tilstand?.data.
Konverter til Boolean
TYPE KONVERTERING
Ud over de normale booleske funktioner sand og falsk, behandler JavaScript også alle andre værdier som sande eller falske.
Indtil andet er angivet, er alle værdier i JavaScript sande, undtagen 0, "", null, undefined, NaN og, selvfølgelig, falsk. Sidstnævnte er falske.
Vi kan nemt skifte mellem de to ved hjælp af !-operatoren, som også konverterer typen til boolesk.
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 hurtig konvertering fra et heltal til en streng kan udføres som følger.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Konverter til heltal
TYPE KONVERTERING
Vi udfører den omvendte transformation på denne måde.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Denne metode kan også bruges til at konvertere den booleske datatype til almindelige numeriske værdier, som vist nedenfor:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Der kan være situationer, hvor + vil blive fortolket som en sammenkædningsoperator i stedet for en additionsoperator. For at undgå dette bør du bruge tildes: ~~. Denne operator svarer til -n-1. For eksempel er ~15 lig med -16.
Brug af to tilder i en række negerer operationen, fordi - (- - n - 1) - 1 = n + 1 - 1 = n. Med andre ord, ~-16 er lig med 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
OPERATIONER
Fra ES7 kan du bruge eksponentieringsoperatoren ** som en stenografi for potenser. Dette er meget hurtigere end at bruge Math.pow(2, 3). Det virker simpelt, men dette punkt er inkluderet i listen over teknikker, da det ikke er nævnt overalt.
console.log(2 ** 3); // Result: 8Det må ikke forveksles med symbolet ^, som almindeligvis bruges til eksponentiering. Men i JavaScript er dette XOR-operatøren.
Før ES7 kunne **-genvejen kun bruges til potenser af base 2 ved at bruge den bitvise venstreskiftoperator <<:
Math.pow(2, n);
2 << (n - 1);
2**n;For eksempel svarer 2 << 3 = 16 til 2 ** 4 = 16.
Flyd til heltal
OPERATIONER / TYPEOMKENDELSE
Hvis du skal konvertere en float til et heltal, kan du bruge Math.floor(), Math.ceil() eller Math.round(). Men der er en hurtigere måde, til dette bruger vi |, det vil sige OR-operatoren.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Adfærd | afhænger i høj grad af, om du har med positive eller negative tal at gøre, så denne metode er kun egnet, hvis du er sikker på, hvad du laver.
n | 0 fjerner alt efter decimalseparatoren og trunkerer float til et heltal.
Du kan få den samme afrundingseffekt ved at bruge ~~. Efter tvungen konvertering til et heltal forbliver værdien uændret.
Fjernelse af efterfølgende numre
OR-operatoren kan bruges til at fjerne et vilkårligt antal cifre fra et tal. Det betyder, at vi ikke behøver at konvertere typer som her:
let str = "1553";
Number(str.substring(0, str.length - 1));I stedet skriver vi blot:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Automatisk linkning
KLASSER
ES6 pilnotationer kan bruges i klassemetoder, og binding er underforstået. Det betyder, at du kan sige farvel til gentagne udtryk 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 trimning
MATERIALER
Hvis du har brug for at fjerne værdier fra et array, er der hurtigere metoder end splice().
Hvis du f.eks. kender størrelsen på det originale array, kan du tilsidesætte dets længdeegenskab som følger:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Men der er en anden metode, og en hurtigere. Hvis hastighed er det, der betyder noget for dig, er her vores 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]Udskrivning af de sidste værdier af et array
MATERIALER
Denne teknik kræver brug af 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 af JSON-kode
JSON
Du har muligvis allerede brugt JSON.stringify. Vidste du, at det hjælper med at formatere din JSON?
stringify()-metoden tager to valgfrie parametre: en erstatningsfunktion, som kan bruges til at filtrere den viste JSON, og en mellemrumsværdi.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Det er alt, jeg håber, at alle disse teknikker var nyttige. Hvilke tricks kender du? Skriv dem i kommentarerne.
Skillbox anbefaler:
- To-årigt praktisk kursus .
- Online kursus .
- Praktisk årskursus .
Kilde: www.habr.com