Kai pradėjau mokytis JavaScript, pirmas dalykas, kurį padariau, buvo sudarytas gudrybių, kurios padėjo sutaupyti laiko, sąrašas. Aš juos pastebėjau iš kitų programuotojų, įvairiose svetainėse ir vadovuose.
Šiame straipsnyje parodysiu 12 puikių būdų, kaip pagerinti ir pagreitinti JavaScript kodą. Daugeliu atvejų jie yra universalūs.
Primename: visiems „Habr“ skaitytojams – 10 000 rublių nuolaida užsiregistravus į bet kurį „Skillbox“ kursą naudojant „Habr“ reklamos kodą.
„Skillbox“ rekomenduoja: Praktinis kursas .
Unikalių verčių filtravimas
MASTYVAI
Objekto tipas Set buvo įvestas ES6 kartu su..., platinimo operatoriumi, kurį galime naudoti kurdami naują masyvą, kuriame yra tik unikalios reikšmės.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Įprastoje situacijoje tai pačiai operacijai atlikti reikia daug daugiau kodo.
Šis metodas tinka masyvams, kuriuose yra primityvių tipų: neapibrėžtas, nulinis, loginis, eilutė ir skaičius. Jei dirbate su masyvu, kuriame yra objektai, funkcijos arba papildomi masyvai, jums reikės kitokio požiūrio.
Talpyklos masyvo ilgis ciklais
CIKLAI
Mokydamiesi ciklo, laikotės standartinės procedūros:
for (let i = 0; i < array.length; i++){
console.log(i);
}Tačiau naudojant šią sintaksę, ciklas for pakartotinai tikrina masyvo ilgį kiekvieną iteraciją.
Kartais tai gali būti naudinga, tačiau daugeliu atvejų efektyviau išsaugoti masyvo ilgį talpykloje, o tam reikės vienos prieigos. Tai galime padaryti apibrėždami ilgio kintamąjį, kur apibrėžiame kintamąjį i, kaip nurodyta:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Iš esmės beveik tas pats, kas aukščiau, tačiau padidinę kilpos dydį sutaupysime daug laiko.
Trumpojo jungimo įvertinimas (McCarthy reitingas)
SĄLYGINIAI OPERATORIAI
Trinaris operatorius yra greitas ir efektyvus būdas parašyti paprastus (o kartais ir ne tokius paprastus) sąlyginius teiginius:
x> 100? „daugiau nei 100“: „mažiau nei 100“;
x> 100? (x>200? "daugiau nei 200": "tarp 100-200"): "mažiau nei 100";
Tačiau kartais net trijų dalių operatorius yra sudėtingesnis nei reikalaujama. Vietoj to galime naudoti „ir“ && ir „arba“ || Būlio operatoriai, norėdami dar glaustai įvertinti tam tikras išraiškas. Jis dažnai vadinamas „trumpuoju jungimu“ arba „trumpojo jungimo įvertinimu“.
Kaip tai veikia
Tarkime, kad norime grąžinti tik vieną iš dviejų ar daugiau sąlygų.
Naudojant && bus grąžinta pirmoji klaidinga reikšmė. Jei kiekvieno operando vertė yra teisinga, tada bus grąžinta paskutinė įvertinta išraiška.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Naudojant || grąžins pirmąją tikrąją vertę. Jei kiekvieno operando vertė yra klaidinga, bus grąžinta paskutinė įvertinta reikšmė.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullPavyzdys 1
Tarkime, kad norime grąžinti kintamojo ilgį, bet nežinome jo tipo.
Tokiu atveju galite naudoti if/else, kad patikrintumėte, ar foo yra tinkamas tipas, tačiau šis metodas gali būti per ilgas. Todėl geriau imtis mūsų „trumpojo jungimo“.
return (foo || []).length;Jei kintamasis foo yra tinkamo ilgio, jis bus grąžintas. Priešingu atveju gausime 0.
Pavyzdys 2
Ar kilo problemų pasiekiant įdėtą objektą? Galite nežinoti, ar objektas ar viena iš jo subypatybių egzistuoja, ir tai gali sukelti problemų.
Pavyzdžiui, norėjome pasiekti duomenų ypatybę this.state, bet duomenys neapibrėžiami tol, kol programa nepateikia gavimo užklausos.
Priklausomai nuo to, kur ją naudojame, iškvietus this.state.data programa gali nepasileisti. Norėdami išspręsti problemą, galėtume tai suvynioti į sąlyginę išraišką:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Geresnis pasirinkimas būtų naudoti operatorių „arba“.
return (this.state.data || 'Fetching Data');Negalime pakeisti anksčiau pateikto kodo, kad būtų naudojamas &&. Operatorius „Duomenų gavimas“ && this.state.data pateiks this.state.data neatsižvelgiant į tai, ar jie neapibrėžti, ar ne.
Neprivaloma grandinė
Bandant grąžinti nuosavybę giliai į medžio struktūrą, būtų galima pasiūlyti naudoti pasirenkamą grandininę funkciją. Taigi, klaustuko simbolis? gali būti naudojamas norint gauti nuosavybę tik tuo atveju, jei ji nėra nulinė.
Pavyzdžiui, galėtume perdaryti anksčiau pateiktą pavyzdį, kad gautume this.state.data?..(). Tai reiškia, kad duomenys grąžinami tik tuo atveju, jei reikšmė nėra nulinė.
Arba, jei svarbu, ar būsena apibrėžta, ar ne, galime grąžinti this.state?.data.
Konvertuoti į Būlio
TIPO KONVERSIJA
Be įprastų loginių funkcijų true ir false, JavaScript taip pat traktuoja visas kitas reikšmes kaip teisingas arba klaidingas.
Kol nenurodyta kitaip, visos „JavaScript“ reikšmės yra teisingos, išskyrus 0, „“, null, neapibrėžta, NaN ir, žinoma, false. Pastarieji yra melagingi.
Galime lengvai persijungti tarp dviejų naudodami operatorių !, kuris taip pat konvertuoja tipą į loginį.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Konvertuoti į eilutę
TIPO KONVERSIJA
Greitas sveikojo skaičiaus konvertavimas į eilutę gali būti atliktas taip.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Konvertuoti į sveikąjį skaičių
TIPO KONVERSIJA
Atliekame atvirkštinę transformaciją taip.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Šis metodas taip pat gali būti naudojamas loginiam duomenų tipui konvertuoti į įprastas skaitines reikšmes, kaip parodyta toliau:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Gali būti situacijų, kai + bus interpretuojamas kaip sujungimo operatorius, o ne kaip pridėjimo operatorius. Norėdami to išvengti, turėtumėte naudoti tildes: ~~. Šis operatorius yra lygus -n-1. Pavyzdžiui, ~15 yra lygus -16.
Naudojant dvi tildes iš eilės operacija paneigiama, nes - (- - n - 1) - 1 = n + 1 - 1 = n. Kitaip tariant, ~-16 yra lygus 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
VEIKLOS
Pradedant nuo ES7, galite naudoti eksponencijos operatorių ** kaip galių trumpinį. Tai daug greičiau nei naudojant Math.pow(2, 3). Atrodo paprasta, tačiau šis punktas yra įtrauktas į metodų sąrašą, nes jis minimas ne visur.
console.log(2 ** 3); // Result: 8Jo nereikėtų painioti su simboliu ^, kuris dažniausiai naudojamas eksponencijai. Bet JavaScript tai yra XOR operatorius.
Prieš ES7 spartusis klavišas ** galėjo būti naudojamas tik 2 bazės galioms, naudojant bitų poslinkio į kairę operatorių <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Pavyzdžiui, 2 << 3 = 16 atitinka 2** 4 = 16.
Plūduriuoti iki sveikojo skaičiaus
OPERACIJOS / TIPO KONVERSIJA
Jei reikia konvertuoti slankųjį skaičių į sveikąjį skaičių, galite naudoti Math.floor(), Math.ceil() arba Math.round(). Tačiau yra greitesnis būdas, tam mes naudojame |, tai yra, operatorių OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Elgesys | labai priklauso nuo to, ar turite reikalų su teigiamais ar neigiamais skaičiais, todėl šis metodas tinka tik tuo atveju, jei esate įsitikinęs tuo, ką darote.
n | 0 pašalina viską po dešimtainio skyriklio, sutrumpina slankiąją reikšmę iki sveikojo skaičiaus.
Tą patį apvalinimo efektą galite gauti naudodami ~~. Po priverstinio konvertavimo į sveikąjį skaičių vertė lieka nepakitusi.
Pašalinami galiniai numeriai
Operatorius OR gali būti naudojamas norint pašalinti bet kokį skaičių skaitmenų iš skaičiaus. Tai reiškia, kad mums nereikia konvertuoti tipų, kaip čia:
let str = "1553";
Number(str.substring(0, str.length - 1));Vietoj to mes tiesiog rašome:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Automatinis susiejimas
KLASĖS
ES6 rodyklių žymėjimai gali būti naudojami klasių metoduose ir yra numanomas įrišimas. Tai reiškia, kad galite atsisveikinti su pasikartojančiomis išraiškomis, tokiomis kaip 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>
</>
)
}
};Masyvo apipjaustymas
MASTYVAI
Jei reikia išimti reikšmes iš masyvo, yra greitesnių metodų nei splice ().
Pavyzdžiui, jei žinote pradinio masyvo dydį, galite nepaisyti jo ilgio ypatybės taip:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Tačiau yra ir kitas būdas, ir greitesnis. Jei jums svarbus greitis, čia yra mūsų pasirinkimai:
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]Paskutinės masyvo reikšmės (-ių) spausdinimas
MASTYVAI
Ši technika reikalauja naudoti slice() metodą.
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 kodo formatavimas
JSON
Galbūt jau naudojote JSON.stringify. Ar žinojote, kad tai padeda formatuoti JSON?
Stringify() metodas naudoja du pasirenkamus parametrus: pakeitimo funkciją, kurią galima naudoti rodomam JSON filtruoti, ir tarpo reikšmę.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Tai viskas, tikiuosi, kad visi šie metodai buvo naudingi. Kokius triukus žinai? Parašykite juos komentaruose.
„Skillbox“ rekomenduoja:
- Dvejų metų praktinis kursas .
- Internetinis kursas .
- Praktinių metų kursas .
Šaltinis: www.habr.com