Destructuring و Spread/Rest در آرایه

استخراج و ترکیب مقادیر آرایه با Destructuring و Spread/Rest

مقدمه

تا اینجا برای دسترسی به عناصر آرایه، همیشه از اندیس استفاده کرده‌ایم. ES6 روشی کوتاه‌تر و خواناتر برای استخراج مقادیر از آرایه معرفی کرد که به آن Destructuring می‌گویند. در این درس، این ویژگی را همراه با کاربرد Spread و Rest در آرایه بررسی می‌کنیم؛ مفاهیمی که پیش‌تر نسخه‌ی آن‌ها را در Object و پارامترهای تابع دیدیم.

Destructuring پایه

به‌جای این روش قدیمی:

let colors = ["قرمز", "سبز", "آبی"];

let first = colors[0];
let second = colors[1];

می‌توان از Destructuring استفاده کرد:

let colors = ["قرمز", "سبز", "آبی"];

let [first, second, third] = colors;

console.log(first);
console.log(second);
console.log(third);

تحلیل کد

در این الگو، جاوااسکریپت بر اساس ترتیب عناصر آرایه، مقدار هرکدام را به متغیر متناظر در همان موقعیت نسبت می‌دهد. این نکته مهم است: در Destructuring آرایه، برخلاف Object، ترتیب متغیرها تعیین‌کننده است، نه نام آن‌ها.

رد کردن عناصر ناخواسته

اگر به یک عنصر خاص نیاز نداشته باشیم، می‌توانیم جای آن را در الگو خالی بگذاریم:

let colors = ["قرمز", "سبز", "آبی"];

let [first, , third] = colors;

console.log(first); // قرمز
console.log(third); // آبی

جای خالی بین دو کاما به جاوااسکریپت می‌گوید که عنصر دوم را نادیده بگیرد.

مقدار پیش‌فرض در Destructuring

اگر آرایه عنصر کافی نداشته باشد، می‌توان برای متغیر مقدار پیش‌فرض تعیین کرد؛ دقیقاً مشابه چیزی که در Default Parameters دیدیم:

let colors = ["قرمز"];

let [first, second = "سبز پیش‌فرض"] = colors;

console.log(first);  // قرمز
console.log(second); // سبز پیش‌فرض

همانند Default Parameters، این مقدار پیش‌فرض فقط زمانی فعال می‌شود که مقدار متناظر دقیقاً undefined باشد.

جابه‌جایی مقدار دو متغیر

یکی از کاربردهای جالب Destructuring، جابه‌جا کردن مقدار دو متغیر بدون نیاز به متغیر واسط است:

let a = 1;
let b = 2;

[a, b] = [b, a];

console.log(a);
console.log(b);

Rest در Destructuring آرایه

می‌توان با استفاده از ...، باقی‌مانده‌ی عناصر آرایه را در یک آرایه‌ی جدید جمع کرد؛ دقیقاً همان مفهوم Rest Parameters که در پارامترهای تابع دیدیم:

let numbers = [10, 20, 30, 40, 50];

let [firstNum, secondNum, ...rest] = numbers;

console.log(firstNum); // 10
console.log(secondNum); // 20
console.log(rest);      // [30, 40, 50]

همانند Rest Parameter در تابع، این‌جا هم عنصر Rest باید حتماً آخرین عنصر الگوی Destructuring باشد.

Spread Operator در ساخت آرایه

Spread Operator برای باز کردن (Expand) عناصر یک آرایه در دل آرایه‌ی دیگر استفاده می‌شود:

let fruits = ["سیب", "موز"];
let vegetables = ["هویج", "خیار"];

let all = [...fruits, ...vegetables];
console.log(all); // ["سیب", "موز", "هویج", "خیار"]

کپی مستقل آرایه با Spread

همان‌طور که در فصل انواع داده دیدیم، نسبت‌دهی مستقیم یک آرایه به متغیر دیگر فقط ارجاع را کپی می‌کند. Spread Operator راهی ساده برای ساخت یک کپی مستقل (Shallow Copy) از آرایه فراهم می‌کند:

let original = [1, 2, 3];
let copy = [...original];

copy.push(4);

console.log(original);
console.log(copy);

تحلیل رفتار جاوااسکریپت

در این مثال، چون copy از طریق Spread ساخته شده، یک آرایه‌ی کاملاً مستقل و جدید است؛ به همین دلیل افزودن عنصر به copy هیچ تأثیری روی original ندارد. این دقیقاً برخلاف حالتی است که با let copy = original رخ می‌داد؛ در آن حالت هر دو متغیر به یک آرایه‌ی واحد اشاره می‌کردند.

جدول مقایسه‌ی Spread و Rest

ویژگی	Spread	Rest
عملکرد	باز کردن عناصر آرایه	جمع کردن عناصر باقی‌مانده
محل استفاده	ساخت آرایه/Object جدید، فراخوانی تابع	Destructuring، پارامترهای تابع
نماد	...	...

Best Practices

• برای استخراج چند مقدار از یک آرایه، به‌جای دسترسی مکرر با اندیس، از Destructuring استفاده کنید.
• برای ساخت یک کپی مستقل از آرایه یا ترکیب چند آرایه، از Spread Operator استفاده کنید.

ارتباط با سایر مفاهیم

Destructuring آرایه در ادامه‌ی همین دوره، به‌ویژه هنگام کار با مقادیر بازگشتی توابعی که چند مقدار برمی‌گردانند، بسیار پرکاربرد خواهد بود. در درس بعدی، همین مفاهیم Destructuring و Spread را برای Object بررسی می‌کنیم و تفاوت‌های آن با نسخه‌ی آرایه‌ای را خواهیم دید.

جمع‌بندی

Destructuring آرایه امکان استخراج سریع و خوانا مقادیر بر اساس ترتیب عناصر را فراهم می‌کند و می‌تواند شامل مقدار پیش‌فرض و Rest نیز باشد. Spread Operator برای باز کردن عناصر یک آرایه در آرایه‌ی دیگر یا ساخت یک کپی مستقل استفاده می‌شود؛ برخلاف نسبت‌دهی مستقیم که فقط ارجاع را کپی می‌کند.