نکته سریع: نحوه استفاده از اپراتور Spread در جاوا اسکریپت

در این آموزش، روش‌های مختلف استفاده از عملگر spread در جاوا اسکریپت و تفاوت اصلی بین عملگرهای spread و rest را خواهید آموخت.

با نماد سه نقطه (...)، عملگر گسترش جاوا اسکریپت در ES6 معرفی شد. می‌توان از آن برای گسترش عناصر در مجموعه‌ها و آرایه‌ها به عناصر منفرد و مجزا استفاده کرد.

از عملگر spread می‌توان برای ایجاد و شبیه‌سازی آرایه‌ها و اشیا، ارسال آرایه‌ها به عنوان پارامترهای تابع، حذف موارد تکراری از آرایه‌ها و موارد دیگر استفاده کرد.

معرفی سایت: 5 نشانه که نشان می دهد طراحی وب در حال برسی

Syntax

عملگر spread فقط روی اشیاء قابل تکرار قابل استفاده است. باید درست قبل از شیء تکرار شونده، بدون هیچ گونه جدایی استفاده شود. به عنوان مثال:

کنسول.log(...arr);

پارامترهای تابع

روش Math.min() را به عنوان مثال در نظر بگیرید. این روش حداقل یک عدد را به عنوان پارامتر می پذیرد و کوچکترین عدد را در بین پارامترهای ارسال شده برمی گرداند.

اگر آرایه‌ای از اعداد دارید و می‌خواهید حداقل این اعداد را پیدا کنید، بدون عملگر spread، باید عناصر را یکی یکی با استفاده از شاخص‌هایشان عبور دهید یا از apply() برای ارسال عناصر آرایه به عنوان پارامتر. به عنوان مثال:

const اعداد = [15، 13، 100، 20];
const minNumber = ریاضی .دقیقه.apply(null، اعداد);
کنسول.ورود(minNumber);

لطفاً توجه داشته باشید که اولین پارامتر null است، زیرا اولین پارامتر برای تغییر مقدار this تابع فراخوانی استفاده می‌شود.

عملگر spread راه‌حلی راحت‌تر و قابل خواندن برای ارسال عناصر یک آرایه به عنوان پارامتر به تابع است. به عنوان مثال:

const اعداد = [15، 13، 100، 20];
const minNumber = ریاضی .دقیقه(...numbers);
کنسول.ورود(اعداد);

شما می توانید آن را در این مثال زنده ببینید:

به قلم
استفاده از Spread Operator در توابع JS توسط SitePoint مراجعه کنید (@SitePoint)
در CodePen.

ایجاد آرایه

از عملگر spread می‌توان برای ایجاد آرایه‌های جدید از آرایه‌های موجود یا دیگر اشیاء قابل تکرار که شامل Symbol.iterator(). اینها اشیایی هستند که با استفاده از حلقه for...of می توان آنها را تکرار کرد.

به عنوان مثال، می توان از آن برای شبیه سازی آرایه ها استفاده کرد. اگر به سادگی به یک آرایه جدید مقدار یک آرایه موجود را اختصاص دهید، با ایجاد تغییرات در آرایه جدید، آرایه موجود به روز می شود:

const اعداد = [15، 13، 100، 20];
const clonedNumbers = اعداد;
clonedNumbers.هل(24);
کنسول.ورود(clonedNumbers);
کنسول.ورود(اعداد);

با استفاده از عملگر spread، آرایه خروجی را می توان در یک آرایه جدید کلون کرد و هر تغییری که در آرایه جدید ایجاد شود، روی آرایه موجود تأثیری نخواهد داشت:

const اعداد = [15، 13، 100، 20];
const clonedNumbers = [...اعداد];
clonedNumbers.هل(24);
کنسول.ورود(clonedNumbers);
کنسول.ورود(اعداد);

لازم به ذکر است که این کار فقط آرایه های یک بعدی را شبیه سازی می کند. برای آرایه های چند بعدی کار نمی کند.

عملگر spread همچنین می تواند برای به هم پیوستن بیش از یک آرایه به یک آرایه استفاده شود. به عنوان مثال:

const evenNumbers = [2، 4، 6، 8];
const oddNumbers = [1، 3، 5، 7 ];
const allNumbers = [...evenNumbers، ...oddNumbers];
کنسول.ورود(...allNumbers);

