ترفندهای ساده و جالب جاوا اسکریپت — راهنمای کاربردی

۴۷ بازدید
آخرین به‌روزرسانی: ۰۷ شهریور ۱۴۰۲
زمان مطالعه: ۳ دقیقه
ترفندهای ساده و جالب جاوا اسکریپت — راهنمای کاربردی

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

997696

ترفند اول: ترکیب چند شیئ

در این قسمت اولین ترفند را شرح می‌دهیم.

فرض کنید سه شیئ متفاوت دارید:

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

بدین ترتیب به پایان این مقاله می‌رسیم.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۱ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
gitconnected
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *