Re

Rest و Spread در JavaScript

9 تمرین

درباره‌ی Rest و Spread

JavaScript یک عملگر توکار ... دارد که کار کردن با تعداد نامشخصی از عناصر را آسان‌تر می‌کند. بسته به بافت، به آن «عملگر rest» یا «عملگر spread» می‌گویند.

عملگر rest

عنصر rest

وقتی ... در سمت چپ یک انتساب ظاهر می‌شود، به آن سه نقطه عملگر rest می‌گویند. به سه نقطه به همراه یک اسم متغیر، «عنصر rest» می‌گویند. این عنصر صفر یا چند مقدار را جمع می‌کند و آن‌ها را در یک آرایه ذخیره می‌کند.

const [a, b, ...everythingElse] = [0, 1, 1, 2, 3, 5, 8];

a;
// => 0
b;
// => 1
everythingElse;
// => [1, 2, 3, 5, 8]

توجه کنید که در JavaScript، برخلاف برخی زبان‌های دیگر، یک عنصر rest نمی‌تواند کامای انتهایی داشته باشد. این عنصر باید آخرین عنصر در یک انتساب ساختارشکنی باشد. مثال زیر یک SyntaxError پرتاب می‌کند:

const [...items, last] = [2, 4, 8, 16]

ویژگی rest

مشابه آرایه‌ها، از عملگر rest هم می‌توان برای جمع کردن یک یا چند ویژگی شیء و ذخیره‌ی آن‌ها در یک شیء واحد استفاده کرد.

const { street, ...address } = {
  street: 'Platz der Republik 1',
  postalCode: '11011',
  city: 'Berlin',
};

street;
// => 'Platz der Republik 1'

address;
// => {postalCode: '11011', city: 'Berlin'}

پارامتر rest

وقتی ... در تعریف یک تابع، کنار آخرین آرگومانش ظاهر می‌شود، به آن پارامتر، «پارامتر rest» می‌گویند. این پارامتر به تابع اجازه می‌دهد تعداد نامشخصی آرگومان را به شکل یک آرایه بپذیرد.

function concat(...strings) {
  return strings.join(' ');
}

concat('one');
// => 'one'

concat('one', 'two', 'three');
// => 'one two three'

spread

عنصر spread

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

const oneToFive = [1, 2, 3, 4, 5];
const oneToTen = [...oneToFive, 6, 7, 8, 9, 10];

oneToTen;
// => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const woow = ['A', ...oneToFive, 'B', 'C', 'D', 'E', ...oneToFive, 42];

woow;
// =>  ["A", 1, 2, 3, 4, 5, "B", "C", "D", "E", 1, 2, 3, 4, 5, 42]

ویژگی spread

مشابه آرایه‌ها، از عملگر spread هم می‌توان برای کپی کردن ویژگی‌ها از یک شیء به شیء دیگر استفاده کرد.

let address = {
  postalCode: '11011',
  city: 'Berlin',
};

address = { ...address, country: 'Germany' };
// => {
//   postalCode: '11011',
//   city: 'Berlin',
//   country: 'Germany',
// }
ویرایش از طریق GitHub این پیوند در پنجره یا زبانه‌ی جدیدی باز می‌شود

Rest و Spread را یاد بگیرید