Мен JavaScript-ті үйрене бастағанда, ең алдымен уақытты үнемдеуге көмектесетін трюктердің тізімін жасау болды. Мен оларды басқа бағдарламашылардан, әртүрлі сайттардан және нұсқаулықтардан байқадым.
Бұл мақалада мен сізге JavaScript кодын жақсартудың және жылдамдатудың 12 тамаша әдісін көрсетемін. Көп жағдайда олар әмбебап болып табылады.
Біз еске саламыз: «Хабрдың» барлық оқырмандары үшін - «Habr» жарнамалық кодын пайдаланып кез келген Skillbox курсына жазылу кезінде 10 000 рубль көлемінде жеңілдік.
Skillbox ұсынады: Практикалық курс .
Бірегей мәндерді сүзу
МАССИПТЕР
Set нысан түрі ES6 жүйесінде... тарату операторымен бірге енгізілді, біз оны тек бірегей мәндерден тұратын жаңа массив жасау үшін пайдалана аламыз.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Қалыпты жағдайда бірдей операцияны орындау үшін әлдеқайда көп код қажет.
Бұл әдіс қарабайыр типтері бар массивтер үшін жұмыс істейді: анықталмаған, нөлдік, логикалық, жол және сан. Егер сіз нысандарды, функцияларды немесе қосымша массивтерді қамтитын массивпен жұмыс істеп жатсаңыз, сізге басқа тәсіл қажет болады.
Циклдердегі кэш массивінің ұзындығы
ЦИКЛДЕР
For циклдерін үйренген кезде стандартты процедураны орындайсыз:
for (let i = 0; i < array.length; i++){
console.log(i);
}Дегенмен, бұл синтаксиспен for циклі әрбір иерацияда алаптың ұзындығын қайта-қайта тексереді.
Кейде бұл пайдалы болуы мүмкін, бірақ көп жағдайда массивтің ұзындығын кэштеу тиімдірек, бұл оған бір қатынасты қажет етеді. Біз мұны i айнымалысын анықтайтын ұзындық айнымалысын анықтау арқылы жасай аламыз, мысалы:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Негізінде, жоғарыдағыдай дерлік, бірақ цикл өлшемін ұлғайту арқылы біз уақытты айтарлықтай үнемдейміз.
Қысқа тұйықталу рейтингі (Маккарти рейтингі)
ШАРТТЫ ОПЕРАТОРЛАР
Үштік оператор қарапайым (кейде қарапайым емес) шартты мәлімдемелерді жазудың жылдам және тиімді тәсілі:
x> 100? «100-ден астам»: «100-ден аз»;
x> 100? (x>200? "200-ден астам": "100-200 арасында"): "100-ден аз";
Бірақ кейде тіпті үштік оператор талап етілгеннен күрделірек болады. Біз || орнына «және» && және «немесе» пайдалана аламыз Логикалық операторлар белгілі бір өрнектерді одан да қысқаша бағалау үшін. Ол жиі «қысқа тұйықталу» немесе «қысқа тұйықталу рейтингі» деп аталады.
Бұл қалай жұмыс істейді
Екі немесе одан да көп шарттардың біреуін ғана қайтарғымыз келеді делік.
&& пайдалану бірінші жалған мәнді қайтарады. Әрбір операнд шын мәніне бағаланса, соңғы бағаланған өрнек қайтарылады.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0|| пайдалану бірінші шын мәнді қайтарады. Әрбір операнд жалған деп бағаланса, соңғы бағаланған мән қайтарылады.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullмысал 1
Айнымалының ұзындығын қайтарғымыз келеді делік, бірақ оның түрін білмейміз.
Бұл жағдайда foo дұрыс түрі екенін тексеру үшін if/else пәрменін пайдалануға болады, бірақ бұл әдіс тым ұзақ болуы мүмкін. Сондықтан, біздің «қысқа тұйықталуды» қабылдаған дұрыс.
return (foo || []).length;Егер foo айнымалысы қолайлы ұзындыққа ие болса, ол қайтарылады. Әйтпесе 0 аламыз.
мысал 2
Кірістірілген нысанға кіруде қиындықтар болды ма? Сіз нысанның немесе оның ішкі сипаттарының біреуінің бар-жоғын білмеуіңіз мүмкін және бұл мәселелерге әкелуі мүмкін.
Мысалы, біз this.state ішіндегі деректер сипатына қол жеткізгіміз келді, бірақ бағдарламамыз алу сұрауын қайтармайынша деректер анықталмайды.
Оны қай жерде қолданатынымызға байланысты this.state.data деп қоңырау шалу қолданбаның іске қосылуына кедергі келтіруі мүмкін. Мәселені шешу үшін біз оны шартты өрнекпен орап аламыз:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Жақсы нұсқа «немесе» операторын пайдалану болады.
return (this.state.data || 'Fetching Data');&& пайдалану үшін жоғарыдағы кодты өзгерте алмаймыз. "Деректерді алу" && this.state.data операторы this.state.data мәнін оның анықталмағанына немесе анықталмағанына қарамастан қайтарады.
Қосымша тізбек
Сипатты ағаш құрылымына терең қайтаруға тырысқанда, қосымша тізбекті пайдалануды ұсынуға болады. Сонымен, сұрақ белгісінің белгісі? ол нөл емес болса ғана сипатты алу үшін пайдаланылуы мүмкін.
Мысалы, this.state.data?..() алу үшін жоғарыдағы мысалды қайта өңдеуге болады. Яғни, мән бос емес болса ғана деректер қайтарылады.
Немесе күй анықталған немесе анықталмағаны маңызды болса, біз this.state?.data қайтара аламыз.
Бульдікке түрлендіру
ТҮРІН ТҮРЛЕРУ
Қалыпты логикалық шын және жалған функцияларына қоса, JavaScript барлық басқа мәндерді ақиқат немесе жалған деп санайды.
Басқаша айтылмайынша, 0, «», нөл, анықталмаған, NaN және, әрине, жалған мәндерден басқа JavaScript-тегі барлық мәндер ақиқат болып табылады. Соңғылары жалған.
Түрді логикалық түрге түрлендіретін ! операторын пайдаланып екеуінің арасында оңай ауыса аламыз.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Жолға түрлендіру
ТҮРІН ТҮРЛЕРУ
Бүтін саннан жолға жылдам түрлендіруді келесідей орындауға болады.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Бүтін санға түрлендіру
ТҮРІН ТҮРЛЕРУ
Кері түрлендіруді осылай орындаймыз.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Бұл әдісті төменде көрсетілгендей логикалық деректер түрін қалыпты сандық мәндерге түрлендіру үшін де пайдалануға болады:
console.log(+true); // Return: 1
console.log(+false); // Return: 0+ қосу операторы емес, біріктіру операторы ретінде түсіндірілетін жағдайлар болуы мүмкін. Бұған жол бермеу үшін тильделерді пайдалану керек: ~~. Бұл оператор -n-1-ге тең. Мысалы, ~15 -16-ға тең.
Бір қатарда екі тильданы пайдалану операцияны жоққа шығарады, себебі - (- - n - 1) - 1 = n + 1 - 1 = n. Басқаша айтқанда, ~-16 15-ке тең.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
Операциялар
ES7-ден бастап дәрежелер үшін стенограмма ретінде дәрежелеу операторын ** пайдалануға болады. Бұл Math.pow (2, 3) пайдаланудан әлдеқайда жылдамырақ. Бұл қарапайым болып көрінеді, бірақ бұл тармақ техникалар тізіміне енгізілген, өйткені ол барлық жерде айтылмайды.
console.log(2 ** 3); // Result: 8Оны экспоненциация үшін жиі қолданылатын ^ белгісімен шатастырмау керек. Бірақ JavaScript-те бұл XOR операторы.
ES7 алдында ** таңбашасын биттік солға жылжыту операторы << арқылы 2-базаның қуаттары үшін ғана пайдалануға болады:
Math.pow(2, n);
2 << (n - 1);
2**n;Мысалы, 2 << 3 = 16 2 ** 4 = 16-ға тең.
Бүтін санға жылжыту
ОПЕРАЦИЯЛАР / ТҮРЛЕРДІ ТҰРҒЫНДАУ
Егер қалқымалы мәнді бүтін санға түрлендіру қажет болса, Math.floor(), Math.ceil() немесе Math.round() пайдалана аласыз. Бірақ жылдамырақ әдіс бар, ол үшін біз |, яғни НЕМЕСЕ операторын қолданамыз.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Мінез-құлық | негізінен оң немесе теріс сандармен жұмыс жасайтыныңызға байланысты, сондықтан бұл әдіс сіз істеп жатқан нәрсеге сенімді болсаңыз ғана жарамды.
n | 0 ондық бөлгіштен кейін барлығын жояды, қалқымалы мәнді бүтін санға қысқартады.
~~ арқылы бірдей дөңгелектеу әсерін алуға болады. Бүтін санға мәжбүрлеп түрлендіруден кейін мән өзгеріссіз қалады.
Артқы сандарды жою
НЕМЕСЕ операторын саннан кез келген цифрлар санын жою үшін пайдалануға болады. Бұл бізге мынандай түрлерді түрлендірудің қажеті жоқ дегенді білдіреді:
let str = "1553";
Number(str.substring(0, str.length - 1));Оның орнына біз жай жазамыз:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Автоматты байланыстыру
САБАҚТАР
ES6 көрсеткі белгілерін сынып әдістерінде қолдануға болады және байланыстыру болжанады. Бұл 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>
</>
)
}
};Массивті кесу
МАССИПТЕР
Егер массивтен мәндерді алып тастау қажет болса, splice() қарағанда жылдамырақ әдістер бар.
Мысалы, бастапқы массивтің өлшемін білсеңіз, оның ұзындығы сипатын келесідей қайта анықтауға болады:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Бірақ басқа әдіс бар және жылдамырақ. Егер сіз үшін жылдамдық маңызды болса, біздің таңдауымыз:
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]Массивтің соңғы мәндерін басып шығару
МАССИПТЕР
Бұл әдіс 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]JSON кодын пішімдеу
JSON
Сіз JSON.stringify қолданып қойған болуыңыз мүмкін. Бұл сіздің JSON форматын пішімдеуге көмектесетінін білесіз бе?
stringify() әдісі екі қосымша параметрді қабылдайды: көрсетілген JSON файлын сүзу үшін пайдалануға болатын ауыстыру функциясы және бос орын мәні.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Міне, осы техникалардың барлығы пайдалы болды деп үміттенемін. Сіз қандай трюктарды білесіз? Оларды түсініктемелерде жазыңыз.
Skillbox ұсынады:
- Екі жылдық практикалық курс .
- Онлайн курс .
- Практикалық курс .
Ақпарат көзі: www.habr.com