🥇12 triks for JavaScript som ikke finnes i de fleste opplæringer

Da jeg begynte å lære JavaScript, lagde jeg først en liste over triks som hjalp meg med å spare tid. Jeg så dem hos andre programmerere, på forskjellige nettsteder og i manualer.

I denne artikkelen vil jeg vise 12 utmerkede måter å forbedre og akselerere JavaScript-koden din på. I de fleste tilfeller er de universelle.

Vi minner om: for alle lesere av «Habr» — 10 000 rubler rabatt ved påmelding til hvilket som helst Skillbox-kurs med kampanjekoden «Habr».

Skillbox anbefaler: Praktisk kursus «Mobiludvikler PRO».

Filtrering av unike verdier

ARRAYS

Set-objekttypen ble introdusert i ES6, og sammen med ... spread-operatøren kan vi bruke den til å lage et nytt array som bare inneholder unike verdier.

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

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

Under normale omstendigheter ville det kreve mye mer kode for å utføre den samme operasjonen.

Dette trikset fungerer for arrays som inneholder primitive typer: undefined, null, boolean, string og number. Hvis du arbeider med en array som inneholder objekter, funksjoner eller flere arrays, vil du trenge en annen tilnærming.

Lengden på cache-arrayet i løkker

LØKKER

Når du lærer for-løkker, følger du standardprosedyrer:

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

Likevel, med denne syntaksen kontrollerer for-løkken lengden på arrayet på nytt ved hver iterasjon.

Noen ganger kan dette være nyttig, men i de fleste tilfeller er det mer effektivt å cache lengden på arrayet, noe som krever ett oppslag. Vi kan gjøre dette ved å definere en lengdevariabel der vi angir i, for eksempel slik:

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

I prinsippet er det nesten det samme som ovenfor, men ved å øke størrelsen på løkken oppnår vi betydelig tidsbesparelse.

Evaluering av kortslutning (McCarthy-evaluering)

BETINGELSESMESSIGE OPERATØRER

Den ternære operatoren er en rask og effektiv måte å skrive enkle (og noen ganger ikke så enkle) betingede setninger:

x > 100 ? "større enn 100" : "mindre enn 100";
x > 100 ? (x > 200 ? "større enn 200" : "mellom 100-200") : "mindre enn 100";

Men noen ganger er den ternære operatoren mer komplisert enn nødvendig. I stedet kan vi bruke 'og' && og 'eller' || logiske operatorer for å evaluere noen uttrykk enda mer kortfattet. Det kalles ofte "kortslutning" eller "evaluering av kortslutning."

Hvordan det fungerer

La oss si at vi vil returnere bare én av to eller flere betingelser.

Bruk av && returnerer den første false verdien. Hvis hver operand vurderes som true, vil det siste evaluerte uttrykket bli returnert.

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

Bruk av || vil returnere den første true verdien. Hvis hver operand vurderes som false, vil den siste evaluerte verdien bli returnert.

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

Eksempel 1

La oss si at vi ønsker å returnere length av en variabel, men vi kjenner ikke typen.

I dette tilfellet kan vi bruke if/else for å sjekke om foo har en passende type, men denne metoden kan vise seg å være for treg. Derfor tar vi heller vårt "kortslutting".

return (foo || []).length;

Hvis variabelen foo har en passende length, 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 objektet eller en av dets underpropertier eksisterer, og dette kan føre til problemer.

For eksempel ønsket vi å få tilgang til property data i this.state, men data er ikke definert før programmet vårt returnerer forespørselen om henting.

Avhengig av hvor vi bruker det, kan kallet this.state.data forhindre at applikasjonen kjører. For å løse problemet kunne vi pakke dette inn i et betinget uttrykk:

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

Et mer passende alternativ vil være å bruke 'eller'-operatoren.

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

Vi kan ikke endre koden over for å bruke &&. Operatoren 'Henter Data' && this.state.data vil alltid returnere this.state.data uansett om det er undefined eller ikke.

Valgfri kjederegning

Vi kan foreslå å bruke valgfri kjederegning når vi prøver å returnere en egenskap dypt i en trestruktur. Spørsmålstegnet ? kan brukes til å hente egenskapen, bare hvis den ikke er null.

