Toen ik JavaScript begon te leren, was het eerste wat ik deed een lijst met trucjes maken waarmee ik tijd kon besparen. Ik heb ze gevonden bij andere programmeurs, op verschillende sites en in handleidingen.
In dit artikel laat ik u twaalf geweldige manieren zien om uw JavaScript-code te verbeteren en te versnellen. In de meeste gevallen zijn ze universeel.
Herinnering: voor alle lezers van "Habr" - een korting van 10 roebel bij inschrijving voor een Skillbox-cursus met behulp van de promotiecode "Habr".
Skillbox beveelt aan: Praktische cursus .
Unieke waarden filteren
ARRAYS
Het Set-objecttype is geïntroduceerd in ES6, samen met de..., spread-operator. We kunnen het gebruiken om een nieuwe array te maken die alleen unieke waarden bevat.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]In een normale situatie is er veel meer code nodig om dezelfde bewerking uit te voeren.
Deze techniek werkt voor arrays die primitieve typen bevatten: undefined, null, boolean, string en number. Als u werkt met een array die objecten, functies of extra arrays bevat, heeft u een andere aanpak nodig.
Lengte van cachearray in cycli
CYCLI
Wanneer u for loops leert, volgt u de standaardprocedure:
for (let i = 0; i < array.length; i++){
console.log(i);
}Met deze syntaxis controleert de for-lus echter herhaaldelijk de lengte van de array bij elke iteratie.
Soms kan dit handig zijn, maar in de meeste gevallen is het efficiënter om de lengte van de array in de cache op te slaan, waarvoor één keer toegang nodig is. We kunnen dit doen door een lengtevariabele te definiëren waarbij we de variabele i definiëren, zoals deze:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}In principe bijna hetzelfde als hierboven, maar door de lusgrootte te vergroten, krijgen we een aanzienlijke tijdsbesparing.
Kortsluitingswaarde (McCarthy-waarde)
VOORWAARDELIJKE OPERATOREN
De ternaire operator is een snelle en efficiënte manier om eenvoudige (en soms niet zo eenvoudige) voorwaardelijke uitspraken te schrijven:
x> 100? “meer dan 100”: “minder dan 100”;
x> 100? (x>200? "meer dan 200": "tussen 100-200"): "minder dan 100";
Maar soms is zelfs de ternaire operator ingewikkelder dan nodig. In plaats daarvan kunnen we 'en' && en 'of' gebruiken || Booleaanse operatoren om bepaalde uitdrukkingen nog beknopter te evalueren. Het wordt vaak "kortsluiting" of "kortsluitingswaarde" genoemd.
Hoe werkt dit
Stel dat we slechts één van twee of meer voorwaarden willen retourneren.
Als u && gebruikt, wordt de eerste valse waarde geretourneerd. Als elke operand de waarde true oplevert, wordt de laatst geëvalueerde expressie geretourneerd.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Met behulp van || zal de eerste echte waarde retourneren. Als elke operand de waarde false oplevert, wordt de laatst geëvalueerde waarde geretourneerd.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullvoorbeeld 1
Laten we zeggen dat we de lengte van een variabele willen retourneren, maar we weten het type niet.
In dit geval kunt u if/else gebruiken om te controleren of foo het juiste type is, maar deze methode kan te lang duren. Daarom is het beter om onze “kortsluiting” te nemen.
return (foo || []).length;Als de variabele foo een geschikte lengte heeft, wordt deze geretourneerd. Anders krijgen we 0.
voorbeeld 2
Heeft u problemen gehad met de toegang tot een genest object? Mogelijk weet u niet of een object of een van de subeigenschappen ervan bestaat, en dit kan tot problemen leiden.
We wilden bijvoorbeeld toegang krijgen tot de data-eigenschap in this.state, maar de gegevens worden pas gedefinieerd als ons programma een ophaalverzoek retourneert.
Afhankelijk van waar we het gebruiken, kan het aanroepen van this.state.data ervoor zorgen dat de applicatie niet start. Om het probleem op te lossen, kunnen we dit in een voorwaardelijke uitdrukking verpakken:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Een betere optie zou zijn om de operator "of" te gebruiken.
return (this.state.data || 'Fetching Data');We kunnen de bovenstaande code niet wijzigen om && te gebruiken. De operator 'Gegevens ophalen' && this.state.data retourneert this.state.data, ongeacht of deze ongedefinieerd is of niet.
Optionele ketting
Je zou kunnen voorstellen om optionele ketening te gebruiken als je probeert een eigenschap diep in een boomstructuur terug te geven. Dus het vraagtekensymbool? kan alleen worden gebruikt om een eigenschap op te halen als deze niet nul is.
We kunnen bijvoorbeeld het bovenstaande voorbeeld herstructureren om this.state.data?..() te krijgen. Dat wil zeggen dat gegevens alleen worden geretourneerd als de waarde niet nul is.
Of, als het er toe doet of de status al dan niet is gedefinieerd, kunnen we this.state?.data retourneren.
Converteren naar Booleaanse waarde
TYPECONVERSIE
Naast de normale booleaanse functies waar en onwaar, behandelt JavaScript ook alle andere waarden als waar of onwaar.
Tenzij anders vermeld, zijn alle waarden in JavaScript waar, behalve 0, "", null, ongedefinieerd, NaN en natuurlijk false. Deze laatste zijn vals.
We kunnen eenvoudig tussen de twee schakelen met behulp van de operator !, die het type ook naar Boolean converteert.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Converteren naar tekenreeks
TYPECONVERSIE
Een snelle conversie van een geheel getal naar een string kan als volgt worden gedaan.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Converteren naar geheel getal
TYPECONVERSIE
We voeren de omgekeerde transformatie op deze manier uit.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Deze methode kan ook worden gebruikt om het Booleaanse gegevenstype naar reguliere numerieke waarden te converteren, zoals hieronder weergegeven:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Er kunnen situaties zijn waarin + wordt geïnterpreteerd als een aaneenschakelingsoperator in plaats van als een opteloperator. Om dit te voorkomen, moet je tildes gebruiken: ~~. Deze operator is equivalent aan -n-1. ~15 is bijvoorbeeld gelijk aan -16.
Het gebruik van twee tildes op rij maakt de bewerking teniet omdat - (- - n - 1) - 1 = n + 1 - 1 = n. Met andere woorden: ~-16 is gelijk aan 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
ACTIVITEITEN
Vanaf ES7 kunt u de machtsverheffingsoperator ** gebruiken als afkorting voor machten. Dit is veel sneller dan het gebruik van Math.pow(2, 3). Het lijkt eenvoudig, maar dit punt is opgenomen in de lijst met technieken, omdat het niet overal wordt vermeld.
console.log(2 ** 3); // Result: 8Het moet niet worden verward met het ^-symbool, dat vaak wordt gebruikt voor machtsverheffing. Maar in JavaScript is dit de XOR-operator.
Vóór ES7 kon de ** snelkoppeling alleen worden gebruikt voor machten van grondtal 2 met behulp van de bitsgewijze linker shift-operator <<:
Math.pow(2, n);
2 << (n - 1);
2**n;2 << 3 = 16 is bijvoorbeeld gelijk aan 2 ** 4 = 16.
Zwevend naar geheel getal
OPERATIES / TYPE CONVERSIE
Als u een float naar een geheel getal moet converteren, kunt u Math.floor(), Math.ceil() of Math.round() gebruiken. Maar er is een snellere manier, hiervoor gebruiken we |, dat wil zeggen de OR-operator.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Gedrag | hangt grotendeels af van of je met positieve of negatieve getallen te maken hebt, dus deze methode is alleen geschikt als je zeker bent van wat je doet.
n | 0 verwijdert alles na het decimaalteken, waardoor de float wordt afgekapt tot een geheel getal.
Hetzelfde afrondingseffect kunt u verkrijgen met ~~. Na geforceerde conversie naar een geheel getal blijft de waarde ongewijzigd.
Volgnummers verwijderen
De OR-operator kan worden gebruikt om een willekeurig aantal cijfers uit een getal te verwijderen. Dit betekent dat we typen zoals hier niet hoeven te converteren:
let str = "1553";
Number(str.substring(0, str.length - 1));In plaats daarvan schrijven we eenvoudigweg:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Automatische koppeling
KLASSEN
ES6-pijlnotaties kunnen worden gebruikt in klassenmethoden, en binding wordt geïmpliceerd. Dit betekent dat u afscheid kunt nemen van repetitieve uitdrukkingen zoals deze.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>
</>
)
}
};Bijsnijden van arrays
ARRAYS
Als je waarden uit een array moet strippen, zijn er snellere methoden dan splice().
Als u bijvoorbeeld de grootte van de oorspronkelijke array kent, kunt u de lengte-eigenschap als volgt overschrijven:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Maar er is een andere methode, en een snellere. Als snelheid voor u belangrijk is, zijn hier onze keuzes:
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]Afdrukken van de laatste waarde(n) van een array
ARRAYS
Deze techniek vereist het gebruik van de slice()-methode.
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-code opmaken
JSON
Mogelijk hebt u JSON.stringify al gebruikt. Wist u dat het helpt bij het formatteren van uw JSON?
De methode stringify() gebruikt twee optionele parameters: een vervangingsfunctie, die kan worden gebruikt om de weergegeven JSON te filteren, en een spatiewaarde.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Dat is alles, ik hoop dat al deze technieken nuttig waren. Welke trucjes ken jij? Schrijf ze in de reacties.
Skillbox beveelt aan:
- Tweejarige praktijkopleiding .
- Online cursus .
- Praktische jaarcursus .
Bron: www.habr.com