Þegar ég byrjaði að læra JavaScript var það fyrsta sem ég gerði að búa til lista yfir brellur sem hjálpuðu mér að spara tíma. Ég sá þá frá öðrum forriturum, á mismunandi síðum og í handbókum.
Í þessari grein mun ég sýna þér 12 frábærar leiðir til að bæta og flýta fyrir JavaScript kóðanum þínum. Í flestum tilfellum eru þau alhliða.
Við minnum á: fyrir alla Habr lesendur - 10 rúblur afsláttur þegar þú skráir þig á hvaða Skillbox námskeið sem er með því að nota Habr kynningarkóðann.
Skillbox mælir með: Verklegt námskeið .
Sía einstök gildi
FYLDI
Setja hlutargerðin var kynnt í ES6, ásamt..., dreifikerfi, við getum notað það til að búa til nýtt fylki sem inniheldur aðeins einstök gildi.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Við venjulegar aðstæður þarf miklu meiri kóða til að framkvæma sömu aðgerðina.
Þessi tækni virkar fyrir fylki sem innihalda frumstæðar tegundir: óskilgreint, núll, boolean, streng og tala. Ef þú ert að vinna með fylki sem inniheldur hluti, aðgerðir eða viðbótarfylki þarftu aðra nálgun.
Lengd skyndiminni fylkisins í lotum
HREYSLUR
Þegar þú lærir fyrir lykkjur, fylgirðu venjulegu ferlinu:
for (let i = 0; i < array.length; i++){
console.log(i);
}Hins vegar, með þessari setningafræði, athugar for lykkjan ítrekað lengd fylkisins í hverri endurtekningu.
Stundum getur þetta verið gagnlegt, en í flestum tilfellum er skilvirkara að vista lengd fylkisins, sem mun krefjast aðgangs að henni. Við getum gert þetta með því að skilgreina lengdarbreytu þar sem við skilgreinum breytuna i, svona:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Í grundvallaratriðum, nánast það sama og hér að ofan, en með því að auka lykkjustærðina munum við fá verulegan tímasparnað.
Skammhlaupseinkunn (McCarthy einkunn)
SKILYRÐIR Rekstraraðilar
Þrjár rekstraraðili er fljótleg og skilvirk leið til að skrifa einfaldar (og stundum ekki svo einfaldar) skilyrtar staðhæfingar:
x> 100? „meira en 100“: „minna en 100“;
x> 100? (x>200? "meira en 200": "milli 100-200"): "minna en 100";
En stundum er jafnvel þrískiptur rekstraraðili flóknari en krafist er. Við getum notað 'og' && og 'eða' í staðinn || Boolean rekstraraðilar til að meta ákveðnar tjáningar á enn hnitmiðaðri hátt. Það er oft kallað „skammhlaup“ eða „skammhlaupsmat“.
Hvernig virkar þetta
Segjum að við viljum skila aðeins einu af tveimur eða fleiri skilyrðum.
Notkun && mun skila fyrsta ranga gildinu. Ef hver operand er metinn til sanns, þá verður síðasta tjáningin sem metin var skilað.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Með því að nota || mun skila fyrsta sanna gildinu. Ef hver operand er metin sem ósönn, þá verður síðasta meta gildið skilað.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullDæmi 1
Segjum að við viljum skila lengd breytu, en við vitum ekki gerð hennar.
Í þessu tilfelli geturðu notað if/else til að athuga hvort foo sé rétt tegund, en þessi aðferð gæti verið of löng. Þess vegna er betra að taka „skammhlaup“ okkar.
return (foo || []).length;Ef breytilegt foo hefur viðeigandi lengd, þá verður það skilað. Annars fáum við 0.
Dæmi 2
Hefur þú átt í vandræðum með að fá aðgang að hreiðri hlut? Þú veist kannski ekki hvort hlutur eða ein af undireiginleikum hans er til og það getur leitt til vandamála.
Til dæmis vildum við fá aðgang að gagnaeiginleikanum í this.state, en gögn eru ekki skilgreind fyrr en forritið okkar skilar niðurhalsbeiðni.
Það fer eftir því hvar við notum það, að kalla this.state.data gæti komið í veg fyrir að forritið ræsist. Til að leysa vandamálið gætum við sett þetta inn í skilyrta tjáningu:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Betri kostur væri að nota "eða" símafyrirtækið.
return (this.state.data || 'Fetching Data');Við getum ekki breytt kóðanum hér að ofan til að nota &&. 'Sækir gögn' && this.state.data rekstraraðili mun skila this.state.data óháð því hvort þau eru óskilgreind eða ekki.
Valfrjáls keðja
Maður gæti stungið upp á því að nota valfrjálsa keðjutengingu þegar reynt er að skila eign djúpt inn í trébyggingu. Svo spurningarmerkið? er aðeins hægt að nota til að sækja eign ef hún er ekki ógild.
Til dæmis gætum við breytt dæminu hér að ofan til að fá þessi.ástandsgögn?..(). Það er, gögnum er aðeins skilað ef gildið er ekki núll.
Eða, ef það skiptir máli hvort ástand er skilgreint eða ekki, gætum við skilað þessum.ástandi?.gögnum.
Umbreyta í Boolean
GERÐUMBREYTING
Auk venjulegra Boolean aðgerða satt og ósatt, meðhöndlar JavaScript einnig öll önnur gildi sem sönn eða ósönn.
Þar til annað er tekið fram eru öll gildi í JavaScript sönn, nema 0, "", núll, óskilgreint, NaN og auðvitað ósatt. Hinar síðarnefndu eru rangar.
Við getum auðveldlega skipt á milli þeirra tveggja með því að nota ! rekstraraðila, sem einnig breytir gerðinni í Boolean.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Umbreyta í streng
GERÐUMBREYTING
Fljótleg umbreyting úr heiltölu í streng er hægt að gera á eftirfarandi hátt.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Umbreyta í heiltölu
GERÐUMBREYTING
Við framkvæmum öfuga umbreytingu svona.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Þessa aðferð er einnig hægt að nota til að breyta boolean gagnategundinni í venjuleg tölugildi, eins og sýnt er hér að neðan:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Það geta verið aðstæður þar sem + verður túlkað sem samtengingaraðgerð frekar en samlagningaraðgerð. Til að forðast þetta ættir þú að nota tildes: ~~. Þessi rekstraraðili jafngildir -n-1. Til dæmis, ~15 er jafnt og -16.
Notkun tveggja tilda í röð útilokar aðgerðina vegna þess að - (- - n - 1) - 1 = n + 1 - 1 = n. Með öðrum orðum, ~-16 er jafnt og 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
AÐGERÐIR
Frá og með ES7 er hægt að nota veldisvísisoperator ** sem styttingu fyrir krafta. Þetta er miklu hraðari en að nota Math.pow(2, 3). Það virðist einfalt, en þetta atriði er innifalið í lista yfir tækni, þar sem það er ekki getið alls staðar.
console.log(2 ** 3); // Result: 8Það ætti ekki að rugla saman við táknið ^, sem er almennt notað fyrir veldisvísitölu. En í JavaScript er þetta XOR rekstraraðilinn.
Fyrir ES7 var aðeins hægt að nota ** flýtileiðina fyrir krafta í grunni 2 með því að nota bitavísis vinstri vaktstjórnanda <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Til dæmis jafngildir 2 << 3 = 16 2 ** 4 = 16.
Fljóta í heiltölu
REKSTUR / GERÐUMBREYTING
Ef þú þarft að breyta floti í heiltölu geturðu notað Math.floor(), Math.ceil() eða Math.round(). En það er hraðari leið, til þess notum við |, það er OR rekstraraðila.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Hegðun | fer að miklu leyti eftir því hvort þú ert að fást við jákvæðar eða neikvæðar tölur, þannig að þessi aðferð hentar aðeins ef þú ert öruggur í því sem þú ert að gera.
n | 0 fjarlægir allt á eftir tugaskiljunni og styttir flotið í heila tölu.
Þú getur fengið sömu námundunaráhrif með því að nota ~~. Eftir þvingaða umbreytingu í heiltölu helst gildið óbreytt.
Fjarlægir slóðnúmer
Hægt er að nota OR rekstraraðila til að fjarlægja hvaða fjölda tölustafa sem er úr númeri. Þetta þýðir að við þurfum ekki að umbreyta gerðum eins og hér:
let str = "1553";
Number(str.substring(0, str.length - 1));Í staðinn skrifum við einfaldlega:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Sjálfvirk tenging
FLOKKAR
Hægt er að nota ES6 örmerkingar í bekkjaraðferðum og binding er gefið í skyn. Þetta þýðir að þú getur sagt bless við endurteknar tjáningar eins og 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>
</>
)
}
};Fylkisklipping
FYLDI
Ef þú þarft að fjarlægja gildi úr fylki, þá eru til hraðari aðferðir en splice().
Til dæmis, ef þú veist stærð upprunalegu fylkisins geturðu hnekkt lengdareiginleika þess sem hér segir:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]En það er önnur aðferð og hraðari. Ef hraði er það sem skiptir þig máli, hér eru valin okkar:
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]Prentun síðasta gildi(s) fylkis
FYLDI
Þessi tækni krefst notkunar á sneið() aðferðinni.
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]Forsníða JSON kóða
JSON
Þú gætir hafa þegar notað JSON.stringify. Vissir þú að það hjálpar til við að forsníða JSON þinn?
Stringify() aðferðin tekur tvær valfrjálsar færibreytur: skiptiaðgerð sem hægt er að nota til að sía JSON sem birtist og bilgildi.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Það er allt, ég vona að allar þessar aðferðir hafi verið gagnlegar. Hvaða brellur kanntu? Skrifaðu þær í athugasemdirnar.
Skillbox mælir með:
- Tveggja ára verklegt nám .
- Rafræn fræðsla .
- Hagnýtt eins árs nám .
Heimild: www.habr.com