For eksempel kunne vi refaktorere eksempelet ovenfor til this.state.data?.. (). Det vil si at data kun returneres hvis verdien ikke er null.

Eller, hvis det er viktig om state er definert eller ikke, kunne vi returnert this.state?.data.

Konvertering til Boolean

TYPEKONVERTERING

I tillegg til de vanlige logiske funksjonene true og false, vurderer JavaScript også alle andre verdier som truthy eller falsy.

Så lenge annet ikke er nevnt, er alle verdier i JavaScript truthy, unntatt 0, «», null, undefined, NaN og selvfølgelig false. De sistnevnte er falsy.

Vi kan enkelt veksle mellom dem ved å bruke operatoren !, som også konverterer typen til boolsk.

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

Konvertering til streng

TYPEKONVERTERING

Rask konvertering av et heltall til streng kan gjøres på følgende måte.

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

Konvertering til heltall

TYPEKONVERTERING

Den motsatte konverteringen gjøres slik.

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

Denne metoden kan også brukes til å konvertere boolske datatyper til vanlige numeriske verdier, som vist nedenfor:

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

Det kan være situasjoner der + vil bli tolket som en konkatenasjonsoperator, og ikke som summasjon. For å unngå dette bør man bruke tilde: ~~. Denne operatoren er ekvivalent med uttrykket -n-1. For eksempel, ~15 er lik -16.

Bruken av to tildes på rad opphever operasjonen, fordi — (- — n — 1) — 1 = n + 1 — 1 = n. Med andre ord, ~-16 er lik 15.

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

<Quick Powers

OPERASJONER

Fra og med ES7 kan man bruke operatoren for eksponentiering ** 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 triks, siden det ikke alltid blir nevnt.

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

Ikke forveksle det med symbolet ^, som vanligvis brukes for å heve til en potens. Men i JavaScript er dette XOR-operatøren.

Før ES7 kunne forkortelsen ** bare brukes for potenser med basen 2 ved å bruke bitvis venstreskiftoperator <<:

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

For eksempel er 2 << 3 = 16 lik uttrykket 2 ** 4 = 16.

Float til heltall

OPERASJONER / TYPEKONVERTERING

Om nødvendig kan man bruke Math.floor(), Math.ceil() eller Math.round() for å konvertere float til heltall. Men det finnes også en raskere måte å gjøre dette på, ved å bruke |, det vil si OR-operatøren.

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

Atferdelser | avhenger i stor grad av om du har med positive eller negative tall å gjøre, så denne metoden er kun egnet dersom du er sikker på hva du gjør.

n | 0 fjerner alt etter desimaltegnet, og konverterer flyttall til heltall.

Du kan oppnå samme avrundings-effekt ved å bruke ~~. Etter tvingende konvertering til heltall, forblir verdien uendret.

Fjerner avsluttende tall

OR-operatøren kan brukes for å fjerne et hvilket som helst antall siffer fra tallet. Dette betyr at vi ikke trenger å konvertere typer, slik som her:

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

I stedet kan vi bare skrive:

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-pilnotasjoner kan brukes i klassemetoder, med underforstått binding. Dette lar deg si farvel til repeterende uttrykk 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 metoden er bundet implisitt!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

Trimming av array

ARRAYS

Hvis du må fjerne verdier fra en array, finnes det raskere metoder enn splice().

For eksempel, hvis du vet størrelsen på den originale arrayen, kan du overstyre dens lengde-egenskap som følger:

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

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

Men det finnes også en annen metode, og den er raskere. Hvis du bryr deg om hastighet, er dette vårt 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]

Utskrift av siste verdi(er) i array

ARRAYS
Denne teknikken krever bruk av slice()-metoden.

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]

Formattering 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 replacer-funksjon som kan brukes til å filtrere den viste JSON-en, og en space-verdi.

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

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

Det var alt, jeg håper alle de nevnte teknikkene viser seg å være nyttige. Hvilke triks kjenner du til? Skriv dem i kommentarene.

Skillbox anbefaler:

Toårig praktisk kurs «Jeg er WEB-utvikler PRO».

Nettkurs «C#-utvikler fra 0».

Praktisk ettårig kurs «PHP-utvikler fra 0 til PRO».

Kilde: habr.com