12 جاوا اسڪرپٽ ترڪيبون جيڪي گھڻا سبق ياد ڪن ٿيون

جڏهن مون جاوا اسڪرپٽ سکڻ شروع ڪيو، ته پهريون ڪم جيڪو مون ڪيو اهو هو چالن جي هڪ فهرست ٺاهيو جنهن مون کي وقت بچائڻ ۾ مدد ڪئي. مون انهن کي ٻين پروگرامرز کان، مختلف سائيٽن تي ۽ دستيابن ۾ ڏٺو.

هن آرٽيڪل ۾، مان توهان کي ڏيکاريندس 12 بهترين طريقا توهان جي جاوا اسڪرپٽ ڪوڊ کي بهتر ۽ تيز ڪرڻ لاء. اڪثر ڪيسن ۾ اهي آفاقي آهن.

اسان توهان کي ياد ڏياريون ٿا: "Habr" جي سڀني پڙهندڙن لاءِ - 10 روبل جي رعايت جڏهن "Habr" پروموشنل ڪوڊ استعمال ڪندي ڪنهن به اسڪل باڪس ڪورس ۾ داخلا.

Skillbox سفارش ڪري ٿو: عملي ڪورس "موبائل ڊولپر پرو".

منفرد قدرن کي فلٽر ڪرڻ

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

اصولي طور تي، لڳ ڀڳ ساڳئي طرح مٿي، پر لوپ جي سائيز کي وڌائڻ سان اسان کي وقت جي وڏي بچت ملندي.

مختصر سرڪٽ جي درجه بندي (McCarthy جي درجه بندي)

مشروط آپريٽرز

ٽرنري آپريٽر سادو لکڻ جو هڪ تيز ۽ ڪارائتو طريقو آهي (۽ ڪڏهن ڪڏهن ايترو سادو ناهي) مشروط بيان:

x> 100؟ "100 کان وڌيڪ": "100 کان گهٽ"؛
x> 100؟ (x> 200؟ "200 کان وڌيڪ": "100-200 جي وچ ۾"): "100 کان گهٽ"؛

پر ڪڏهن ڪڏهن ٽيرنري آپريٽر به ضرورت کان وڌيڪ پيچيده هوندو آهي. اسان استعمال ڪري سگھون ٿا '۽' ۽ ۽ 'يا' بدران Boolean آپريٽرز ڪجهه اظهارن جو جائزو وٺڻ لاءِ اڃا به وڌيڪ جامع انداز ۾. اهو اڪثر ڪري سڏيو ويندو آهي "شارٽ سرڪٽ" يا "شارٽ سرڪٽ جي درجه بندي".

ڪيئن هن ڪم ڪندو

اچو ته چئو ته اسان صرف ٻه يا وڌيڪ شرطن مان هڪ موٽڻ چاهيون ٿا.

استعمال ڪندي && پھريون غلط قدر واپس ڪندو. جيڪڏھن ھر عمل درست ڪري ٿو، ته پوءِ آخري اظهار جو جائزو ورتو ويندو.

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

ڇا توھان کي ھڪڙي گھربل اعتراض تائين پھچڻ ۾ مسئلو آھي؟ توهان کي خبر ناهي ته ڇا هڪ اعتراض يا ان جي ذيلي ملڪيت مان هڪ موجود آهي، ۽ اهو مسئلو ٿي سگهي ٿو.

مثال طور، اسان چاهيون ٿا ته ڊيٽا جي ملڪيت تائين پهچون هن.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 قطع نظر ان جي وضاحت ٿيل آهي يا نه.

اختياري زنجير

ھڪڙو ھڪڙو اختياري زنجير استعمال ڪرڻ جي صلاح ڪري سگھي ٿو جڏھن ھڪڙي ملڪيت کي واپس ڪرڻ جي ڪوشش ڪري ھڪڙي وڻ جي جوڙجڪ ۾. پوء، سوال جي نشان جي علامت؟ ھڪڙي ملڪيت کي حاصل ڪرڻ لاء استعمال ڪري سگھجي ٿو صرف ان صورت ۾ جيڪڏھن اھو null نه آھي.

مثال طور، اسان هن.state.data؟...() حاصل ڪرڻ لاءِ مٿي ڏنل مثال کي ريفيڪٽر ڪري سگهون ٿا. اھو آھي، ڊيٽا صرف واپسي آھي جيڪڏھن قدر ناھي.

يا، جيڪڏهن اهو معاملو آهي ته رياست جي وضاحت ڪئي وئي آهي يا نه، اسان واپس ڪري سگهون ٿا هي. رياست؟. ڊيٽا.

۾ تبديل ڪريو Boolean

ٽائپ ڪنورشن

عام بولين ڪمن کان علاوه صحيح ۽ غلط، جاوا اسڪرپٽ پڻ ٻين سڀني قدرن کي سچائي يا غلط طور تي سمجهي ٿو.

جيستائين ٻي صورت ۾ نوٽ ڪيو وڃي، جاوا اسڪرپٽ ۾ سڀئي قدر سچا آهن، سواء 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

اتي حالتون ٿي سگھن ٿيون جتي + کي اضافي آپريٽر جي بجاءِ ڪنٽينشن آپريٽر جي طور تي تعبير ڪيو ويندو. هن کان بچڻ لاء، توهان کي استعمال ڪرڻ گهرجي tildes: ~~. هي آپريٽر -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 ۾ شروع ٿي، توھان استعمال ڪري سگھو ٿا Exponentiation operator ** کي طاقتن لاءِ شارٽ ھينڊ طور. اهو Math.pow (2, 3) استعمال ڪرڻ کان گهڻو تيز آهي. اهو سادو لڳي ٿو، پر هي نقطو ٽيڪنالاجي جي فهرست ۾ شامل آهي، ڇاڪاڻ ته اهو هر هنڌ ذڪر نه ڪيو ويو آهي.

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

ان کي ^ سمبل سان گڏ نه هجڻ گهرجي، جيڪو عام طور تي وضاحت لاءِ استعمال ٿيندو آهي. پر JavaScript ۾ هي XOR آپريٽر آهي.

ES7 کان اڳ، ** شارٽ ڪٽ صرف bitwise کاٻي شفٽ آپريٽر استعمال ڪندي بنيادي 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 decimal separator کان پوءِ سڀڪنھن شيءِ کي ھٽائي ٿو، فلوٽ کي انٽيجر ڏانھن ڇڪي ٿو.

توھان ~~ استعمال ڪندي ساڳيو گول اثر حاصل ڪري سگھو ٿا. انٽيجر ۾ زبردستي تبديل ٿيڻ کان پوء، قدر اڻڄاتل رهي ٿو.

پٺتي پيل انگن کي هٽائڻ

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 کان".
• عملي سال ڪورس "PHP ڊولپر 0 کان PRO تائين".

جو ذريعو: www.habr.com