Када сам почео да учим ЈаваСцрипт, прво што сам урадио је да направим листу трикова који су ми помогли да уштедим време. Приметио сам их код других програмера, на различитим сајтовима и у приручницима.
У овом чланку ћу вам показати 12 сјајних начина да побољшате и убрзате свој ЈаваСцрипт код. У већини случајева они су универзални.
Подсећамо: за све читаоце „Хабра“ – попуст од 10 рубаља при упису на било који курс Скиллбок користећи промотивни код „Хабр“.
Скиллбок препоручује: Практични курс .
Филтрирање јединствених вредности
НИЗОВИ
Тип објекта Сет је уведен у ЕС6, заједно са..., оператором ширења, можемо га користити за креирање новог низа који садржи само јединствене вредности.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]У нормалној ситуацији, потребно је много више кода да би се извршила иста операција.
Ова техника ради за низове који садрже примитивне типове: недефинисани, нулл, логички, стринг и број. Ако радите са низом који садржи објекте, функције или додатне низове, биће вам потребан другачији приступ.
Дужина кеш низа у циклусима
ЦИЦЛЕС
Када научите фор петље, следите стандардну процедуру:
for (let i = 0; i < array.length; i++){
console.log(i);
}Међутим, са овом синтаксом, фор петља више пута проверава дужину низа сваке итерације.
Понекад ово може бити корисно, али у већини случајева је ефикасније кеширати дужину низа, што ће захтевати један приступ њему. То можемо урадити тако што ћемо дефинисати променљиву дужине где дефинишемо променљиву и, овако:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}У принципу, скоро исто као горе, али повећањем величине петље добићемо значајну уштеду времена.
Оцена кратког споја (МцЦартхи оцена)
УСЛОВИ ОПЕРАТОРИ
Тернарни оператор је брз и ефикасан начин за писање једноставних (а понекад и не тако једноставних) условних изјава:
к> 100? „више од 100”: „мање од 100”;
к> 100? (к>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: nullprimer КСНУМКС
Рецимо да желимо да вратимо дужину променљиве, али не знамо њен тип.
У овом случају, можете користити иф/елсе да проверите да ли је фоо прави тип, али овај метод може бити предугачак. Зато је боље узети наш „кратки спој“.
return (foo || []).length;Ако променљива фоо има одговарајућу дужину, онда ће то бити враћено. Иначе ћемо добити 0.
primer КСНУМКС
Да ли сте имали проблема са приступом угнежђеном објекту? Можда не знате да ли постоји објекат или једно од његових подсвојстава, а то може довести до проблема.
На пример, желели смо да приступимо својству података у тхис.стате, али подаци нису дефинисани док наш програм не врати захтев за преузимање.
У зависности од тога где га користимо, позивање тхис.стате.дата може спречити покретање апликације. Да бисмо решили проблем, могли бисмо ово умотати у условни израз:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Боља опција би била да користите оператор "или".
return (this.state.data || 'Fetching Data');Не можемо да променимо код изнад да користи &&. Оператор 'Дохваћање података' && тхис.стате.дата ће вратити тхис.стате.дата без обзира да ли је недефинисан или не.
Опциони ланац
Могло би се предложити коришћење опционог уланчавања када покушавате да вратите својство дубоко у структуру дрвета. Дакле, симбол знака питања? може се користити за преузимање својства само ако није нулл.
На пример, могли бисмо да рефакторишемо горњи пример да добијемо тхис.стате.дата?..(). То јест, подаци се враћају само ако вредност није нула.
Или, ако је важно да ли је стање дефинисано или не, можемо да вратимо тхис.стате?.дата.
Претвори у Боолеан
КОНВЕРЗИЈА ТИПА
Поред нормалних логичких функција труе и фалсе, ЈаваСцрипт такође третира све друге вредности као истините или нетачне.
Док није другачије назначено, све вредности у ЈаваСцрипт-у су истините, осим 0, "", нулл, недефинисано, НаН и, наравно, нетачно. Потоњи су лажни.
Можемо лако да прелазимо између њих помоћу оператора !, који такође конвертује тип у боолеан.
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Могу постојати ситуације у којима ће се + тумачити као оператор конкатенације, а не као оператор сабирања. Да бисте ово избегли, требало би да користите тилде: ~~. Овај оператор је еквивалентан -н-1. На пример, ~15 је једнако -16.
Коришћење две тилде у низу негира операцију јер - (- - н - 1) - 1 = н + 1 - 1 = н. Другим речима, ~-16 је једнако 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
ОПЕРАЦИЈЕ
Почевши од ЕС7, можете користити оператор експоненцијације ** као скраћеницу за степене. Ово је много брже од коришћења Матх.пов(2, 3). Чини се једноставно, али ова тачка је укључена у листу техника, јер се не помиње свуда.
console.log(2 ** 3); // Result: 8Не треба га мешати са симболом ^, који се обично користи за експоненцијацију. Али у ЈаваСцрипт-у ово је КСОР оператор.
Пре ЕС7, ** пречица је могла да се користи само за моћи базе 2 помоћу оператора померања улево у битовима <<:
Math.pow(2, n);
2 << (n - 1);
2**n;На пример, 2 << 3 = 16 је еквивалентно 2 ** 4 = 16.
Флоат до цео број
ОПЕРАЦИЈЕ / КОНВЕРЗИЈА ТИПА
Ако треба да конвертујете флоат у цео број, можете користити Матх.флоор(), Матх.цеил() или Матх.роунд(). Али постоји бржи начин, за ово користимо |, односно оператор ОР.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Бехавиор | у великој мери зависи од тога да ли имате посла са позитивним или негативним бројевима, тако да је овај метод прикладан само ако сте сигурни у оно што радите.
н | 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Аутоматско повезивање
ЧАСОВИ
ЕС6 ознаке стрелица се могу користити у методама класа, а везивање се подразумева. То значи да се можете опростити од израза који се понављају као што је тхис.миМетход = тхис.миМетход.бинд(тхис)!
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>
</>
)
}
};Подрезивање низа
НИЗОВИ
Ако треба да скинете вредности из низа, постоје бржи методи од сплице().
На пример, ако знате величину оригиналног низа, можете заменити његову дужину на следећи начин:
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]Штампање последње вредности(е) низа
НИЗОВИ
Ова техника захтева употребу методе слице().
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]Форматирање ЈСОН кода
ЈСОН
Можда сте већ користили ЈСОН.стрингифи. Да ли сте знали да помаже у форматирању вашег ЈСОН-а?
Метода стрингифи() узима два опциона параметра: функцију замене која се може користити за филтрирање приказаног ЈСОН-а и вредност простора.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'То је све, надам се да су све ове технике биле корисне. Које трикове знаш? Напишите их у коментарима.
Скиллбок препоручује:
- Двогодишњи практични курс .
- Онлајн курс .
- Практична година курса .
Извор: ввв.хабр.цом