När jag började lära mig JavaScript var det första jag gjorde en lista med knep som hjälpte mig att spara tid. Jag såg dem från andra programmerare, på olika webbplatser och i manualer.
I den här artikeln ska jag visa dig 12 bra sätt att förbättra och snabba upp din JavaScript-kod. I de flesta fall är de universella.
Påminnelse: för alla läsare av "Habr" - en rabatt på 10 000 rubel när du anmäler dig till någon Skillbox-kurs med hjälp av "Habr"-kampanjkoden.
Skillbox rekommenderar: Praktisk kurs .
Filtrera unika värden
ARRASER
Objekttypen Set introducerades i ES6, tillsammans med..., spridningsoperatorn, vi kan använda den för att skapa en ny array som bara innehåller unika värden.
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 behövs mycket mer kod för att utföra samma operation.
Denna teknik fungerar för arrayer som innehåller primitiva typer: odefinierad, null, boolean, sträng och nummer. Om du arbetar med en array som innehåller objekt, funktioner eller ytterligare arrayer behöver du ett annat tillvägagångssätt.
Längd på cache-array i cykler
CYKLAR
När du lär dig för loopar följer du standardproceduren:
for (let i = 0; i < array.length; i++){
console.log(i);
}Men med denna syntax kontrollerar for-loopen upprepade gånger längden på arrayen varje iteration.
Ibland kan detta vara användbart, men i de flesta fall är det mer effektivt att cachelagra längden på arrayen, vilket kräver en åtkomst till den. Vi kan göra detta genom att definiera en längdvariabel där vi definierar variabeln i, så här:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}I princip nästan samma som ovan, men genom att öka slingstorleken kommer vi att få betydande tidsbesparingar.
Kortslutningsklassning (McCarthy-klassificering)
VILLKORLIGA OPERATÖRER
Den ternära operatorn är ett snabbt och effektivt sätt att skriva enkla (och ibland inte så enkla) villkorliga uttalanden:
x> 100? "mer än 100": "mindre än 100";
x> 100? (x>200? "mer än 200": "mellan 100-200"): "mindre än 100";
Men ibland är även den ternära operatören mer komplicerad än vad som krävs. Vi kan använda 'och' && och 'eller' istället || Booleska operatorer för att utvärdera vissa uttryck på ett ännu mer kortfattat sätt. Det kallas ofta "kortslutning" eller "kortslutningsklassning".
Hur fungerar den här
Låt oss säga att vi bara vill returnera ett av två eller flera villkor.
Om du använder && returneras det första falska värdet. Om varje operand utvärderas till sant, kommer det senast utvärderade uttrycket att returneras.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Använder || returnerar det första sanna värdet. Om varje operand utvärderas till falskt kommer det senast utvärderade värdet att returneras.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullexempel 1
Låt oss säga att vi vill returnera längden på en variabel, men vi vet inte dess typ.
I det här fallet kan du använda if/else för att kontrollera att foo är rätt typ, men den här metoden kan vara för lång. Därför är det bättre att ta vår "kortslutning".
return (foo || []).length;Om den variabla foo har en lämplig längd, kommer den att returneras. Annars får vi 0.
exempel 2
Har du haft problem med att komma åt ett kapslat objekt? Du kanske inte vet om ett objekt eller en av dess underegenskaper finns, och det kan leda till problem.
Vi ville till exempel komma åt dataegenskapen i this.state, men data definieras inte förrän vårt program returnerar en hämtningsförfrågan.
Beroende på var vi använder det, kan anropet av this.state.data hindra applikationen från att starta. För att lösa problemet kan vi slå in detta i ett villkorligt uttryck:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Ett bättre alternativ skulle vara att använda "eller"-operatorn.
return (this.state.data || 'Fetching Data');Vi kan inte ändra koden ovan för att använda &&. Operatören 'Hämta data' && this.state.data kommer att returnera this.state.data oavsett om den är odefinierad eller inte.
Valfri kedja
Man kan föreslå att man använder valfri kedja när man försöker returnera en egenskap djupt in i en trädstruktur. Alltså frågetecknets symbol? kan användas för att hämta en egenskap endast om den inte är null.
Till exempel skulle vi kunna omfaktorisera exemplet ovan för att få this.state.data?..(). Det vill säga, data returneras endast om värdet inte är null.
Eller, om det spelar någon roll om tillstånd är definierat eller inte, kan vi returnera denna.tillstånd?.data.
Konvertera till Boolean
TYP OMVANDLING
Förutom de normala booleska funktionerna sant och falskt, behandlar JavaScript även alla andra värden som sanna eller falska.
Tills annat anges är alla värden i JavaScript sanna, förutom 0, "", null, undefined, NaN och, naturligtvis, falskt. De senare är falska.
Vi kan enkelt växla mellan de två med operatorn !, som också konverterar typen till boolesk.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Konvertera till sträng
TYP OMVANDLING
En snabb konvertering från ett heltal till en sträng kan göras på följande sätt.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Konvertera till heltal
TYP OMVANDLING
Vi utför den omvända transformationen så här.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Den här metoden kan också användas för att konvertera den booleska datatypen till vanliga numeriska värden, som visas nedan:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Det kan finnas situationer där + kommer att tolkas som en sammanlänkningsoperator snarare än en additionsoperator. För att undvika detta bör du använda tildes: ~~. Denna operator motsvarar -n-1. Till exempel är ~15 lika med -16.
Att använda två tilder i rad förnekar operationen eftersom - (- - n - 1) - 1 = n + 1 - 1 = n. Med andra ord, ~-16 är lika med 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
OPERATIONER
Från och med ES7 kan du använda exponentieringsoperatorn ** som en förkortning för potenser. Detta är mycket snabbare än att använda Math.pow(2, 3). Det verkar enkelt, men denna punkt ingår i listan över tekniker, eftersom den inte nämns överallt.
console.log(2 ** 3); // Result: 8Den ska inte förväxlas med symbolen ^, som vanligtvis används för exponentiering. Men i JavaScript är detta XOR-operatorn.
Före ES7 kunde genvägen ** endast användas för potenser av bas 2 med den bitvisa vänsterväxlingsoperatorn <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Till exempel är 2 << 3 = 16 ekvivalent med 2 ** 4 = 16.
Flyt till heltal
OPERATIONER / TYPOMVÄNDNING
Om du behöver konvertera en float till ett heltal kan du använda Math.floor(), Math.ceil() eller Math.round(). Men det finns ett snabbare sätt, för detta använder vi |, det vill säga OR-operatorn.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Beteende | beror till stor del på om du har att göra med positiva eller negativa siffror, så denna metod är bara lämplig om du är säker på vad du gör.
n | 0 tar bort allt efter decimalavgränsaren och trunkerar flottören till ett heltal.
Du kan få samma avrundningseffekt med ~~. Efter påtvingad konvertering till ett heltal förblir värdet oförändrat.
Ta bort efterföljande nummer
ELLER-operatorn kan användas för att ta bort valfritt antal siffror från ett nummer. Det betyder att vi inte behöver konvertera typer som här:
let str = "1553";
Number(str.substring(0, str.length - 1));Istället skriver vi bara:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Automatisk länkning
KLASSER
ES6 pilnotationer kan användas i klassmetoder, och bindning är underförstådd. Det betyder att du kan säga adjö till repetitiva uttryck 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
ARRASER
Om du behöver ta bort värden från en array finns det snabbare metoder än splice().
Om du till exempel vet storleken på den ursprungliga arrayen kan du åsidosätta dess length-egenskap enligt följande:
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 finns en annan metod, och en snabbare. Om hastighet är det viktiga för dig, här är våra val:
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 det/de sista värdet/värdena i en array
ARRASER
Denna teknik kräver användning av metoden slice().
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]Formaterar JSON-kod
JSON
Du kanske redan har använt JSON.stringify. Visste du att det hjälper till att formatera din JSON?
Metoden stringify() tar två valfria parametrar: en ersättningsfunktion, som kan användas för att filtrera JSON som visas, och ett mellanslagsvärde.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Det är allt, jag hoppas att alla dessa tekniker var användbara. Vilka knep kan du? Skriv dem i kommentarerna.
Skillbox rekommenderar:
- Tvåårig praktisk kurs .
- Onlinekurs .
- Praktisk årskurs .
Källa: will.com