عملگر spread در جاوا اسکریپت

آیا تا به حال، در جدیدترین کدهای جاوااسکریپت، پیش‌وند سه نقطه (…) به چشم‌تان خورده است؟ آیا می‌دانید کاربرد این سه نقطه چیست و نمایانگر کدام syntax هاست؟

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

Spread

تیکه کد بالا شامل یک تابع می شود که یک modal را نمایش می دهد.این تابع یک configuration object به عنوان ورودی دریافت می کند که بر اساس اون modal نمایش داده می شود.همچنین درون تابع یک configuration object جدید ساخته می شود که با ترکیب اطلاعات دریافتی مشخص می شود که modal با چه ویژگی هایی نمایش داده شود.

همانطور که متوجه شدید برای استفاده از اطلاعات configuration object دریافتی در configuration object جدید تمامی گزینه ها به صراحت کپی شده اند و اگر گزینه بیشتر باشد،اوضاع خیلی بدتر خواهد بود چون باید تمامی موارد عینا کپی شود.

1.استفاده ازObject.assign

2. استفاده از spread operator

استفاده از spread operator در objects

حالا به ورژن جدید تابع از مثال بالای نگاه کنید:

پس از استفاده از spread و تغییر تمامی properties های object دریافتی در configuration object جدید قرار می گیرند.همونطور که می بینید کد ما خیلی خواناتر، کوتاه تر و بسیار انعطاف پذیرتر شده است.

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

استفاده از spread operator در arrays

شما میتونید از spread operator در آرایه ها استفاده کنید.در حقیقت در ES2015 شما فقط میتونستید از spread در آرایه ها استفاده کنید.(پشتیبانی از objects در ES2018 معرفی شد)

آیتم های آرایه های n1 و n3 در ابتدا و انتها n2 قرار می گیرند.این مقادیر با 66, 55 و 44 که در ابتدا به عنوان مقادیر اولیه آرایه n2 قرار گرفته بود، ترکیب می شوند.

در مثال زیر 3 آرایه در یک آرایه جدید ترکیب می شوند.

حتی شما می توانید با استفاده از spread یک آرایه رو به یک object تبدیل کنید.با انجام این کار آیتم های آرایه Value و indexes آرایه key خواهند بود.

استفاده از spread operator در function calls

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

مثال بالا یک تابع را فراخوانی می کند و 5 عدد از آرایه ids به عنوان arguments پاس میدهد.این کد معادل :

اگر میخواهید که بیشتر با این مورد سروکله بزنید کافیه که کنسول مرورگر خود را باز کنید و این آرایه رو console.log کنید.

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

این بار ما یک آرایه دو بعدی ایجاد می کنیم و برای هر کدام از عناصر آرایه تابع drawPixel رو فراخوانی می کنیم و آیتم ها رو به عنوان arguments برای این فراخوانی پاس میدیم.توجه داشته باشید برای اینکه arguments به درستی پاس داده شده باشند، مقادیر sub-arrays(زیرآرایه ها) به ترتیب x coordinate, y coordinate و color هستند.

عملگر spread در جاوا اسکریپت

دیدگاهتان را بنویسید

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