12 د جاواسکریپټ چلونه چې ډیری ښوونې یې له لاسه ورکوي

کله چې ما د جاوا سکریپټ زده کړه پیل کړه، لومړی کار چې ما وکړ هغه د چلونو لیست جوړ کړ چې زما سره یې د وخت خوندي کولو کې مرسته وکړه. ما دوی د نورو پروګرام کونکو څخه ولیدل، په مختلفو سایټونو او لارښودونو کې.

پدې مقاله کې ، زه به تاسو ته ستاسو د جاواسکریپټ کوډ ښه کولو او ګړندي کولو لپاره 12 عالي لارې وښیم. په ډیری قضیو کې دوی نړیوال دي.

موږ یادونه کوو: د ټولو هابر لوستونکو لپاره - د 10 روبل تخفیف کله چې د هابر پرومو کوډ په کارولو سره د مهارت بکس کوم کورس کې نوم لیکنه وکړئ.

Skillbox وړاندیز کوي: عملي کورس "د ګرځنده پرمخ وړونکي PRO".

د ځانګړو ارزښتونو فلټر کول

ARRAYS

د سیټ څیز ډول په 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);
}

په اصل کې، تقریبا د پورته په څیر ورته، مګر د لوپ اندازې په زیاتولو سره به موږ د پام وړ وخت سپما ترلاسه کړو.

د لنډ سرکټ درجه بندي (د مک کارتي درجه بندي)

مشروط چلونکي

ټرینري آپریټر د ساده (او ځینې وختونه دومره ساده ندي) شرطي بیانونو لیکلو لپاره ګړندۍ او مؤثره لاره ده:

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 سم ډول دی، مګر دا طریقه ممکن ډیره اوږده وي. له همدې امله، دا غوره ده چې زموږ "شارټ سرکټ" واخلئ.

return (foo || []).length;

که متغیر foo مناسب اوږدوالی ولري، نو دا به بیرته راشي. که نه نو موږ به 0 ترلاسه کړو.

د مثال په 2

ایا تاسو د ځړول شوي څیز ته لاسرسي کې ستونزې لرئ؟ تاسو ممکن نه پوهیږئ چې یو شی یا د هغې فرعي ملکیتونه شتون لري، او دا کولی شي ستونزې رامینځته کړي.

د مثال په توګه، موږ غوښتل چې په دې ریاست کې د ډاټا ملکیت ته لاسرسۍ ولرو، مګر ډاټا تر هغه وخته پورې نه ټاکل کیږي چې زموږ برنامه د راوړلو غوښتنه بیرته راولي.

په دې پورې اړه لري چې موږ یې چیرته کاروو، د دې.state.data زنګ وهل ممکن د غوښتنلیک د پیل کیدو مخه ونیسي. د ستونزې د حل لپاره، موږ کولی شو دا په مشروط بیان کې وتړو:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

یو غوره اختیار به د "یا" آپریټر کارولو لپاره وي.

return (this.state.data || 'Fetching Data');

موږ نشو کولی پورته کوډ د کارولو لپاره بدل کړو &&. د معلوماتو ترلاسه کول && this.state.data آپریټر به دا.state.data بیرته راستانه کړي پرته لدې چې دا نا تعریف شوي وي یا نه.

اختیاري سلسله

یو څوک ممکن د اختیاري زنځیر کارولو وړاندیز وکړي کله چې د ونې جوړښت ته ژور ملکیت بیرته راستنولو هڅه وکړي. نو، د پوښتنې نښه نښه؟ یوازې د ملکیت بیرته ترلاسه کولو لپاره کارول کیدی شي که چیرې دا باطل نه وي.

د مثال په توګه، موږ کولی شو د دې.state.data ترلاسه کولو لپاره پورته مثال بیاکتنه وکړو؟...(). دا دی، ډاټا یوازې هغه وخت بیرته راستانه کیږي کله چې ارزښت ناپاک نه وي.

یا، که دا مهمه وي چې آیا دولت تعریف شوی یا نه، موږ کولی شو دا ریاست بیرته راستانه کړو.

په بولین بدل کړئ

د تبادلې ډول

د نورمال بولین دندو سربیره ریښتیني او غلط ، جاواسکریپټ نور ټول ارزښتونه د ریښتیني یا غلط په توګه چلند کوي.

تر هغه چې بل ډول یادونه شوې نه وي، په جاواسکریپټ کې ټول ارزښتونه ریښتیا دي، پرته له 0، ""، null، undefined، 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"

<Quick Powers

عملیات

په ES7 کې پیل کول، تاسو کولی شئ د توضیح کولو آپریټر ** د واکونو لپاره د لنډیز په توګه وکاروئ. دا د Math.pow (2, 3) کارولو په پرتله خورا ګړندی دی. دا ساده ښکاري، مګر دا ټکی د تخنیکونو په لیست کې شامل دی، ځکه چې دا په هر ځای کې نه ویل کیږي.

console.log(2 ** 3); // Result: 8

دا باید د ^ سمبول سره مغشوش نشي، کوم چې معمولا د توضیح کولو لپاره کارول کیږي. مګر په جاواسکریپټ کې دا د 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

چلند | په لویه کچه پدې پورې اړه لري چې ایا تاسو د مثبت یا منفي شمیرو سره معامله کوئ، نو دا طریقه یوازې هغه وخت مناسبه ده چې تاسو په هغه څه باوري یاست چې تاسو یې کوئ.

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(دا)!

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>
      </>
    )
  }
};

سرې تراشل

ARRAYS

که تاسو اړتیا لرئ له یو صف څخه ارزښتونه لرې کړئ، د 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]

د یو سري وروستی ارزښت چاپ کول

ARRAYS
دا تخنیک د 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 وړاندیز کوي:

• دوه کلن عملي کورس "زه د پرو ویب جوړونکی یم".
• آنلاین کورس "له 0 څخه C# پراختیا کونکی".
• یو کلن عملي کورس "د پی ایچ پی جوړونکی له 0 څخه تر پرو".

سرچینه: www.habr.com