🥇12 tricks til at arbejde med JavaScript, som ikke findes i de fleste tutorials

Da jeg begyndte at lære JavaScript, lavede jeg først en liste over teknikker, der hjalp mig med at spare tid. Jeg fandt dem hos andre programmører, på forskellige websites og i manualer.

I denne artikel vil jeg vise 12 fremragende måder at forbedre og fremskynde din JavaScript-kode på. De fleste af dem er universelle.

Vi minder om: til alle læsere af 'Habr' — rabat på 10.000 rubler ved tilmelding til et hvilket som helst Skillbox-kursus med rabatkoden 'Habr'.

Skillbox anbefaler: Praktisk kursus «Mobil udvikler PRO».

Filtrering af unikke værdier

ARRAYS

Set-objekttypen blev introduceret i ES6, og sammen med …, spread-operatoren kan vi bruge det 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); // Resultat: [1, 2, 3, 5]

Under normale omstændigheder ville det kræve meget mere kode at udføre den samme operation.

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 arrays, har du brug for en anden tilgang.

Længden af cache-arrayet i løkker

LØKKER

Når du lærer for-loop til løkker, følger du den standardproceduren:

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

Alligevel kontrollerer for-loopet arrayets længde ved hver iteration med denne syntaks.

Nogle gange kan det være nyttigt, men i de fleste tilfælde er det mere effektivt at cache længden af arrayet, hvilket kræver et enkelt opkald til det. Vi kan gøre dette ved at definere en længdevariabel, hvor vi sætter variablen i, for eksempel sådan:

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

I princippet næsten det samme som ovenfor, men ved at reducere størrelsen af løkken får vi en betydelig tidsbesparelse.

Vurdering af kortslutning (McCarthy-vurdering)

BETINGELSESMASKER

Den ternære operator er en hurtig og effektiv måde at skrive enkle (og nogle gange ikke så enkle) betingede udsagn på:

x > 100 ? "større end 100" : "mindre end 100";
x > 100 ? (x > 200 ? "større end 200" : "mellem 100-200") : "mindre end 100";

Men nogle gange er selv den ternære operator mere kompleks end nødvendigt. I stedet kan vi bruge 'and' && og 'or' || logiske operatorer til at vurdere visse udtryk på en endnu mere kortfattet måde. Det kaldes ofte 'kortslutning' eller 'vurdering af kortslutning'.

Hvordan fungerer det

Lad os sige, at vi vil returnere kun ét af to eller flere betingelser.

Brug af && returnerer den første falske værdi. Hvis hver operand vurderes som sand, returneres det sidste beregnede udtryk.

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

console.log(0 && null); // Resultat: 0

Brug af || tillader at returnere den første sande værdi. Hvis hver operand vurderes som falsk, returneres den sidste beregnede værdi.

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

console.log(0 || null); // Resultat: null

Eksempel 1

Lad os sige, vi vil returnere length af variablen, men vi kender ikke dens type.

I dette tilfælde kan vi bruge if/else til at tjekke, om foo er den rette type, men denne metode kan tage for lang tid. Derfor er det bedre at bruge vores 'forkortede lukning'.

return (foo || []).length;

Hvis variablen foo har den rette length, returneres den. Ellers får vi 0.

Eksempel 2

Har du haft problemer med at få adgang til et nested objekt? Du ved måske ikke, om objektet eller et af dets underordnede egenskaber eksisterer, hvilket kan føre til problemer.

For eksempel ønskede vi at få adgang til egenskaben data i this.state, men data er ikke defineret, indtil vores program udfører forespørgslen.

Afhængigt af hvor vi bruger det, kan kaldet this.state.data forhindre, at applikationen starter. For at løse problemet kunne vi indkapsle det i en betinget erklæring:

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

En mere passende mulighed ville være at bruge 'eller'-operatoren.

return (this.state.data || 'Henter data');

Vi kan ikke ændre koden ovenfor til at bruge &&. Operatoren ‘Henter data’ && this.state.data returnerer this.state.data uanset om den er undefined eller ej.

Valgfri kædning

Det kan være en god idé at bruge valgfri kædning, når man forsøger at returnere en egenskab dybt inde i en træstruktur. Så spørgsmålstegnet ? kan bruges til at ekstrahere en egenskab, kun hvis den ikke er null.

For eksempel kunne vi refaktorere det tidligere eksempel til this.state.data?.. (). Det vil sige, data returneres kun, hvis værdien ikke er null.

