Мен 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?..() алуу үчүн жогорудагы мисалды рефакторация кылсак болот. Башкача айтканда, маалыматтар мааниси нөл эмес болсо гана кайтарылат.
Же, эгерде абалдын аныкталганы же аныкталбаганы маанилүү болсо, биз бул.мамлекет?.маалыматты кайтара алабыз.
Буль тилине айландыруу
ТИП КОНВЕРСИЯСЫ
Кадимки логикалык чыныгы жана жалган функцияларынан тышкары, JavaScript башка бардык баалуулуктарды чындык же жалган деп эсептейт.
Башкасы көрсөтүлмөйүнчө, 0, "", null, аныкталбаган, 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: -23Behavior | Оң же терс сандар менен иштешип жатканыңыздан көз каранды, ошондуктан бул ыкма сиз эмне кылып жатканыңызга ишенсеңиз гана ылайыктуу.
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 сунуштайт:
- Эки жылдык практикалык курс .
- Онлайн курс .
- Практикалык жылдык курс .
Source: www.habr.com