عملگر پخش (Spread) (ES6 Spread Operator)

عملگر پخش در ES6 یا Spread Operator با علامت ... نوشته می شود. با آن می توانی خیلی سریع محتویات یک آرایه یا آبجکت را داخل یک آرایه یا آبجکت جدید پخش کنی. عملگر پخش در ES6 در ری اکت هم خیلی کاربردی است.

عملگر پخش در ES6 چیست؟

عملگر پخش (Spread Operator) سه نقطه ... است. این عملگر محتویات یک آرایه یا آبجکت را باز می کند و در جای جدید قرار می دهد. انگار کارتون را خالی می کنی داخل یک کارتون تازه.

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

ترکیب دو آرایه با عملگر پخش

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

const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [
  ...numbersOne,
  ...numbersTwo
];

مشاهده در ادیتور

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

عملگر پخش همراه با دیس ترکچرینگ آرایه

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

const numbers = [1, 2, 3, 4, 5, 6];

const [one, two, ...rest] = numbers;

مشاهده در ادیتور

در این کد، one عدد 1 است و two عدد 2 خواهد بود. بقیه عددها یعنی 3 تا 6 داخل آرایه rest قرار می گیرند. این شبیه این است که دو برگه نمره مهم را جدا کنی و بقیه را در یک پوشه بریزی.

عملگر پخش روی آبجکت ها

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

const car = {
  brand: 'Ford',
  model: 'Mustang',
  color: 'red'
};

const car_more = {
  type: 'car',
  year: 2021,
  color: 'yellow'
};

const mycar = {
  ...car,
  ...car_more
};

مشاهده در ادیتور

اینجا mycar ترکیبی از car و car_more است. فیلدهایی که تکراری نبودند، به آبجکت اضافه شدند. اما color در هر دو آبجکت بود و در نهایت مقدار color از car_more یعنی yellow روی red قبلی نشسته است.

نکته: وقتی چند آبجکت را با عملگر پخش ترکیب می کنی، مقدار property تکراری با آخرین آبجکت جایگزین می شود. بنابراین ترتیب نوشتن خیلی مهم است.

عملگر پخش در ری اکت چه کاربردی دارد؟

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

اگر دیس ترکچرینگ را هم خوانده باشی، می بینی که این دو موضوع کنار هم خیلی قوی هستند. ترکیب دیس ترکچرینگ و عملگر پخش در ES6، خواندن کدهای ری اکت را راحت تر می کند.

برای درک بهتر، می توانی صفحه دیس ترکچرینگ (تقسیم ساختاری) (ES6 Destructuring) را هم بخوانی. این دو مبحث معمولا پشت سر هم در پروژه های واقعی استفاده می شوند.

تمرین گام به گام با عملگر پخش

برای این که عملگر پخش در ذهنت خوب بنشیند، این مراحل را انجام بده.

1. یک آرایه در جاوااسکریپت با نام listA بساز و چند عدد داخلش بگذار.
2. یک آرایه دیگر به اسم listB درست کن و چند عدد دیگر داخلش بگذار.
3. با عملگر پخش، آرایه جدیدی به نام listAll از ترکیب listA و listB بساز.
4. یک آبجکت student با فیلدهای name و age درست کن.
5. یک آبجکت دیگر studentExtra با فیلدهای city و grade بساز و با عملگر پخش، آبجکت combinedStudent را بساز.

اگر لازم شد، برای مرور می توانی دوباره به صفحه عملگر پخش در ES6 برگردی و مثال ها را کنار کد خودت ببینی.

جمع بندی سریع

• عملگر پخش در ES6 با سه نقطه ... نوشته می شود.
• با عملگر پخش می توانی آرایه ها را ترکیب و کپی کنی.
• با عملگر پخش می توانی چند آبجکت را در یک آبجکت جدید ادغام کنی.
• اگر property تکراری باشد، مقدار آبجکت آخر روی قبلی می نشیند.
• در ری اکت، عملگر پخش کنار دیس ترکچرینگ برای props و state خیلی مهم است.