Вақте ки ман ба омӯзиши JavaScript шурӯъ кардам, аввалин коре, ки ман кардам, тартиб додани рӯйхати ҳилаҳо буд, ки ба ман вақтро сарфа карданд. Ман онҳоро аз барномасозони дигар, дар сайтҳои гуногун ва дар дастурҳо мушоҳида кардам.
Дар ин мақола, ман ба шумо 12 роҳи олии такмил ва суръат бахшидан ба коди JavaScript-и худро нишон медиҳам. Дар аксари ҳолатҳо, онҳо универсалӣ мебошанд.
Мо ба шумо хотиррасон мекунем: барои ҳамаи хонандагони "Habr" - тахфифи 10 000 рубл ҳангоми номнавис шудан ба курсҳои Skillbox бо истифода аз рамзи таблиғотии "Habr".
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 (let i = 0; i < array.length; i++){
console.log(i);
}Аммо, бо ин синтаксис, давра барои ҳар як такрор дарозии массивро такроран тафтиш мекунад.
Баъзан ин метавонад муфид бошад, аммо дар аксари ҳолатҳо кэш кардани дарозии массив самараноктар аст, ки як дастрасиро ба он талаб мекунад. Мо метавонем инро тавассути муайян кардани тағирёбандаи дарозӣ иҷро кунем, ки дар он тағирёбандаи i-ро муайян мекунем, ба монанди:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Аслан, тақрибан ҳамон тавре ки дар боло зикр шудааст, аммо бо зиёд кардани андозаи ҳалқа мо сарфаи вақти назаррасро ба даст меорем.
Рейтинги ноқилҳои кӯтоҳ (рейтинги McCarthy)
ОПЕРАТОРОНИ ШАРТИ
Оператори сегона роҳи зуд ва муассири навиштани изҳороти шартӣ (ва баъзан на он қадар оддӣ) мебошад:
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
Фарз мекунем, ки мо мехоҳем дарозии тағирёбандаро баргардонем, аммо навъи онро намедонем.
Дар ин ҳолат, шумо метавонед if/else -ро истифода бурда, санҷед, ки foo навъи дуруст аст, аммо ин усул метавонад хеле дароз бошад. Аз ин рӯ, беҳтар аст, ки «расиши кӯтоҳ»-и моро гирем.
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?..()-ро ба даст орем. Яъне, маълумот танҳо дар сурате баргардонида мешавад, ки қимат сифр набошад.
Ё, агар муҳим бошад, ки оё давлат муайян шудааст ё не, мо метавонем ин.state?.data-ро баргардонем.
Табдил додан ба булӣ
КОНВЕРСИЯИ НАВИ
Илова бар функсияҳои оддии логикии ҳақиқӣ ва нодуруст, JavaScript инчунин ҳамаи арзишҳои дигарро ҳамчун ҳақиқат ё бардурӯғ баррасӣ мекунад.
То он даме, ки тартиби дигаре қайд карда нашавад, ҳама арзишҳо дар JavaScript дурустанд, ба истиснои 0, "", нул, номуайян, NaN ва, албатта, бардурӯғ. Охиринҳо дурӯғанд.
Мо метавонем бо истифода аз оператори ! байни ин ду ба осонӣ гузарем, ки он низ навъи онро ба логикӣ табдил медиҳад.
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"<Қудратҳои зуд
АМАЛИЁТХО
Аз 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() -ро истифода баред. Аммо роҳи тезтар вуҷуд дорад, барои ин мо |, яъне оператори OR-ро истифода мебарем.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23рафтор | асосан аз он вобаста аст, ки оё шумо бо рақамҳои мусбат ё манфӣ сарукор доред, бинобар ин, ин усул танҳо мувофиқ аст, агар шумо ба коре, ки мекунед, боварӣ дошта бошед.
н | 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() усулҳои тезтар мавҷуданд.
Масалан, агар шумо андозаи массиви аслиро донед, шумо метавонед хосияти дарозии онро ба таври зерин иваз кунед:
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 тавсия медиҳад:
- Курси дусолаи амалй .
- Курси онлайн .
- Курси солонаи амалӣ .
Манбаъ: will.com