Eller, hvis det er vigtigt at finde ud af, om state er defineret eller ej, kunne vi returnere this.state?.data.

Konvertering til Boolean

TYPEKONVERTERING

Ud over de almindelige logiske funktioner true og false, betragter JavaScript også alle andre værdier som truthy eller falsy.

Medmindre andet er angivet, er alle værdier i JavaScript truthy, undtagen 0, "", null, undefined, NaN og selvfølgelig false. Sidstnævnte er falsy.

Vi kan nemt skifte mellem dem ved at bruge operatoren !, som også konverterer typen til boolesk.

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

Konvertering til streng

TYPEKONVERTERING

Hurtig konvertering af et heltal til en streng kan udføres som følger.

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

Konvertering til heltal

TYPEKONVERTERING

Den omvendte konvertering udfører vi således.

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

Denne metode kan også bruges til at konvertere boolesk datatype til almindelige numeriske værdier, som vist nedenfor:

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

Der kan være situationer, hvor + vil blive tolket som en konkatenationsoperator og ikke som en additionsoperator. For at undgå dette bør man bruge tildes: ~~. Denne operator er lig med udtrykket -n-1. For eksempel er ~ 15 lig med -16.

Brug af to på hinanden følgende tildes annullerer operationen, fordi — (- — n — 1) — 1 = n + 1 — 1 = n. Med andre ord er ~ -16 lig med 15.

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

<Quick Powers

OPERATIONER

Fra ES7 kan operatoren for eksponentiation ** bruges som en forkortelse for potenser. Det er meget hurtigere end at bruge Math.pow(2, 3). Det virker simpelt, men dette punkt er inkluderet på listen over tricks, da det ikke nævnes overalt.

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

Det skal ikke forveksles med symbolet ^, som normalt bruges til at hæve til en eksponent. Men i JavaScript er det en XOR-operator.

Inden ES7 kunne forkortelsen ** kun anvendes til potenser med grundtal 2 ved hjælp af bit-shift operatoren til venstre <<:

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

For eksempel er 2 << 3 = 16 ækvivalent med udtrykket 2 ** 4 = 16.

Float til heltal

OPERATIONER / TYPEKONVERTERING

Hvis det er nødvendigt at konvertere float til heltal, kan man bruge Math.floor(), Math.ceil() eller Math.round(). Men der er også en hurtigere måde, hvor vi bruger |, altså OR-operatoren.

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

Adfæ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, hvad der kommer efter decimaltegnet, og truncerer decimaltallet til et heltal.

Du kan opnå den samme effekt af afrunding ved at bruge ~~. Efter tvangsomdannelse til et heltal forbliver værdien uændret.

Fjerner afsluttende tal

OR-operatoren kan bruges til at fjerne et vilkårligt antal cifre fra tallet. Det betyder, at vi ikke behøver at ændre datatyper som her:

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

I stedet skriver vi bare:

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

Automatisk binding

KLASSER

ES6 pilfunktioner kan bruges i klassemetoder, og der antages binding. Dette giver os mulighed for at sige farvel til gentagende udtryk som this.myMethod = this.myMethod.bind(this)!

import React, { Component } from React;
 
export default class App extends Component {
  constructor(props) {
  super(props);
  this.state = {};
  }
 
myMethod = () =&gt; {
    // Denne metode er implicit bundet!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

Array-trimming

ARRAYS

Hvis du skal fjerne værdier fra et array, findes der hurtigere metoder end splice().

For eksempel, hvis du kender størrelsen på det originale array, kan du omdefinere dets længde på følgende måde:

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

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

Men der er en anden metode, som er hurtigere. Hvis hastighed er vigtigt for dig, så her er vores valg:

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

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

Udskrivning af det sidste element (eller elementer) i arrayet

ARRAYS
Denne teknik kræver brug af metoden slice().

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

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

Formatering af JSON-kode

JSON

Du har muligvis allerede brugt JSON.stringify. Ved du, at det hjælper med at formatere din JSON?

Metoden stringify() tager to valgfri parametre: en replacer-funktion, som kan bruges til at filtrere den viste JSON, og et space-værdi.

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

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

Det var det, jeg håber, at alle de nævnte teknikker har været nyttige. Hvilke tricks kender du? Skriv dem i kommentarerne.

Skillbox anbefaler:

Toårigt praktisk kursus «Jeg er webudvikler PRO».

Online kursus «C#-udvikler fra bunden».

Praktisk års kursus "PHP-udvikler fra 0 til PRO".

Kilde: habr.com