Mbinu 12 za JavaScript Ambazo Mafunzo Zaidi Hukosa
Nilipoanza kujifunza JavaScript, jambo la kwanza nililofanya ni kutengeneza orodha ya hila ambazo zilinisaidia kuokoa muda. Niliziona kutoka kwa watengenezaji programu wengine, kwenye tovuti tofauti na katika miongozo.
Katika makala hii, nitakuonyesha njia 12 nzuri za kuboresha na kuharakisha msimbo wako wa JavaScript. Katika hali nyingi wao ni zima.
Tunakukumbusha:kwa wasomaji wote wa "Habr" - punguzo la rubles 10 wakati wa kujiandikisha katika kozi yoyote ya Skillbox kwa kutumia msimbo wa uendelezaji wa "Habr".
Aina ya kitu cha Set ilianzishwa katika ES6, pamoja na..., kiendeshaji cha kuenea, tunaweza kuitumia kuunda safu mpya ambayo ina thamani za kipekee pekee.
Katika hali ya kawaida, nambari zaidi inahitajika kufanya operesheni sawa.
Mbinu hii inafanya kazi kwa safu zilizo na aina za zamani: zisizofafanuliwa, null, boolean, kamba na nambari. Ikiwa unafanya kazi na safu iliyo na vitu, chaguo za kukokotoa, au safu za ziada, utahitaji mbinu tofauti.
Urefu wa safu ya kache katika mizunguko
MIZUNGUKO
Unapojifunza kwa vitanzi, unafuata utaratibu wa kawaida:
for (let i = 0; i < array.length; i++){
console.log(i);
}
Walakini, kwa sintaksia hii, kitanzi cha for loop hukagua mara kwa mara urefu wa safu kila marudio.
Wakati mwingine hii inaweza kuwa na manufaa, lakini katika hali nyingi ni ufanisi zaidi wa cache urefu wa safu, ambayo itahitaji upatikanaji mmoja kwa hiyo. Tunaweza kufanya hivyo kwa kufafanua kutofautisha kwa urefu ambapo tunafafanua kutofautisha i, kama hii:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}
Kimsingi, karibu sawa na hapo juu, lakini kwa kuongeza saizi ya kitanzi tutapata akiba kubwa ya wakati.
Ukadiriaji wa mzunguko mfupi (ukadiriaji wa McCarthy)
WAENDESHAJI WENYE MASHARTI
Opereta wa tatu ni njia ya haraka na bora ya kuandika taarifa za masharti rahisi (na wakati mwingine sio rahisi sana):
x> 100? "zaidi ya 100": "chini ya 100";
x> 100? (x>200? "zaidi ya 200": "kati ya 100-200"): "chini ya 100";
Lakini wakati mwingine hata operator wa ternary ni ngumu zaidi kuliko inavyotakiwa. Tunaweza kutumia 'na' && na 'au' badala yake || Waendeshaji Boolean kutathmini misemo fulani kwa njia fupi zaidi. Mara nyingi huitwa "mzunguko mfupi" au "kadirio la mzunguko mfupi".
Jinsi gani kazi hii
Wacha tuseme tunataka kurudisha moja tu ya masharti mawili au zaidi.
Kutumia && kutarudisha thamani ya kwanza isiyo ya kweli. Ikiwa kila operesheni itatathminiwa kuwa kweli, basi usemi wa mwisho uliotathminiwa utarejeshwa.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0
Kwa kutumia || itarudisha thamani ya kwanza ya kweli. Ikiwa kila operesheni itatathminiwa kuwa sivyo, basi thamani ya mwisho iliyotathminiwa itarejeshwa.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null
mfano 1
Wacha tuseme tunataka kurudisha urefu wa kibadilishaji, lakini hatujui aina yake.
Katika kesi hii, unaweza kutumia if/vinginevyo kuangalia kuwa foo ndio aina sahihi, lakini njia hii inaweza kuwa ndefu sana. Kwa hiyo, ni bora kuchukua "mzunguko mfupi" wetu.
return (foo || []).length;
Ikiwa kigezo cha foo kina urefu unaofaa, basi hiyo itarejeshwa. Vinginevyo tutapata 0.
mfano 2
Je, umekuwa na matatizo ya kufikia kitu kilichowekwa kiota? Huenda usijue kama kitu au moja ya mali zake ndogo zipo, na hii inaweza kusababisha matatizo.
Kwa mfano, tulitaka kufikia sifa ya data katika this.state, lakini data haijafafanuliwa hadi mpango wetu urejeshe ombi la kuleta.
Kulingana na mahali tunapoitumia, kupiga simu kwa this.state.data kunaweza kuzuia programu kuanza. Ili kutatua shida, tunaweza kufunika hii kwa usemi wa masharti:
Hatuwezi kubadilisha nambari iliyo hapo juu ili kutumia &&. Opereta wa 'Kuleta Data' && this.state.data atarudisha data hii.state.bila kujali ikiwa haijafafanuliwa au la.
Mlolongo wa hiari
Mtu anaweza kupendekeza kutumia mnyororo wa hiari wakati wa kujaribu kurudisha mali ndani ya muundo wa mti. Kwa hivyo, ishara ya alama ya swali? inaweza kutumika kupata tena mali ikiwa sio batili.
Kwa mfano, tunaweza kurekebisha mfano hapo juu ili kupata hii.state.data?..(). Hiyo ni, data inarejeshwa tu ikiwa thamani sio batili.
Au, ikiwa ni muhimu ikiwa hali imefafanuliwa au la, tunaweza kurudisha data hii.
Badilisha kuwa Boolean
UONGOFU WA AINA
Kwa kuongezea utendaji wa kawaida wa boolean kuwa kweli na si kweli, JavaScript pia huchukulia maadili mengine yote kama ukweli au uwongo.
Hadi itakapobainishwa vinginevyo, maadili yote katika JavaScript ni ya ukweli, isipokuwa 0, "", null, undefined, NaN na, bila shaka, uongo. Ya mwisho ni ya uongo.
Tunaweza kubadilisha kati ya hizo mbili kwa urahisi kwa kutumia ! opereta, ambayo pia hubadilisha aina kuwa boolean.
Kunaweza kuwa na hali ambapo + itafasiriwa kama opereta wa kuunganisha badala ya opereta wa kuongeza. Ili kuepusha hili, unapaswa kutumia tildes: ~~. Opereta huyu ni sawa na -n-1. Kwa mfano, ~15 ni sawa na -16.
Kutumia miteremko miwili mfululizo kunakanusha uendeshaji kwa sababu - (- - n - 1) - 1 = n + 1 - 1 = n. Kwa maneno mengine, ~-16 ni sawa na 15.
Kuanzia ES7, unaweza kutumia kiendeshaji cha ufafanuzi ** kama njia ya mkato ya nguvu. Hii ni haraka zaidi kuliko kutumia Math.pow(2, 3). Inaonekana rahisi, lakini hatua hii imejumuishwa katika orodha ya mbinu, kwani haijatajwa kila mahali.
console.log(2 ** 3); // Result: 8
Haipaswi kuchanganyikiwa na ^ ishara, ambayo hutumiwa kwa kawaida kwa ufafanuzi. Lakini katika JavaScript huyu ndiye mwendeshaji wa XOR.
Kabla ya ES7, njia ya mkato ya ** inaweza kutumika tu kwa nguvu za msingi 2 kwa kutumia kiendeshashi cha shiftwise kushoto kidogo <<:
Math.pow(2, n);
2 << (n - 1);
2**n;
Kwa mfano, 2 << 3 = 16 ni sawa na 2 ** 4 = 16.
Elekea hadi nambari kamili
UENDESHAJI / UONGOZI WA AINA
Ikiwa unahitaji kubadilisha kuelea hadi nambari kamili, unaweza kutumia Math.floor(), Math.ceil() au Math.round(). Lakini kuna njia ya haraka zaidi, kwa hii tunayotumia |, yaani, Opereta AU.
Vielelezo vya vishale vya ES6 vinaweza kutumika katika mbinu za darasa, na kufunga kunadokezwa. Hii inamaanisha kuwa unaweza kusema kwaheri kwa misemo inayojirudia kama hii.myMethod = this.myMethod.bind(hii)!
Huenda tayari umetumia JSON.stringify. Je, unajua kwamba inasaidia kuunda JSON yako?
Mbinu ya stringify() inachukua vigezo viwili vya hiari: chaguo la kukokotoa mbadala, ambalo linaweza kutumika kuchuja JSON inayoonyeshwa, na thamani ya nafasi.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'
Hiyo ndiyo yote, natumaini kwamba mbinu hizi zote zilikuwa muhimu. Je, unajua mbinu gani? Waandike kwenye maoni.