درود دوستان! می‌خوایم با عملگر Spread آشنا بشیم که از ES6 به جاوااسکریپت اضافه شده و کاربردهای جالب و زیادی داره.

موارد زیر رو توی این قسمت یاد می‌گیریم:

 

عملگر Spread چیه؟

معنی تحت‌اللفظی این Spread یعنی پخش کردن. این عملگر که به صورت سه‌نقطه ... هست، قبل از یک مقدار قابل پیمایش (Iterable) مثل یک آرایه قرار می‌گیره و اعضای اون رو پخش می‌کنه توی یک چیز دیگه مثل ورودی‌های یک تابع یا یک آرایه.

توی این مثال می‌خوایم اعضای یک آرایه رو پخش کنیم توی ورودی‌های یک تابع:

function add(a, b, c) {
  alert(a); // 1
  alert(b); // 2
  alert(c); // 3
}
const numbers = [1, 2, 3];

add(<<...numbers>>);

توی این کد و توی خط ۸ ما اعضای آرایه numbers رو پخش کردیم توی ورودی‌های تابع add. انگار چنین کاری انجام دادیم:

add(1, 2, 3);

همونطور که می‌بینیم بجای اینکه به صورت دستی ورودی‌ها رو پاس بدیم، این کار رو به صورت خودکار با عملگر Spread انجام دادیم 👌 ارزش این ویژگی توی این مثال زمانی پر رنگ‌تر میشه که آرایه‌هامون اعضای بیشتری داشته باشن و یا تعداد ورودی‌های تابع معین نباشه.

 

به غیر از ورودی‌های توابع، ما می‌تونیم اعضای یک آرایه رو پخش کنیم توی یک آرایه دیگه:

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

const merged = [<<...arr1>>,<<...arr2>>];

alert(merged); // 1,2,3,4,5,6

توی این کد، اعضای آرایه‌های arr1 و arr2 توی یک آرایه جدید به اسم merged پخش شدن. به کاری که انجام دادیم به اصطلاح گفته میشه ادغام کردن (Merge) دو آرایه. در واقع انگار چنین آرایه‌ای ساختیم:

[1, 2, 3, 4, 5, 6];

 

عملگر Spread و مقادیر قابل پیمایش

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

مقدار قابل پیمایش به مقداری گفته میشه که می‌تونه به راحتی توی حلقه for...of قرار بگیره تا بتونیم روی اعضای اون حلقه بزنیم.

توی جاوااسکریپت آرایه‌ها معروف‌ترین مقدارهای قابل پیمایش هستن. اما باید بدونیم مقادیر دیگه‌ای مثل رشته‌ها و آبجکت Set هم قابل پیمایش هستن که عملگر Spread می‌تونه برای همه این مقادیر استفاده بشه:

const chars = [..."Hello"];

console.log(chars); // ["H", "e", "l", "l", "o"]

 

عملگر Spread و آبجکت‌ها

ما می‌تونیم از این عملگر برای آبجکت لیترال‌ها (آبجکت‌هایی که با {} ساخته میشن) هم استفاده کنیم. این کار برای پخش کردن پراپرتی‌های یک آبجکت توی یک آبجکت دیگه استفاده میشه:

const obj1 = { a: 1, b: 2 };

const cloned = {<<...obj1>>};

console.log(cloned);
alert(cloned.a); // 1

الان آبجکت cloned دقیقاً شامل پراپرتی‌هایی میشه که آبجکت obj1 داره. به کاری که کردیم به اصطلاح گفته میشه کپی یا کلون (Clone) کردن یک آبجکت. قبل از استفاده از این عملگر برای کلون کردن یک آبجکت پیشنهاد می‌کنم پست زیر رو بخونین:

 

پارامتر رست (Rest) و عملگر Spread

دیدیم که عملگر Spread ظاهری کاملاً مشابه با پارامتر رست داره که اون رو توی قسمت قبل بررسی کردیم. اما باید بدونیم که پارامتر رست فقط توی پارامتر توابع دیده میشه. یعنی اگه توی پارامترهای یک تابع یک سه‌نقطه ... دیدیم، اون پارامتر رست هست:

// Rest parameter
function add(<<...numbers>>) { }

// Spread operator
add(<<...[1, 2, 3]>>);

در واقع توی خیلی از شرایط این دو می‌تونن ترکیب بشن:

const add = (<<...numbers>>) => (
  numbers.reduce((acc, item) => acc + (+item), 0)
);

const input = prompt("Enter numbers in format: 1,2,...", "3,5,7");

alert(
  add(<<...input.split(',')>>)
);

 

خب دوستان با عملگر Spread آشنا شدیم و دیدیم که با اون می‌تونیم کدهایی خواناتر و البته کم‌حجم‌تر داشته باشیم. امیدوارم از این قسمت هم استفاده کرده باشین. روزتون خوش 😉✌️