Калі я пачаў вывучаць JavaScript, то перш за ўсё склаў спіс прыёмаў, якія дапамагалі мне эканоміць час. Я падгледзеў іх у іншых праграмістаў, на розных сайтах і ў мануалах.
У гэтым артыкуле я пакажу 12 выдатных спосабаў палепшыць і паскорыць свой JavaScript-код. У большасці выпадкаў яны ўніверсальныя.
Нагадваем: для ўсіх чытачоў "Хабра" - зніжка 10 000 рублёў пры запісе на любы курс Skillbox па промакодзе "Хабр".
Skillbox рэкамендуе: Практычны курс .
Фільтраванне ўнікальных значэнняў
МАСІВЫ
Тып аб'екта Set быў уведзены ў ES6, разам з …, spread-аператарам, мы можам выкарыстоўваць яго для стварэння новага масіва, у якім змяшчаюцца толькі унікальныя значэння.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]У звычайнай сітуацыі для выканання той жа аперацыі трэба значна больш кода.
Гэты прыём працуе для масіваў, якія змяшчаюць прымітыўныя тыпы: undefined, null, boolean, string і number. Калі вы працуеце з масівам, які змяшчае аб'екты, функцыі або дадатковыя масівы, вам спатрэбіцца іншы падыход.
Даўжыня кэш-масіва ў цыклах
ЦЫКЛЫ
Калі вы вывучаеце 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);
}У прынцыпе, амаль тое ж самае, што і вышэй, але пры павелічэнні памеру цыклу мы атрымаем значную эканомію часу.
Ацэнка кароткага замыкання (ацэнка Макарці)
УМОВНЫЯ АПЕРАТАРЫ
Тэрнарны аператар - хуткі і эфектыўны спосаб напісаць простыя (а часам і не вельмі простыя) conditional statements:
х> 100? "больш за 100": "менш за 100";
х> 100? (x> 200? "больш за 200": "паміж 100-200"): "менш за 100";
Але часам нават тэрнарны аператар больш складаны, чым патрабуецца. Замест яго мы можам выкарыстоўваць 'and' && і 'or' || лагічныя аператары для адзнакі некаторых выразаў яшчэ больш кароткім спосабам. Яго часта называюць "кароткім замыканнем" або "ацэнкай кароткага замыкання".
Як гэта працуе
Скажам, мы жадаем вярнуць толькі адна з двух або больш умоў.
Выкарыстанне && верне першае значэнне. Калі кожны аперанд ацэньваецца як true, то будзе вернуты апошні вылічаны выраз.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Выкарыстанне || дазволіць вярнуць першае true значэнне. Калі кожны аперанд ацэньваецца як false, то будзе вернута апошняе вылічанае значэнне.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullПрыклад 1
Скажам, мы жадаем вярнуць length зменнай, але не ведаем яе тып.
У гэтым выпадку можна выкарыстоўваць if/else для праверкі таго, што foo - падыходны тып, але гэты спосаб можа апынуцца занадта доўгім. Таму лепш возьмем нашае «кароткае замыканне».
return (foo || []).length;Калі зменная foo мае прыдатную length, то яна і будзе вернутая. У адваротным выпадку мы атрымаем 0.
Прыклад 2
Ці былі ў вас праблемы з доступам да ўкладзенага аб'екта? Вы можаце не ведаць, ці існуе аб'ект або адно з яго падуласцівасцяў, і гэта можа прывесці да праблем.
Напрыклад, мы хацелі атрымаць доступ да якасці data ў this.state, але data не вызначана, пакуль наша праграма не верне запыт на выбарку.
У залежнасці ад таго, дзе мы яго выкарыстоўваем, выклік this.state.data можа перашкодзіць запуску дадатку. Каб вырашыць праблему, мы маглі б абгарнуць гэта ва ўмоўнае выраз:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Больш прыдатным варыянтам будзе выкарыстанне аператара "or".
return (this.state.data || 'Fetching Data');Мы не можам змяніць код вышэй, каб выкарыстоўваць &&. Аператар "Fetching Data" && this.state.data верне this.state.data незалежна ад таго, з'яўляецца ён undefined ці не.
Апцыянальны ланцужок
Можна прапанаваць выкарыстоўваць апцыянальны ланцужок пры спробе вярнуць уласцівасць глыбока ў дрэвападобную структуру. Так, сімвал знака пытання? можа выкарыстоўвацца для вымання ўласцівасці, толькі калі яно не роўна нулю (null).
Напрыклад, мы маглі б выканаць рэфактарынг прыкладу вышэй, атрымаўшы this.state.data?.. (). Гэта значыць data вяртаецца толькі ў тым выпадку, калі значэнне не null.
Ці, калі важна, ці вызначана state ці не, мы маглі б вярнуць this.state?.data.
Пераўтварэнне ў Boolean
ПЕРАТВОРЕННЕ ТЫПОЎ
Акрамя звычайных лагічных функцый true і false, JavaScript таксама разглядае ўсе іншыя значэнні як truthy ці falsy.
Пакуль не паказана іншае, усе значэнні ў JavaScript - truthy, за выключэннем 0, "", null, undefined, NaN і, вядома, false. Апошнія зьяўляюцца falsy.
Мы можам лёгка пераключацца паміж тымі і іншымі, выкарыстоўваючы аператар!, Які таксама пераўтворыць тып у лагічны.
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"Гэты спосаб можа быць выкарыстаны і для пераўтварэння лагічнага тыпу дадзеных boolean у звычайныя лікавыя значэнні, як паказана ніжэй:
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.
Float у цэлы лік
АПЕРАЦЫІ / ПЕРАТВОРЕННЕ ТЫПОЎ
Пры неабходнасці пераўтварыць float у цэлы лік можна скарыстацца Math.floor(), Math.ceil() ці Math.round(). Але ёсць і хутчэйшы шлях, для гэтага выкарыстоўваем |, гэта значыць аператар OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Паводзіны | у значнай ступені залежыць ад таго, ці маеце вы справу са станоўчымі ці адмоўнымі лікамі, таму гэты спосаб падыходзіць толькі ў тым выпадку, калі вы ўпэўненыя ў тым, што робіце.
n | 0 выдаляе ўсё, што ідзе пасля дзесятковага падзельніка, усякаючы лік з якая плавае кропкай да цэлага ліку.
Вы можаце атрымаць той жа эфект акруглення, выкарыстоўваючы ~~. Пасля прымусовага пераўтварэння ў цэлы лік значэнне застаецца нязменным.
Прыбіраны замыкальныя лікі
Аператар OR можна выкарыстоўваць для таго, каб прыбраць любую колькасць лічбаў з ліку. Гэта азначае, што нам не трэба пераўтвараць тыпы, як тут:
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().
Напрыклад, калі вы ведаеце памер арыгінальнага масіва, то можаце перавызначыць яго ўласцівасць length наступным чынам:
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 () прымае два неабавязковыя параметры: функцыю replacer, якую можна выкарыстоўваць для фільтрацыі які адлюстроўваецца JSON, і значэнне space.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Вось і ўсё, спадзяюся, што ўсе паказаныя прыёмы былі карысныя. А якія хітрасці ведаеце вы? Напішыце іх у каментарах.
Skillbox рэкамендуе:
- Двухгадовы практычны курс .
- Анлайн-курс .
- Практычны гадавы курс .
Крыніца: habr.com