فرادرسترفندهای ساده و جالب جاوا اسکریپت — راهنمای کاربردی
در این مقاله برخی ترفندهای ساده و جالب جاوا اسکریپت معرفی می‌شوند که می‌توانید برای بهینه‌سازی کد خود مورد استفاده قرار دهید.
ترفند اول: ترکیب چند شیئ
در این قسمت اولین ترفند را شرح می‌دهیم.
فرض کنید سه شیئ متفاوت دارید:
1const obj1 = {'a': 1, 'b': 2};
2const obj2 = {'c': 3};
3const obj3 = {'d': 4};اگر بخواهید یک شیئ شامل مشخصه‌های ترکیبی از سه شیئ باشد، می‌توانید این کار را با کد زیر انجام دهید:
1const objCombined = {...obj1, ...obj2, ...obj3};با لاگ کردن objCombined مقدار زیر در کنسول چاپ می‌شود:
علامت ... عملگر Spread نام دارد. objCombined شیئ جدیداً ایجاد شده است. به‌روزرسانی هر یک از مقادیر obj1 ،obj2 یا obj3 تأثیر روی مقادیر objCombined نخواهد داشت.
در مورد اشیای تودرتو، ارجاع‌ها به اشیای داخلی کپی خواهند شد و انواع جدیدی ایجاد نمی‌شوند. ساختار spread همه مشخصه‌های شیئ را کپی می‌کند، اما تنها یک شیئ جدید در سطح فوقانی ایجاد می‌شود. همچنین می‌توانید اشیا را با استفاده از متد ()Object.assign ترکیب کنید.
ترفند دوم: درج مقادیر بین مقادیر یک آرایه
فرض کنید آرایه زیر را از اعداد صحیح دارید:
1const arr = [0, 1, 2, 3, 5, 6, 7, 8];اگر بخواهید عدد صحیح 4 را در اندیس چهارم آرایه درج کنید، می‌توانید به روش زیر عمل کنید. با استفاده از تابع splice در پروتوتایپ آرایه و استفاده از ساختار تابع splice می‌توان به صورت زیر عمل کرد:
1arr.splice(index, itemsToDelete, item1ToAdd, item2ToAdd, ...)برای درج عدد صحیح 4 در اندیس 4 می‌توانیم کدی مانند زیر بنویسیم:
1arr.splice(4, 0, 4);بدین ترتیب آرایه به صورت زیر به‌روزرسانی می‌شود:
برای درج چندین عدد صحیح در آن اندیس می‌توانیم کدی مانند زیر بنویسیم:
1arr.splice(4, 0, 100, 101, 102);بدین ترتیب آرایه اصلی به صورت زیر به‌روزرسانی می‌شود:
استفاده از splice موجب تغییر آرایه اصلی می‌شود و آرایه جدیدی ایجاد نمی‌کند.
ترفند سوم: دریافت timestamp جاری
برای دریافت timestamp جاری در جاوا اسکریپت باید کد زیر را اجرا کنید:
1var date = new Date();
2date.getTime()کد فوق timestamp را برای date به صورت زیر ارائه می‌کند:
همچنین میانبری برای دریافت timestamp جاری وجود دارد:
1+new Date()یا از کد زیر می‌توان استفاده کرد:
1Date.now()ترفند چهارم: بررسی آرایه بودن یک شیئ
برای این که بررسی کنیم آیا یک شیئ به صورت آرایه است یا نه باید متد isArray() شیئ Array را فراخوانی کنیم:
1const obj = {data: 1};
2const arr = [1, 2, 3];برای بررسی یک آرایه از قطعه کد زیر استفاده می‌کنیم:
1Array.isArray(obj);// false
2Array.isArray(arr);// true
ترفند پنجم: تخریب ساختار شیئ
تصور کنید شیئ زیر را در جاوا اسکریپت دارید:
1const user = {
2 name: 'Kunal',
3 age: 25,
4 profile: 'https://medium.com/@kunaltandon.kt',
5 followers: 1000,
6 blogs: 57
7};می‌توانید متغیرهایی برای مشخصه‌های شیئ با استفاده از ساختار زیر به دست آورید:
1const { name, profile, blogs, followers } = user;
2console.log(name); // Kunal
3console.log(profile); // https://medium.com/@kunaltandon.kt
4console.log(blogs); // 57
5console.log(followers); // 1000پس از اجرای گزاره فوق، 4 متغیر متفاوت خواهیم داشت که شامل مشخصه‌های شیئ هستند. برای این که این فرایند عمل کند باید نام‌های متغیرها در سمت چپ با نام‌های کلید شیئ دقیقاً مطابقت داشته باشد. این روش به نام «تخریب ساختار شیئ» (Object Destructuring) نامیده می‌شود.
ترفند ششم: ساختار پارامتر Rest
آیا می‌دانید که می‌توانید تابعی ایجاد کنید که هر تعداد از آرگومان‌ها را بپذیرد؟ یک ساختار خاص به نام ساختار پارامتر Rest وجود دارد که چنین تابعی را می‌سازد.
1function sum(...values) {
2 console.log(values);
3}
4sum(1);
5sum(1, 2);
6sum(1, 2, 3);
7sum(1, 2, 3, 4);با فراخوانی تابع‌های sum می‌توانیم values را به عنوان یک آرایه از پارامترها که به تابع ارسال شده است دریافت کنیم. کد فوق خروجی زیر را پرینت می‌کند:
1[1]
2[1, 2]
3[1, 2, 3]
4[1, 2, 3, 4]ما می‌توانیم تابع sum را نیز تکمیل کنیم و کاری کنیم که مجموع پارامترهای ارسالی به تابع را محاسبه کند:
1function sum(...values) {
2 let sum = 0;
3 for (let i = 0; i < values.length; i++) {
4 sum += values[i];
5 }
6
7 return sum;
8}
9console.log(sum(1));
10console.log(sum(1, 2));
11console.log(sum(1, 2, 3));
12console.log(sum(1, 2, 3, 4));خروجی کد فوق به صورت زیر است:
1 3 6 10
بدین ترتیب به پایان این مقاله می‌رسیم.
اگر این مطلب برای شما مفید بوده است، آموزشهای زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزشهای JavaScript (جاوا اسکریپت)
- مجموعه آموزشهای برنامهنویسی
- آموزش JavaScript ES6 (جاوا اسکریپت)
- API-های شخص ثالث در جاوا اسکریپت — راهنمای جامع
- جاوا اسکریپت چیست؟ — به زبان ساده
==
