Kiam mi eklernis JavaScript, la unua afero, kiun mi faris, estis fari liston de lertaĵoj, kiuj helpis min ŝpari tempon. Mi ekvidis ilin de aliaj programistoj, sur malsamaj retejoj kaj en manlibroj.
En ĉi tiu artikolo, mi montros al vi 12 bonegajn manierojn plibonigi kaj akceli vian JavaScript-kodon. Plejofte ili estas universalaj.
Ni memorigas vin: por ĉiuj legantoj de "Habr" - rabato de 10 000 rubloj kiam oni enskribas en iu ajn Skillbox-kurso per la reklamkodo "Habr".
Skillbox rekomendas: Praktika kurso .
Filtri unikajn valorojn
TAELOJ
La Aro-objekta tipo estis enkondukita en ES6, kune kun la..., disvastiga operatoro, ni povas uzi ĝin por krei novan tabelon, kiu enhavas nur unikajn valorojn.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]En normala situacio, multe pli da kodo bezonas por plenumi la saman operacion.
Ĉi tiu tekniko funkcias por tabeloj enhavantaj primitivajn tipojn: nedifinita, nula, bulea, ĉeno kaj nombro. Se vi laboras kun tabelo enhavanta objektojn, funkciojn aŭ pliajn tabelojn, vi bezonos alian aliron.
Longo de kaŝmemoro tabelo en cikloj
CIKLOJ
Kiam vi lernas por buklojn, vi sekvas la norman proceduron:
for (let i = 0; i < array.length; i++){
console.log(i);
}Tamen, kun ĉi tiu sintakso, la for-buklo plurfoje kontrolas la longon de la tabelo ĉiu ripeto.
Kelkfoje tio povas esti utila, sed en la plej multaj kazoj estas pli efika konservi la longon de la tabelo, kio postulos unu aliron al ĝi. Ni povas fari tion difinante longovariablon kie ni difinas la variablon i, jene:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Principe, preskaŭ same kiel supre, sed pliigante la buklograndecon ni ricevos signifan tempoŝparon.
Kurtcirkvito-rangigo (McCarthy-rangigo)
KONDICIAJ OPERATUROJ
La ternara funkciigisto estas rapida kaj efika maniero skribi simplajn (kaj foje ne tiel simplajn) kondiĉajn deklarojn:
x> 100? “pli ol 100”: “malpli ol 100”;
x> 100? (x>200? "pli ol 200": "inter 100-200"): "malpli ol 100";
Sed foje eĉ la ternara operatoro estas pli komplika ol bezonata. Ni povas uzi 'kaj' && kaj 'aŭ' anstataŭe || Buleaj operatoroj por taksi certajn esprimojn en eĉ pli konciza maniero. Ĝi estas ofte nomita "kurta cirkvito" aŭ "kurta cirkvito-rangigo".
Kiel tio funkcias
Ni diru, ke ni volas redoni nur unu el du aŭ pli da kondiĉoj.
Uzado de && redonos la unuan malveran valoron. Se ĉiu operando taksas vera, tiam la lasta esprimo taksita estos resendita.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Uzante || redonos la unuan veran valoron. Se ĉiu operando taksas falsa, tiam la lasta taksita valoro estos resendita.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullekzemple 1
Ni diru, ke ni volas redoni la longon de variablo, sed ni ne konas ĝian tipon.
En ĉi tiu kazo, vi povas uzi if/else por kontroli, ke foo estas la ĝusta tipo, sed ĉi tiu metodo eble estas tro longa. Tial, estas pli bone preni nian "kurtcirkviton".
return (foo || []).length;Se la variablo foo havas taŭgan longon, tiam tio estos resendita. Alie ni ricevos 0.
ekzemple 2
Ĉu vi havis problemojn aliri nestitan objekton? Vi eble ne scias ĉu objekto aŭ unu el ĝiaj subpropraĵoj ekzistas, kaj tio povas konduki al problemoj.
Ekzemple, ni volis aliri la datuman posedaĵon en ĉi tiu.state, sed datumoj ne estas difinitaj ĝis nia programo resendas peton de preni.
Depende de kie ni uzas ĝin, voki this.state.data povas malhelpi la aplikaĵon komenci. Por solvi la problemon, ni povus envolvi ĉi tion en kondiĉa esprimo:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Pli bona elekto estus uzi la "aŭ" funkciigiston.
return (this.state.data || 'Fetching Data');Ni ne povas ŝanĝi la supran kodon por uzi &&. La 'Fetching Data' && this.state.data operatoro resendos this.state.data sendepende de ĉu ĝi estas nedifinita aŭ ne.
Laŭvola ĉeno
Oni povus sugesti uzi laŭvolan ĉenadon kiam oni provas resendi posedaĵon profunde en arbstrukturon. Do, la demandosigno simbolo? povas esti uzata por retrovi posedaĵon nur se ĝi ne estas nula.
Ekzemple, ni povus refaktorigi la supran ekzemplon por akiri ĉi tiun.state.data?..(). Tio estas, datumoj estas resenditaj nur se la valoro ne estas nula.
Aŭ, se gravas ĉu stato estas difinita aŭ ne, ni povus redoni ĉi tiun.state?.datumon.
Konverti al Bulea
TIPA KONVERSADO
Krom la normalaj buleaj funkcioj vera kaj malvera, JavaScript ankaŭ traktas ĉiujn aliajn valorojn kiel verajn aŭ malverajn.
Ĝis alie notite, ĉiuj valoroj en JavaScript estas veraj, krom 0, "", nula, nedifinita, NaN kaj, kompreneble, falsa. La lastaj estas malveraj.
Ni povas facile ŝanĝi inter la du uzante la operatoron !, kiu ankaŭ konvertas la tipon al bulea.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Konverti al ŝnuro
TIPA KONVERSADO
Rapida konvertiĝo de entjero al ĉeno povas esti farita jene.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Konverti al entjero
TIPA KONVERSADO
Ni faras la inversan transformon tiel.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Ĉi tiu metodo ankaŭ povas esti uzata por konverti la bulean datumtipo al regulaj nombraj valoroj, kiel montrite sube:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Povas ekzisti situacioj kie + estos interpretita kiel kunliga operatoro prefere ol aldona operatoro. Por eviti ĉi tion, vi devus uzi tildojn: ~~. Ĉi tiu operatoro estas ekvivalenta al -n-1. Ekzemple, ~15 estas egala al -16.
Uzi du tildojn en vico neas la operacion ĉar - (- - n - 1) - 1 = n + 1 - 1 = n. Alivorte, ~-16 estas egala al 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
OPERACIOJ
Komencante en ES7, vi povas uzi la eksponentigan operatoron ** kiel stenografion por potencoj. Ĉi tio estas multe pli rapida ol uzi Math.pow(2, 3). Ŝajnas simpla, sed ĉi tiu punkto estas inkluzivita en la listo de teknikoj, ĉar ĝi ne estas ĉie menciita.
console.log(2 ** 3); // Result: 8Ĝi ne estu konfuzita kun la simbolo ^, kiu estas ofte uzata por eksponentigo. Sed en JavaScript ĉi tio estas la XOR-funkciigisto.
Antaŭ ES7, la ** ŝparvojo nur povus esti uzata por potencoj de bazo 2 uzante la bidirekte maldekstran movfunkciigiston <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Ekzemple, 2 << 3 = 16 estas ekvivalenta al 2 ** 4 = 16.
Flotu al entjero
OPERACIOJ / TIPO KONVERTADO
Se vi bezonas konverti flosilon al entjero, vi povas uzi Math.floor(), Math.ceil() aŭ Math.round(). Sed ekzistas pli rapida maniero, por tio ni uzas |, tio estas, la operatoro OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Konduto | dependas plejparte de ĉu vi traktas pozitivajn aŭ negativajn nombrojn, do ĉi tiu metodo taŭgas nur se vi estas certa pri tio, kion vi faras.
n | 0 forigas ĉion post la decimala apartigilo, detranĉante la flosilon al entjero.
Vi povas akiri la saman rondigan efikon uzante ~~. Post devigita konvertiĝo al entjero, la valoro restas senŝanĝa.
Forigante postajn nombrojn
La OR-funkciigisto povas esti uzata por forigi ajnan nombron da ciferoj de nombro. Ĉi tio signifas, ke ni ne bezonas konverti tipojn kiel ĉi tie:
let str = "1553";
Number(str.substring(0, str.length - 1));Anstataŭe ni simple skribas:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Aŭtomata ligo
KLASOJ
ES6-sagonotacioj povas esti uzataj en klasmetodoj, kaj ligado estas subkomprenata. Ĉi tio signifas, ke vi povas adiaŭi ripetemajn esprimojn kiel ĉi tio.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>
</>
)
}
};Tabelo de tabeloj
TAELOJ
Se vi bezonas forigi valorojn de tabelo, ekzistas pli rapidaj metodoj ol splice ().
Ekzemple, se vi konas la grandecon de la origina tabelo, vi povas superregi ĝian longon posedaĵon jene:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Sed ekzistas alia metodo, kaj pli rapida. Se rapideco estas kio gravas por vi, jen niaj elektoj:
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]Presante la lastan valoron(j)n de tabelo
TAELOJ
Ĉi tiu tekniko postulas la uzon de la metodo 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]Formatado JSON-kodo
JSON
Vi eble jam uzis JSON.stringify. Ĉu vi scias, ke ĝi helpas formi vian JSON?
La metodo stringify () prenas du laŭvolajn parametrojn: anstataŭan funkcion, kiu povas esti uzata por filtri la JSON montritan, kaj spacvaloron.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Jen ĉio, mi esperas, ke ĉiuj ĉi tiuj teknikoj estis utilaj. Kiajn lertaĵojn vi konas? Skribu ilin en la komentoj.
Skillbox rekomendas:
- Dujara praktika kurso .
- Interreta kurso .
- Praktika jarkurso .
fonto: www.habr.com