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".
Skillbox inapendekeza: Kozi ya vitendo .
Inachuja thamani za kipekee
SAFU
Aina ya kitu cha Set ilianzishwa katika ES6, pamoja na..., kiendeshaji cha kuenea, tunaweza kuitumia kuunda safu mpya ambayo ina thamani za kipekee pekee.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]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: 0Kwa 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: nullmfano 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:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Chaguo bora itakuwa kutumia opereta "au".
return (this.state.data || 'Fetching Data');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.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Badilisha kuwa kamba
UONGOFU WA AINA
Ugeuzaji wa haraka kutoka nambari kamili hadi mfuatano unaweza kufanywa kama ifuatavyo.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Badilisha hadi nambari kamili
UONGOFU WA AINA
Tunafanya mabadiliko ya kinyume kama hii.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Njia hii pia inaweza kutumika kubadilisha aina ya data ya boolean kuwa nambari za kawaida za nambari, kama inavyoonyeshwa hapa chini:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Kunaweza 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.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
UENDESHAJI
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: 8Haipaswi 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.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Tabia | inategemea sana ikiwa unashughulika na nambari chanya au hasi, kwa hivyo njia hii inafaa tu ikiwa unajiamini katika kile unachofanya.
n | 0 huondoa kila kitu baada ya kitenganishi cha desimali, ikipunguza kuelea hadi nambari kamili.
Unaweza kupata athari sawa ya kuzunguka kwa kutumia ~~. Baada ya ubadilishaji wa kulazimishwa hadi nambari kamili, thamani hubakia bila kubadilika.
Inaondoa nambari zinazofuata
Opereta AU inaweza kutumika kuondoa nambari yoyote ya nambari kutoka kwa nambari. Hii inamaanisha kuwa hatuitaji kubadilisha aina kama hapa:
let str = "1553";
Number(str.substring(0, str.length - 1));Badala yake tunaandika tu:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Kuunganisha otomatiki
MADARASA
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)!
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>
</>
)
}
};Kupunguza safu
SAFU
Ikiwa unahitaji kuondoa maadili kutoka kwa safu, kuna njia za haraka kuliko splice().
Kwa mfano, ikiwa unajua saizi ya safu asili, unaweza kubatilisha sifa yake ya urefu kama ifuatavyo:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Lakini kuna njia nyingine, na ya haraka zaidi. Ikiwa kasi ndio muhimu kwako, hapa kuna chaguzi zetu:
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]Kuchapisha thamani ya mwisho ya safu
SAFU
Mbinu hii inahitaji matumizi ya kipande() njia.
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]Inaumbiza msimbo wa JSON
JSON
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.
Skillbox inapendekeza:
- Kozi ya vitendo ya miaka miwili .
- Kozi ya mkondoni .
- Kozi ya mwaka wa vitendo .
Chanzo: mapenzi.com
