جب میں نے JavaScript سیکھنا شروع کیا تو سب سے پہلے میں نے ان چالوں کی فہرست بنائی جس سے مجھے وقت بچانے میں مدد ملی۔ میں نے انہیں دوسرے پروگرامرز سے، مختلف سائٹوں پر اور دستورالعمل میں دیکھا۔
اس مضمون میں، میں آپ کو اپنے JavaScript کوڈ کو بہتر اور تیز کرنے کے 12 بہترین طریقے دکھاؤں گا۔ زیادہ تر معاملات میں وہ عالمگیر ہیں۔
ہم آپ کو یاد دلاتے ہیں: "Habr" کے تمام قارئین کے لیے - "Habr" پروموشنل کوڈ کا استعمال کرتے ہوئے کسی بھی Skillbox کورس میں داخلہ لینے پر 10 rubles کی رعایت۔
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]ایک عام صورت حال میں، اسی آپریشن کو انجام دینے کے لیے بہت زیادہ کوڈ کی ضرورت ہوتی ہے۔
یہ تکنیک ان صفوں کے لیے کام کرتی ہے جن میں پرائمیٹو اقسام ہیں: غیر متعینہ، null، بولین، سٹرنگ اور نمبر۔ اگر آپ کسی ایسی صف کے ساتھ کام کر رہے ہیں جس میں اشیاء، فنکشنز، یا اضافی صفیں شامل ہوں، تو آپ کو ایک مختلف طریقہ کی ضرورت ہوگی۔
چکروں میں کیشے سرنی کی لمبائی
سائیکل
جب آپ لوپس سیکھتے ہیں، تو آپ معیاری طریقہ کار پر عمل کرتے ہیں:
for (let i = 0; i < array.length; i++){
console.log(i);
}تاہم، اس نحو کے ساتھ، for loop بار بار ہر تکرار کی صف کی لمبائی کو چیک کرتا ہے۔
بعض اوقات یہ کارآمد ثابت ہوسکتا ہے، لیکن زیادہ تر صورتوں میں صف کی لمبائی کو کیش کرنا زیادہ کارآمد ہوتا ہے، جس کے لیے اس تک رسائی کی ضرورت ہوگی۔ ہم لمبائی کے متغیر کی وضاحت کرکے ایسا کرسکتے ہیں جہاں ہم متغیر 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
ہم کہتے ہیں کہ ہم ایک متغیر کی لمبائی واپس کرنا چاہتے ہیں، لیکن ہم اس کی قسم نہیں جانتے۔
اس صورت میں، آپ 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');&& کو استعمال کرنے کے لیے ہم اوپر کا کوڈ تبدیل نہیں کر سکتے۔ 'Fetching Data' && this.state.data آپریٹر this.state.data واپس کرے گا قطع نظر اس کے کہ یہ غیر متعینہ ہے یا نہیں۔
اختیاری سلسلہ
جب کسی پراپرٹی کو درخت کے ڈھانچے میں گہرائی میں واپس کرنے کی کوشش کی جائے تو کوئی اختیاری زنجیر استعمال کرنے کا مشورہ دے سکتا ہے۔ تو، سوالیہ نشان کی علامت؟ کسی پراپرٹی کو صرف اس صورت میں بازیافت کرنے کے لیے استعمال کیا جا سکتا ہے جب یہ کالعدم نہ ہو۔
مثال کے طور پر، ہم this.state.data؟...() حاصل کرنے کے لیے اوپر کی مثال کو ری ایکٹر کر سکتے ہیں۔ یعنی ڈیٹا صرف اس صورت میں واپس کیا جاتا ہے جب ویلیو null نہ ہو۔
یا، اگر اس سے فرق پڑتا ہے کہ ریاست کی تعریف کی گئی ہے یا نہیں، تو ہم یہ اسٹیٹ؟ ڈیٹا واپس کر سکتے ہیں۔
بولین میں تبدیل کریں۔
ٹائپ کنورژن
عام بولین فنکشنز سچ اور غلط کے علاوہ، جاوا اسکرپٹ دیگر تمام اقدار کو بھی سچ یا غلط سمجھتا ہے۔
جب تک کہ دوسری صورت میں نوٹ نہ کیا جائے، جاوا اسکرپٹ میں تمام اقدار سچی ہیں، سوائے 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اسے ^ علامت کے ساتھ الجھن میں نہیں ڈالنا چاہئے، جو عام طور پر وضاحت کے لیے استعمال ہوتا ہے۔ لیکن جاوا اسکرپٹ میں یہ 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(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>
</>
)
}
};صف تراشنا
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 تجویز کرتا ہے:
- دو سالہ پریکٹیکل کورس .
- آن لائن کورس۔ .
- عملی سال کا کورس .
ماخذ: www.habr.com