عملگرهای spread و rest
عملگر سه‌نقطه ... در JavaScript دو کاربرد دارد. spread اعضای یک مقدار iterable را در جایگاه‌های جداگانه باز می‌کند و rest چیزهایی را که باقی می‌مانند جمع می‌کند. خود سه‌نقطه یکسان است؛ جای آن در کد، کاربردش را تعیین می‌کند.
باز کردن آیتم‌ها با spread
const extras = ["mint", "lemon"];
const menu = ["tea", ...extras];
console.log(menu.join(" / "));
خروجی دقیقاً tea / mint / lemon است. در آرایهٔ تازه، خود extras به‌عنوان یک آیتم قرار نمی‌گیرد؛ هر عضو آن در جایگاه جداگانه‌ای قرار می‌گیرد.
ساخت کپی سطحی از آرایه
const extras = ["mint", "lemon"];
const copy = [...extras];
copy[0] = "ginger";
console.log(extras[0]);
console.log(copy[0]);
آرایهٔ copy از نظر بیرونی مستقل است؛ پس تغییر copy[0]، مقدار extras[0] را عوض نمی‌کند. این کپی عمیق نیست: اگر عضوی object یا آرایهٔ تو‌در‌تو باشد، همان مقدار تو‌در‌تو میان هر دو آرایه مشترک می‌ماند.
ساخت object تازه با spread
const order = { guest: "lida", drink: "tea" };
const withSize = { ...order, size: "regular" };
console.log(order.size);
console.log(withSize.size);
order همچنان property به نام size ندارد و مقدار order.size برابر undefined است. withSize یک object تازه با size دارد. spread در object هم کپی سطحی می‌سازد و دادهٔ تو‌در‌تو را جداگانه کپی نمی‌کند.
جمع کردن باقی‌مانده با rest
const menu = ["tea", "mint", "lemon"];
const [first, ...remaining] = menu;
const order = { guest: "lida", drink: "tea" };
const { guest, ...details } = order;
console.log(first, remaining, details);
در این نمونه first مقدار tea دارد و remaining برابر ["mint", "lemon"] است. در details، property به نام drink هست اما guest نیست. این بخش فقط rest را در کنار ساختارشکنی جلسهٔ قبل نشان می‌دهد.
پارامتر rest در تابع
<!doctype html>
<html lang="fa" dir="rtl">
<head><meta charset="utf-8"><title>Spread و Rest</title></head>
<body>
<p id="result"></p>
<script>
const extras = ["mint", "lemon"];
const menu = ["tea", ...extras];
function list(first, ...others) {
return [first, ...others].join(" / ");
}
document.getElementById("result").textContent = list(...menu);
</script>
</body>
</html>
در فراخوانی list(...menu)، spread آرایه را به آرگومان‌های جدا تبدیل می‌کند. در تعریف function list(first, ...others)، rest آرگومان‌های اضافی را در یک آرایهٔ واقعی جمع می‌کند. خروجی قابل مشاهده tea / mint / lemon است.
جدول زیر تفاوت را روشن می‌کند: سه‌نقطه همان است، اما جای آن تعیین می‌کند JavaScript مقدارها را باز کند یا باقی‌مانده را جمع کند.
📊 یک سه‌نقطه، دو کاربرد
| جای استفاده | کار | نمونه |
|---|---|---|
| آرایه، object یا فراخوانی تابع | spread باز می‌کند | [..., extras]، { ...order }، list(...menu) |
| الگوی انتساب یا پارامتر | rest جمع می‌کند | const [first, ...remaining] = menu، function list(first, ...others) |
تمرین کوتاه
مقدار copy[0] را عوض کنید و آن را با extras[0] بسنجید. سپس یک object تو‌در‌تو داخل آرایه بگذارید تا ببینید کپی سطحی چه چیزی را مشترک نگه می‌دارد.
mistakes
پارامتر rest باید آخرین پارامتر تابع باشد. از spread انتظار کپی عمیق نداشته باشید و [...items] را با const [...items] یکی ندانید: spread باز می‌کند و rest جمع می‌کند.
نکتهٔ اصلی
در آرایه، object و فراخوانی تابع، ... نقش spread دارد. در الگوی انتساب و فهرست پارامترها، همان نشانه نقش rest دارد. جای سه‌نقطه مهم‌تر از ظاهر یکسان آن است.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود