جاوا اسکریپت به سرعت در حال تغییر و پیش‌رفت است و این اتفاق اخیرا در ES2020 نیز مشاهده شد. چندین ویژگی جدید به این زبان برنامه‌نویسی اضافه شده‌است که بررسی آنها خالی از لطف نیست. افراد مختلفی برای رسیدن به هدفی مشخص، می‌توانند به روش‌های مختلفی کدنویسی کند؛ ولی برخی از این روش‌ها کوتاه‌تر و واضح‌تر از دیگر روش‌ها هستند. شما نیز می‌توانید با استفاده از چند ترفند کوچک، از این پس، به کدهای تمیز و واضح دست یابید. در ادامه‌ی این مقاله به لیستی از این ترفندها، که احتمالا روزی به کارتان خواهد آمد، اشاره می‌کنیم.
۱- اعتبارسنجی (validation) پارامترهای متدها
جاوا اسکریپت امکان تعیین مقادیر پیش‌فرض برای پارامترها را فراهم می‌سازد. با استفاده از این قابلیت، می‌توانید با یک ترفند ساده و مناسب، به اعتبارسنجی پارامترهای متدهایتان بپردازید.
const isRequired = () => { throw new Error('param is required'); };
const print = (num = isRequired()) => { console.log(`printing ${num}`) };
print(2);//printing 2
print()// error
print(null)//printing null۲- کد JSON را فرمت کنید
احتمالا با JSON.stringify آشنا هستید اما با فرمت دادن به خروجی آن از طریق stringify اشنا نباشید.
متد stringify سه ورودی دریافت می‌کند؛ مقدار (value)، جایگزین (replacer) و فاصله (space)
دو پارامتر آخر این متد اختیاری است و به همین دلیل احتمالا تا به حال از آنها استفاده نکرده‌اید. برای دندانه‌گذاری (indent) محتوای JSON می‌توان از پارامتر space استفاده کرد.
console.log(JSON.stringify({name:"John",Age:23},null,'\t'));
>>>
{
"name": "John",
"Age": 23
}۳- دریافت مقادیر منحصربه‌فرد یک آرایه
برای این‌کار می‌توان با استفاده از متد filter به حذف مقادیر تکراری آرایه پرداخت؛ اما بهتر است از آبجکت نیتیو جدید Set استفاده کرد.
let uniqueArray = [...new Set([1, 2, 3, 3,3,"school","school",'ball',false,false,true,true])];
>>> [1, 2, 3, "school", "ball", false, true]۴- حذف مقادیر Falsy از آرایه
احتمالا با مواردی روبرو شده‌اید که نیاز است مقادیر Falsy (دروغین) را از آرایه‌تان پاک کنید. مقادیر Falsy مقادیری اند که جاوا اسکریپت آنها را به صورت false (نادرست) ارزیابی می‌کند. جاوا اسکریپت تنها ۶ مقدار falsy به شرح زیر دارد:
- undefined
- null
- NaN
- 0
- “” (رشته خالی)
- false
آسان‌ترین راه برای فیلتر کردن یک آرایه و حذف مقادیر نا درست، استفاده از فانکشن فیلتر به شکل زیر است:
myArray
.filter(Boolean);اگر می‌خواهید تغییراتی در آرایه‌تان ایجاد کنید و سپس آرایه‌ی جدید را فیلتر کنید، می‌توانید از کد زیر استفاده کنید. فقط به خاطر داشته باشید که آرایه اصلی‌تان (myArray) دست‌نخورده باقی می‌ماند.
myArray
.map(item => {
// Do your changes and return the new item
})
.filter(Boolean);۵- ادغام چند آبجکت با هم دیگر
برای استفاده از این قابلیت در جاوا اسکریپت باید از spread operator استفاده کنید تا بتوان جندین آبجکت را با یک‌دیگر ترکیب کرد و به یک آبجکت نهایی رسید.
const user = {
name: 'John Ludwig',
gender: 'Male'
};
const college = {
primary: 'Mani Primary School',
secondary: 'Lass Secondary School'
};
const skills = {
programming: 'Extreme',
swimming: 'Average',
sleeping: 'Pro'
};
const summary = {...user, ...college, ...skills};۶- سورت (مرتب) کردن آرایه‌های عددی
آرایه‌های جاوا اسکریپتی، دارای متد پیش‌فرض sort هستند. این متد عناصر آرایه را تبدیل به رشته (string) کرده و سپس به مرتب‌سازی آن آرایه به صورت lexicographical (لغوی) می‌پردازد؛ البته این فرايند ممکن است برای مرتب‌سازی آرایه‌های عددی خیلی مناسب نباشد و در زیر می‌توانید روش درست استفاده از آن را مشاهده کنید:
[0,10,4,9,123,54,1].sort((a,b) => a-b);
>>> [0, 1, 4, 9, 10, 54, 123]در این روش در حال استفاده از فانکشنی هستید که دو عنصر از آرایه عددی‌مان را با هم مقایسه می‌کند و این فانکشن به متد sort پاس داده می‌شود؛ در نتیجه به مرتب‌سازی مناسبی درست خواهید یافت.
۷- غیرفعال کردن کلیک راست
ممکن است گاهی اوقات قصد غیر فعال کردن راست کلیک توسط کاربران را در وب‌سایت خود داشته باشید. اگر چه این مورد استفاده‌های نادر و اندکی دارد، بعضی وقت‌ها به کار خواهد آمد.
<body oncontextmenu="return false">
<div></div>
</body>۸- Destructuring
Destructuring assignment ویژگی است در جاوا اسکریپت که امکان بیرون کشیدن مقادیر یک آرایه یا پراپرتی‌های یک آبجکت را به شما خواهد داد. درواقع شما می‌توانید مقادیر دلخواهتان را از درون این موارد به داخل متغیرهایی جدید و مستقل از هم، منتقل کنید.
const object = { number: 10 };
// Grabbing number
const { number } = object;
// Grabbing number and renaming it as otherNumber
const { number: otherNumber } = object;
console.log(otherNumber); //10۹- گرفتن آخرین آیتم‌های یک آرایه
اگر قصد دارید که المنت‌های آخر یک آرایه را دریافت کنید، می‌توانید از متد slice به صورت زیر استفاده کنید: (با اعداد منفی)
let array = [0, 1, 2, 3, 4, 5, 6, 7]
console.log(array.slice(-1));
>>>[7]
console.log(array.slice(-2));
>>>[6, 7]
console.log(array.slice(-3));
>>>[5, 6, 7]۱۰- انتظار برای پایان تمامی promise ها
بعضا نیاز است که منتظر چندین پرامیس بمانیم تا عملکردشان به پایان برسد. در این مواقع می‌توان از Promise.all برای اجرا کردن موازی پرامیس‌ها استفاده کرد.
پرامیس‌ها در CPU تک هسته‌ای، به شکل همزمان (concurrently) و در CPU چند هسته‌ای به شکل موازی (parallel) اجرا خواهند شد. وظیفه‌ی اصلی Promise.all انتظار برای resolve شدن تمامی پرامیس‌هاییست که به آن پاس داده شده اند.
const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error('Something went wrong'))];
Promise.all(PromiseArray)
.then(data => console.log('all resolved! here are the resolve values:', data))
.catch(err => console.log('got rejected! reason:', err))نکته‌ی قابل توجه این است که هنگامی که هر یک از پرامیس‌ها reject شوند، متد Promise.all خطایی را بروز خواهد داد. این بدان معناست که کد شما در انتظار تکمیل تمام پرامیس‌ها نمی‌ماند.
اگر می‌خواهید تا تکمیل تمامی پرامیس‌ها، کدتان در انتظار بماند، می‌توانید از Promise.allSettled استفاده کنید. این متد در ES2020 عرضه شده است.
const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error('Something went wrong'))];
Promise.allSettled(PromiseArray).then(res =>{
console.log(res);
}).catch(err => console.log(err));
//[
//{status: "fulfilled", value: 100},
//{status: "rejected", reason: null},
//{status: "fulfilled", value: "Data release"},
//{status: "rejected", reason: Error: Something went wrong ...}
//]ممکن است برخی از پرامیس‌هایتان reject شوند، ولی Promise.allSettled پاسخ پرامیس‌هایتان را بر می‌گرداند (return می‌کند).
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید