Toe ek JavaScript begin leer het, was die eerste ding wat ek gedoen het om 'n lys van truuks te maak wat my gehelp het om tyd te bespaar. Ek het hulle van ander programmeerders raakgesien, op verskillende werwe en in handleidings.
In hierdie artikel sal ek jou 12 wonderlike maniere wys om jou JavaScript-kode te verbeter en te bespoedig. In die meeste gevalle is hulle universeel.
Ons herinner: vir alle lesers van "Habr" - 'n afslag van 10 000 roebels wanneer u inskryf vir enige Skillbox-kursus met behulp van die "Habr"-promosiekode.
Skillbox beveel aan: Praktiese kursus .
Filter unieke waardes
SKIPINGS
Die Stel objektipe is in ES6 bekendgestel, saam met die..., verspreidingsoperateur, ons kan dit gebruik om 'n nuwe skikking te skep wat slegs unieke waardes bevat.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]In 'n normale situasie is baie meer kode nodig om dieselfde bewerking uit te voer.
Hierdie tegniek werk vir skikkings wat primitiewe tipes bevat: ongedefinieerd, nul, boolean, string en getal. As jy met 'n skikking werk wat voorwerpe, funksies of bykomende skikkings bevat, sal jy 'n ander benadering nodig hê.
Lengte van kas-skikking in siklusse
SIKLUSSE
Wanneer jy vir lusse leer, volg jy die standaardprosedure:
for (let i = 0; i < array.length; i++){
console.log(i);
}Met hierdie sintaksis kontroleer die for-lus egter herhaaldelik die lengte van die skikking elke iterasie.
Soms kan dit nuttig wees, maar in die meeste gevalle is dit meer doeltreffend om die lengte van die skikking te kas, wat een toegang daartoe sal vereis. Ons kan dit doen deur 'n lengteveranderlike te definieer waar ons die veranderlike i definieer, soos volg:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}In beginsel, amper dieselfde as hierbo, maar deur die lusgrootte te vergroot, sal ons aansienlike tydbesparings kry.
Kortsluitinggradering (McCarthy-gradering)
VOORWAARDELIKE OPERATEURS
Die drieledige operateur is 'n vinnige en doeltreffende manier om eenvoudige (en soms nie so eenvoudige) voorwaardelike stellings te skryf:
x> 100? "meer as 100": "minder as 100";
x> 100? (x>200? "meer as 200": "tussen 100-200"): "minder as 100";
Maar soms is selfs die ternêre operateur meer ingewikkeld as wat vereis word. Ons kan eerder 'en' && en 'of' gebruik || Boole-operateurs om sekere uitdrukkings op 'n selfs meer bondige manier te evalueer. Dit word dikwels "kortsluiting" of "kortsluitinggradering" genoem.
Hoe werk dit
Kom ons sê ons wil net een van twee of meer voorwaardes teruggee.
Deur && te gebruik sal die eerste vals waarde terugstuur. As elke operand na waar evalueer, sal die laaste uitdrukking wat geëvalueer is, teruggestuur word.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Gebruik || sal die eerste ware waarde terugstuur. As elke operand na vals evalueer, sal die laaste geëvalueerde waarde teruggestuur word.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullVoorbeeld 1
Kom ons sê ons wil die lengte van 'n veranderlike teruggee, maar ons ken nie die tipe nie.
In hierdie geval kan jy if/else gebruik om te kyk of foo die regte tipe is, maar hierdie metode kan te lank wees. Daarom is dit beter om ons "kortsluiting" te neem.
return (foo || []).length;As die veranderlike foo 'n geskikte lengte het, sal dit teruggestuur word. Anders kry ons 0.
Voorbeeld 2
Het jy probleme gehad met toegang tot 'n geneste voorwerp? Jy weet dalk nie of 'n voorwerp of een van sy sub-eienskappe bestaan nie, en dit kan tot probleme lei.
Ons wou byvoorbeeld toegang tot die data-eienskap in this.state verkry, maar data word nie gedefinieer totdat ons program 'n haalversoek terugstuur nie.
Afhangende van waar ons dit gebruik, kan die oproep van this.state.data verhoed dat die toepassing begin. Om die probleem op te los, kan ons dit in 'n voorwaardelike uitdrukking omvou:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}'n Beter opsie sou wees om die "of"-operateur te gebruik.
return (this.state.data || 'Fetching Data');Ons kan nie die kode hierbo verander om && te gebruik nie. Die 'Haal data' && this.state.data operateur sal hierdie.state.data terugstuur ongeag of dit ongedefinieerd is of nie.
Opsionele ketting
Mens kan voorstel om opsionele ketting te gebruik wanneer jy probeer om 'n eiendom diep in 'n boomstruktuur terug te gee. So, die vraagteken simbool? kan slegs gebruik word om 'n eiendom te herwin as dit nie nul is nie.
Byvoorbeeld, ons kan die voorbeeld hierbo herfaktoreer om hierdie.toestand.data?..() te kry. Dit wil sê, data word slegs teruggestuur as die waarde nie nul is nie.
Of, as dit saak maak of staat gedefinieer is of nie, kan ons hierdie.staat?.data terugstuur.
Skakel om na Boolean
TIPE OMSKEPPING
Benewens die normale Boolese funksies waar en onwaar, hanteer JavaScript ook alle ander waardes as waar of vals.
Totdat anders vermeld, is alle waardes in JavaScript waar, behalwe 0, "", nul, ongedefinieerd, NaN en, natuurlik, vals. Laasgenoemde is vals.
Ons kan maklik tussen die twee wissel deur die !-operateur te gebruik, wat ook die tipe na boolean omskakel.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Skakel om na string
TIPE OMSKEPPING
'n Vinnige omskakeling van 'n heelgetal na 'n string kan soos volg gedoen word.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Skakel om na heelgetal
TIPE OMSKEPPING
Ons voer die omgekeerde transformasie so uit.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Hierdie metode kan ook gebruik word om die Boolese datatipe na gereelde numeriese waardes om te skakel, soos hieronder getoon:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Daar kan situasies wees waar + geïnterpreteer sal word as 'n aaneenskakelingsoperateur eerder as 'n opteloperateur. Om dit te vermy, moet jy tildes gebruik: ~~. Hierdie operateur is gelykstaande aan -n-1. Byvoorbeeld, ~15 is gelyk aan -16.
Die gebruik van twee tildes in 'n ry negeer die bewerking omdat - (- - n - 1) - 1 = n + 1 - 1 = n. Met ander woorde, ~-16 is gelyk aan 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
BEDRYWIGHEDE
Vanaf ES7 kan jy die eksponensiëringsoperateur ** as 'n snelskrif vir magte gebruik. Dit is baie vinniger as om Math.pow(2, 3) te gebruik. Dit lyk eenvoudig, maar hierdie punt is ingesluit in die lys van tegnieke, aangesien dit nie oral genoem word nie.
console.log(2 ** 3); // Result: 8Dit moet nie verwar word met die ^-simbool, wat algemeen vir eksponensiëring gebruik word nie. Maar in JavaScript is dit die XOR-operateur.
Voor ES7 kon die **-kortpad slegs gebruik word vir kragte van basis 2 deur die bitsgewyse linkerskuifoperateur <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Byvoorbeeld, 2 << 3 = 16 is gelykstaande aan 2 ** 4 = 16.
Sweef na heelgetal
BEDRYWIGHEDE / TIPE-OMSKETTING
As jy 'n float na 'n heelgetal moet omskakel, kan jy Math.floor(), Math.ceil() of Math.round() gebruik. Maar daar is 'n vinniger manier, hiervoor gebruik ons |, dit wil sê die OR-operateur.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Gedrag | hang grootliks af of jy met positiewe of negatiewe getalle te doen het, so hierdie metode is slegs geskik as jy vol vertroue is in wat jy doen.
n | 0 verwyder alles na die desimale skeiding, en kap die vlot af tot 'n heelgetal.
Jy kan dieselfde afrondingseffek kry deur ~~ te gebruik. Na gedwonge omskakeling na 'n heelgetal, bly die waarde onveranderd.
Verwyder agterstallige nommers
Die OF-operateur kan gebruik word om enige aantal syfers van 'n nommer te verwyder. Dit beteken dat ons nie tipes soos hier hoef om te skakel nie:
let str = "1553";
Number(str.substring(0, str.length - 1));In plaas daarvan skryf ons eenvoudig:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Outomatiese skakeling
KLASSE
ES6-pylnotasies kan in klasmetodes gebruik word, en binding word geïmpliseer. Dit beteken jy kan totsiens sê vir herhalende uitdrukkings soos 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>
</>
)
}
};Sny 'n skikking
SKIPINGS
As jy waardes van 'n skikking moet stroop, is daar vinniger metodes as splice().
Byvoorbeeld, as jy die grootte van die oorspronklike skikking ken, kan jy sy lengte-eienskap soos volg ignoreer:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Maar daar is 'n ander metode, en 'n vinniger een. As spoed vir jou saak maak, hier is ons keuses:
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]Druk die laaste waarde(s) van 'n skikking
SKIPINGS
Hierdie tegniek vereis die gebruik van die slice() metode.
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]Formateer JSON-kode
Into
Jy het dalk reeds JSON.stringify gebruik. Het jy geweet dat dit help om jou JSON te formateer?
Die stringify()-metode neem twee opsionele parameters: 'n vervangingsfunksie, wat gebruik kan word om die vertoonde JSON te filter, en 'n spasiewaarde.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Dit is al, ek hoop dat al hierdie tegnieke nuttig was. Watter truuks ken jy? Skryf hulle in die kommentaar.
Skillbox beveel aan:
- Twee-jaar praktiese kursus .
- Aanlyn kursus .
- Praktiese jaarkursus .
Bron: will.com