8 ترفند جاوا اسکریپت که احتمالا نمی‌دانید

جاوا اسکریپت یک زبان برنامه نویسی قدرتمند به ویژه در توسعه وب است که برای ایجاد و کنترل محتوای پویای وب سایت مثلا هر چیزی که در صفحه حرکت کرده یا جابه‌جا می‌شود و یا بدون نیاز به بارگیری دستی صفحه تغییر می‌کند، مورد استفاده قرار می‌گیرد. در طول سال‌های گذشته جاوا اسکریپت به دلیل سادگی و بسیاری از افتخاراتی که کسب کرده و همچنین پکیج‌های زیادی که در آن وجود دارد، مشهور شده است. بنابراین بدون هیچ توضیح اضافه‌ای بیایید موارد زیر را بررسی کنیم.

1. تبدیل رشته به عدد

فقط با استفاده از علامت + می‌توانید به راحتی یک رشته را به عدد تبدیل کنید. برخلاف روش قدیمی، استفاده از عملگر + بسیار مختصرتر و آسان‌تر است.

my_string = "123";
console.log(+my_string);
// 123

my_string = "amazing";
console.log(+my_string);
// NaN

لطفا توجه داشته باشید که این فقط با string number کار می‌کند، همانطور که در مثال بالا مشاهده می‌کنید.

2. تبدیل عدد به رشته

بدون استفاده از متد toString در جاوا اسکریپت می‌توانید به روش ساده‌تری یک عدد را به رشته تبدیل کنید.

نگاهی به مثال زیر بیاندازید:

let converted_number = 5 + "";
console.log(converted_number);
// 5

console.log(typeof converted_number); 
// string

3. گرفتن مقادیر منحصر به فرد

می‌توانیم مقادیر منحصر به فرد را از یک آرایه استخراج کنیم، یعنی مقادیر تکراری را در یک آرایه به سادگی و با استفاده از شی Set و عملگر Spread حذف کنیم.

در زیر یک مثال ساده آورده شده است:

let array_values = [1, 3, 3, 4, 5, 6, 6, 6,8, 4, 1]
let unique_values = [...new Set(array_values )];
console.log(unique_values );
// [1,3, 4, 5, 6, 8]

4. همه مقادیر را جایگزین کنید

می‌دانیم که متد string.replace اولین مورد را جایگزین می‌کند. در هر صورت می‌توان از عبارات منظم در جاوا اسکریپت برای جایگزینی محتوای خاص در رشته‌ها استفاده کرد.

در مثال زیر ازregex  گلوبال /g برای جایگزینی همه محتوای یک رشته استفاده خواهیم کرد.

let replace_string = "Visit stunnitysoft. stunnitysoft is a software company";
console.log(replace_string.replace(/stunnity/, "Micro")); 
// "Visit Microsoft. stunnitysoft is a software company"
console.log(replace_string.replace(/stunnity/g, "Micro")); 
// "Visit Microsoft. Microsoft is a software company"

5. Optional Chaining

عملگر Optional Chaining (?.) مجاز به خواندن مقدار یک خصوصیت است که در عمق یک زنجیره از اشیا متصل به هم قرار دارد، بدون این که به صراحت تایید کند هر مقداری در این زنجیره معتبر است.

بیایید عبارت a?.b را در نظر بگیریم.

این عبارت a.b را ارزیابی می‌کند. اگر a تهی و تعریف نشده نباشد، در این صورت تعریف نشده ارزیابی می‌شود.

همچنین می‌توانید چندین زنجیره مانند a?.b?.c را ارزیابی کنید.

اگر a تعریف نشده یا تهی باشد، این عبارت به صورت تعریف نشده ارزیابی می‌شود.

و اگر b تعریف نشده یا تهی باشد، این عبارت باز هم به صورت تعریف نشده ارزیابی می‌شود.

در غیر این صورت به عنوان a.b.c در نظر گرفته می‌شود.

سینتکس

obj.val?.prop
obj.val?.[expr]
obj.arr?.[index]
obj.func?.(args)

6. عملگر Nullish Coalescing

عملگر Nullish Coalescing (؟؟) یک عملگر منطقی است که وقتی عملوند سمت چپ آن تهی یا تعریف نشده باشد، عملوند سمت راست خود را برمی‌گرداند و در غیر این صورت عملوند سمت چپ را برمی‌گرداند.

عبارت a ?? b را در نظر بگیرید. اگر a تهی یا تعریف نشده باشد، b را ارزیابی می‌کند. در غیر این صورت a ارزیابی می‌شود.

7. عملگرهای منطقی AND (&&) و OR (||)

فرض کنید مثال زیر را داریم که b و c در یک عبارت هستند.

b && c

فقط در صورتی که b معتبر باشد، با مقدار c ارزیابی می‌شود. در غیر این صورت فقط مقدار b در نظر گرفته می‌شود.

اگر b نادرست باشد، c دیگر ارزیابی نمی‌شود.

به این عمل ارزیابی اتصال کوتاه می‌گویند.

این مورد هنگام استفاده از ری‌اکت بسیار مفید است.

در مثال زیر هم فرض کنید b و c در یک عبارت هستند.

b || c

اگر b درست باشد، مقدار b ارزیابی می‌شود. در غیر این صورت فقط مقدار c در نظر گرفته می‌شود.

ارزیابی اتصال کوتاه در اینجا نیز اتفاق می‌افتد.

اگر b درست باشد، بنابراین عبارت c دیگر ارزیابی نمی‌شود.

این مورد نیز اغلب در ری‌اکت استفاده می‌شود.

8. استفاده از length برای تغییر اندازه و خالی کردن آرایه

در جاوا اسکریپت می‌توانیم یک متد داخلی به نام length را نادیده بگیریم و به آن مقدار دلخواه را اختصاص دهیم.

بیایید مثال زیر را در نظر بگیریم:

let array_values= [1, 2, 3, 4, 5, 6, 7, 8];  
console.log(array_values.length); 
// 8  
array_values.length = 5;  
console.log(array_values.length); 
// 5  
console.log(array_values); 
// [1, 2, 3, 4,5]

خالی کردن آرایه

let array_values= [1, 2, 3, 4, 5, 6, 7,8]; 
console.log(array_values.length); 
// 8  
array_values.length = 0;   
console.log(array_values.length); 
// 0 
console.log(array_values); 
// []

توجه: تنظیم length روی صفر توصیه نمی‌شود، زیرا می‌تواند منجر به سرریز حافظه شود. برای خالی کردن اشیا موجود در یک آرایه از حافظه، آنها باید صریحا پاک شوند.

جمع بندی

همانطور که می‌بینید، بسیاری از کارهای قدرتمند را بدون نوشتن تعداد زیادی خط کد انجام دادیم. اینگونه پیش بروید و از این نکات جاوا اسکریپت استفاده کنید، زیرا باعث می‌شود کدتان تمیزتر و خواناتر شود.

امیدوارم این نکات مورد توجهتان قرار گرفته باشد و برایتان مفید واقع شود. اگر هرگونه سوال یا نظری دارید، در بخش زیر با ما در میان بگذارید.

منبع