Kur fillova të mësoja JavaScript, gjëja e parë që bëra ishte të bëja një listë me truket që më ndihmuan të kursej kohë. I dallova nga programues të tjerë, në faqe të ndryshme dhe në manuale.
Në këtë artikull, unë do t'ju tregoj 12 mënyra të shkëlqyera për të përmirësuar dhe përshpejtuar kodin tuaj JavaScript. Në shumicën e rasteve ato janë universale.
Kujtojmë: për të gjithë lexuesit e "Habr" - një zbritje prej 10 rubla kur regjistroheni në çdo kurs Skillbox duke përdorur kodin promovues "Habr".
Skillbox rekomandon: Kurse praktike .
Filtrimi i vlerave unike
VARGET
Lloji i objektit Set u prezantua në ES6, së bashku me operatorin..., spread, ne mund ta përdorim atë për të krijuar një grup të ri që përmban vetëm vlera unike.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Në një situatë normale, nevojitet shumë më tepër kod për të kryer të njëjtin operacion.
Kjo teknikë funksionon për vargje që përmbajnë lloje primitive: të papërcaktuar, null, boolean, varg dhe numër. Nëse jeni duke punuar me një grup që përmban objekte, funksione ose vargje shtesë, do t'ju duhet një qasje tjetër.
Gjatësia e grupit të cache në cikle
CIKLET
Kur mësoni për sythe, ndiqni procedurën standarde:
for (let i = 0; i < array.length; i++){
console.log(i);
}Megjithatë, me këtë sintaksë, cikli for kontrollon në mënyrë të përsëritur gjatësinë e grupit çdo përsëritje.
Ndonjëherë kjo mund të jetë e dobishme, por në shumicën e rasteve është më efikase të ruhet memoria e gjatësisë së grupit, e cila do të kërkojë një qasje në të. Ne mund ta bëjmë këtë duke përcaktuar një variabël gjatësi ku përcaktojmë ndryshoren i, si kjo:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Në parim, pothuajse njësoj si më sipër, por duke rritur madhësinë e lakut do të kemi kursime të konsiderueshme në kohë.
Vlerësimi i qarkut të shkurtër (vlerësimi McCarthy)
OPERATORËT TË KUSHTSHËM
Operatori tresh është një mënyrë e shpejtë dhe efikase për të shkruar deklarata të thjeshta (dhe nganjëherë jo aq të thjeshta) të kushtëzuara:
x> 100? “më shumë se 100”: “më pak se 100”;
x> 100? (x>200? "më shumë se 200": "midis 100-200"): "më pak se 100";
Por ndonjëherë edhe operatori tresh është më i ndërlikuar sesa kërkohet. Ne mund të përdorim 'dhe' && dhe 'ose' në vend të || Operatorët Boolean për të vlerësuar shprehje të caktuara në një mënyrë edhe më koncize. Shpesh quhet "qark i shkurtër" ose "vlerësimi i qarkut të shkurtër".
Si punon kjo
Le të themi se duam të kthejmë vetëm një nga dy ose më shumë kushte.
Përdorimi i && do të kthejë vlerën e parë false. Nëse secili operand vlerësohet në true, atëherë shprehja e fundit e vlerësuar do të kthehet.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Duke përdorur || do të kthejë vlerën e parë të vërtetë. Nëse çdo operand vlerësohet në false, atëherë vlera e fundit e vlerësuar do të kthehet.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null1 Shembull
Le të themi se duam të kthejmë gjatësinë e një ndryshoreje, por nuk e dimë llojin e saj.
Në këtë rast, mund të përdorni if/else për të kontrolluar që foo është lloji i duhur, por kjo metodë mund të jetë shumë e gjatë. Prandaj, është më mirë të marrim "qarkun tonë të shkurtër".
return (foo || []).length;Nëse ndryshorja foo ka një gjatësi të përshtatshme, atëherë ajo do të kthehet. Përndryshe do të marrim 0.
2 Shembull
Keni pasur probleme me aksesin në një objekt të vendosur? Ju mund të mos e dini nëse ekziston një objekt ose një nga nënvetitë e tij dhe kjo mund të çojë në probleme.
Për shembull, ne donim të hynim në vetinë e të dhënave në this.state, por të dhënat nuk përcaktohen derisa programi ynë të kthejë një kërkesë për të marrë.
Në varësi të vendit ku e përdorim, thirrja e this.state.data mund të parandalojë nisjen e aplikacionit. Për të zgjidhur problemin, ne mund ta mbështjellim këtë me një shprehje të kushtëzuar:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Një opsion më i mirë do të ishte përdorimi i operatorit "ose".
return (this.state.data || 'Fetching Data');Nuk mund ta ndryshojmë kodin e mësipërm për të përdorur &&. Operatori "Marrja e të dhënave" && this.state.data do të kthejë këtë.state.data pavarësisht nëse është i padefinuar apo jo.
Zinxhiri opsional
Dikush mund të sugjerojë përdorimin e zinxhirit opsional kur përpiqeni të ktheni një pronë thellë në një strukturë peme. Pra, simboli i pikëpyetjes? mund të përdoret për të tërhequr një pronë vetëm nëse ajo nuk është e pavlefshme.
Për shembull, ne mund të rifaktojmë shembullin e mësipërm për të marrë this.state.data?..(). Kjo do të thotë, të dhënat kthehen vetëm nëse vlera nuk është nule.
Ose, nëse ka rëndësi nëse shteti është i përcaktuar apo jo, ne mund t'i kthejmë këto të dhëna.
Konverto në Boolean
KONVERSIMI I LLOJIT
Përveç funksioneve normale boolean true dhe false, JavaScript gjithashtu i trajton të gjitha vlerat e tjera si të vërteta ose false.
Derisa të shënohet ndryshe, të gjitha vlerat në JavaScript janë të vërteta, përveç 0, "", null, të papërcaktuar, NaN dhe, natyrisht, false. Këto të fundit janë false.
Ne mund të kalojmë lehtësisht midis të dyve duke përdorur operatorin !, i cili gjithashtu konverton llojin në boolean.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Konverto në varg
KONVERSIMI I LLOJIT
Një konvertim i shpejtë nga një numër i plotë në një varg mund të bëhet si më poshtë.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Konvertoni në numër të plotë
KONVERSIMI I LLOJIT
Ne kryejmë transformimin e kundërt si kjo.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Kjo metodë mund të përdoret gjithashtu për të kthyer llojin e të dhënave boolean në vlera të rregullta numerike, siç tregohet më poshtë:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Mund të ketë situata ku + do të interpretohet si një operator bashkimi dhe jo si një operator shtesë. Për të shmangur këtë, duhet të përdorni tilda: ~~. Ky operator është ekuivalent me -n-1. Për shembull, ~ 15 është e barabartë me -16.
Përdorimi i dy tildave në një rresht mohon veprimin sepse - (- - n - 1) - 1 = n + 1 - 1 = n. Me fjalë të tjera, ~-16 është e barabartë me 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Fuqitë e shpejta
OPERACIONET
Duke filluar në ES7, mund të përdorni operatorin e fuqisë ** si një stenografi për fuqitë. Kjo është shumë më shpejt sesa përdorimi i Math.pow(2, 3). Duket e thjeshtë, por kjo pikë është përfshirë në listën e teknikave, pasi nuk përmendet kudo.
console.log(2 ** 3); // Result: 8Nuk duhet të ngatërrohet me simbolin ^, i cili përdoret zakonisht për fuqizim. Por në JavaScript ky është operatori XOR.
Përpara ES7, shkurtorja ** mund të përdorej vetëm për fuqitë e bazës 2 duke përdorur operatorin e zhvendosjes majtas bit <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Për shembull, 2 << 3 = 16 është e barabartë me 2 ** 4 = 16.
Float në numër të plotë
OPERACIONET / KONVERTIMI I LLOJIT
Nëse keni nevojë të konvertoni një float në një numër të plotë, mund të përdorni Math.floor(), Math.ceil() ose Math.round(). Por ka një mënyrë më të shpejtë, për këtë përdorim |, pra operatorin OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Sjellja | varet kryesisht nga fakti nëse keni të bëni me numra pozitivë apo negativë, kështu që kjo metodë është e përshtatshme vetëm nëse jeni të sigurt në atë që po bëni.
n | 0 heq çdo gjë pas ndarësit dhjetor, duke shkurtuar float në një numër të plotë.
Mund të merrni të njëjtin efekt rrumbullakimi duke përdorur ~~. Pas konvertimit të detyruar në një numër të plotë, vlera mbetet e pandryshuar.
Heqja e numrave pasues
Operatori OR mund të përdoret për të hequr çdo numër shifrash nga një numër. Kjo do të thotë që nuk kemi nevojë të konvertojmë lloje si këtu:
let str = "1553";
Number(str.substring(0, str.length - 1));Në vend të kësaj ne thjesht shkruajmë:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Lidhje automatike
KLASAT
Shënimet e shigjetave ES6 mund të përdoren në metodat e klasës dhe lidhja nënkuptohet. Kjo do të thotë që mund t'u thuash lamtumirë shprehjeve të përsëritura si kjo.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>
</>
)
}
};Shkurtimi i grupit
VARGET
Nëse keni nevojë të hiqni vlerat nga një grup, ka metoda më të shpejta se splice().
Për shembull, nëse e dini madhësinë e grupit origjinal, mund të anashkaloni vetinë e gjatësisë së tij si më poshtë:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Por ka një metodë tjetër, dhe më të shpejtë. Nëse shpejtësia është ajo që ka rëndësi për ju, këtu janë zgjedhjet tona:
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]Printimi i vlerave të fundit të një grupi
VARGET
Kjo teknikë kërkon përdorimin e metodës 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]Formatimi i kodit JSON
JSON
Ju mund të keni përdorur tashmë JSON.stringify. A e dini se ndihmon në formatimin e JSON-it tuaj?
Metoda stringify() merr dy parametra opsionale: një funksion zëvendësues, i cili mund të përdoret për të filtruar JSON-in e shfaqur dhe një vlerë hapësire.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Kjo është e gjitha, shpresoj që të gjitha këto teknika të ishin të dobishme. Çfarë truke dini? Shkruajini ato në komente.
Skillbox rekomandon:
- Kurse praktike dyvjeçare .
- Kurs online .
- Kursi praktik i vitit .
Burimi: www.habr.com