همچنین می‌توانید از عملگر spread روی یک رشته برای ایجاد آرایه‌ای استفاده کنید که در آن هر مورد یک کاراکتر در رشته است:

const str = 'سلام، دنیا!';
const strArr = [...str];
کنسول.ورود(strArr);

ایجاد اشیا

از عملگر spread می توان به روش های مختلفی برای ایجاد اشیاء استفاده کرد.

می توان از آن برای شبیه سازی سطحی یک شی دیگر استفاده کرد. به عنوان مثال:

const obj = { name: "مارک"، age: 20};
const clonedObj = { ...obj };
کنسول.ورود(clonedObj);

همچنین می توان از آن برای ادغام بیش از یک شی در یک شی استفاده کرد. به عنوان مثال:

const obj1 = { name: "مارک"، age: 20};
const obj2 = { occupation: 'Student' };
const clonedObj = { ...obj1، ...obj2 };
کنسول.ورود(clonedObj);

لازم به ذکر است که اگر اشیاء دارای نامهای یکسانی باشند، از مقدار آخرین گسترش شیء استفاده خواهد شد. به عنوان مثال:

const obj1 = { name: "مارک"، age: 20};
const obj2 = { age: 30 };
const clonedObj = { ...obj1، ...obj2 };
کنسول.ورود(clonedObj);

از عملگر spread می‌توان برای ایجاد یک شی از یک آرایه استفاده کرد، جایی که شاخص‌های آرایه به ویژگی تبدیل می‌شوند و مقدار آن شاخص به مقدار ویژگی تبدیل می‌شود. به عنوان مثال:

const اعداد = [15، 13، 100، 20];
const obj = { ...اعداد };
کنسول.ورود(obj);

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

const str = 'سلام، دنیا!';
const obj = { ...str };
کنسول.ورود(obj);

تبدیل NodeList به آرایه

یک NodeList مجموعه‌ای از گره‌ها است که عناصر موجود در سند عناصر از طریق روش‌های موجود در مجموعه‌ها مانند item یا entries بر خلاف آرایه‌ها

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

می توانید از عملگر spread برای تبدیل NodeList به آرایه استفاده کنید. به عنوان مثال:

const nodeList = سند.querySelectorAll('div') ;
کنسول.ورود(nodeList.مورد());
const nodeArray = [...nodeList];
کنسول.ورود(nodeList[]);

حذف موارد تکراری از آرایه ها

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

از آنجایی که یک مجموعه فقط مقادیر منحصر به فرد را ذخیره می کند، می توان آن را با عملگر spread جفت کرد تا موارد تکراری از یک آرایه حذف شود. به عنوان مثال:

const duplicatesArr = [1، 2، 3، 2، 1،  3];
const uniqueArr = [...جدید تنظیم( duplicatesArr)];
کنسول.ورود(duplicatesArr);
کنسول.ورود(uniqueArr);

Spread Operator vs Rest Operator

عملگر بقیه نیز یک عملگر سه نقطه ای است (...)، اما برای هدف دیگری استفاده می شود. عملگر rest را می توان در لیست پارامترهای یک تابع استفاده کرد تا بگوید که این تابع تعداد نامشخصی از پارامترها را می پذیرد. این پارامترها را می توان به عنوان یک آرایه مدیریت کرد.

به عنوان مثال:

تابع calculateSum(...funcArgs) {
  بگذارید جمع = ;
  برای (const arg از funcArgs) {
    sum += arg;
  }

  بازگشت sum;
}

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

سپس می توانید متغیرها را یکی یکی به تابع calculateSum به عنوان آرگومان ارسال کنید یا از عملگر spread برای ارسال عناصر آرایه به عنوان آرگومان استفاده کنید:

کنسول.log(calculateSum(1، 2 ، 3));
const اعداد = [ ">1، 2، 3];
کنسول.ورود(calculateSum(...اعداد));

نتیجه گیری

عملگر spread به شما امکان می دهد با خطوط کمتر کد، کارهای بیشتری انجام دهید، در حالی که خوانایی کد را حفظ می کنید. می‌توان آن را روی اشیاء تکرارپذیر برای ارسال پارامترها به یک تابع، یا ایجاد آرایه‌ها و اشیاء از دیگر اشیاء تکرارپذیر استفاده کرد.

منبع: https://firas.ir/5-نشانه-که-نشان-می-دهد-طراحی-وب-در-حال-رسی/