آموزش عملگر ES6 Spread

آموزش کار با عملگر Spread Operator در ES6:

زبان ES6 یک عمگر جدید به نام Spread Operator معرفی کرده است (معرفی تحت اللفظی آن در فارسی به معنی گسترش است) که از 3 (...) تشکیل شده است. این عملگر به متغیرهای چند مقداری (مثل آرایه یا object که اصطلاحا iterable نامیده می شوند) اجازه می دهد تا در جاهایی که بیشتر از یک متغیر به عنوان پارامتر ارسال می شود، باز شده و مقادیر خود را وارد کنند. به بیان دیگر عملگر Spread به ما امکان می دهد تا پارامترهای ورودی یک تابع را از متغیری مثل آرایه Array دریافت کنیم.
ساختار دستوری عملگر Spread Operator کاملا شبیه پارامتر rest است، اما عملکردی مخالف آن دارد. اجازه بدید ساختار دستوری، نحوه استفاده و کاربرد عملگر Spread را با چند مثال نشان بدهیم.
ساختار دستوری استفاده از عمگر Spread به صورت زیر است:

var variablename1 = [...value];  
            

3 نقطه (...) در کد فوق همان عملگر Spread است که کلیه مقادیر موجود در متغیر Value را نشان خواهد داد و در کد وارد می کند.
در ادامه استفاده از عملگر Spread را در چند سناریو مختلف نشان داده ایم.

عملگر Spread و کار با آرایه Array:

در این بخش آموزش می دهیم چگونه یک متغیر آرایه (Array) را با استفاده از عملگر Spread به کار برده و مدیریت کنید.

آموزش ساخت آرایه با عملگر Spread:

در هنگام ایجاد و مقداردهی یک آرایه (Array)، عملگر Spread به ما امکان می دهد تا یک آرایه دیگر را درون یک آرایه مقداردهی شده وارد کنیم. به مثال زیر دقت کنید، آرایه Colors را به وسیله عملگر Spread درون آرایه newColors تزریق کرده و در خروجی چاپ کرده ایم:

let colors = ['Red', 'Yellow'];  
let newColors = [...colors, 'Violet', 'Orange', 'Green'];  
console.log(newColors);  
            

خروجی کد :

[ 'Red', 'Yellow', 'Violet', 'Orange', 'Green' ]
            

پیوند دادن دو آرایه به هم با عملگر Spread:

از عملگر Spread می توان برای پیوند دادن دو یا چند آرایه نیز استفاده کرد.
مثال عملی: در کد مثال زیر، دو آرایه colors و newColors را با هم ترکیب کرده و آرایه جدید را در خروجی چاپ کرده ایم:

let colors = ['Red', 'Yellow'];  
let newColors = [...colors, 'Violet', 'Orange', 'Green'];  
console.log(newColors);  
            

خروجی کد :

[ 'Red', 'Yellow', 'Violet', 'Orange', 'Green' ]
            

آموزش کپی کردن آرایه با عملگر Spread:

می توانید با استفاده از عملگر Spread، یک آرایه را درون آرایه دیگری کپی نمایید.
مثال عملی: در کد مثال عملی زیر، آرایه colors را در آرایه newColors کپی کرده و مقدار آن را در خروجی نشان داده ایم:

let colors = ['Red', 'Yellow'];  
let newColors = [...colors];  
console.log(newColors);   
            

خروجی کد :

[ 'Red', 'Yellow' ]
            

اگر المنت های یک آرایه را بدون استفاده از عملگر Spread در یک آرایه دیگر کپی کنید، در صورت اضافه کردن یک عضو جدید به آرایه کپی شده، آرایه اولیه نیز تغییر می کند.
اما اگر المنت های یک آرایه را با استفاده از عملگر Spread در یک آرایه دیگر کپی کنید، در صورت اضافه کردن یک عضو جدید به آرایه کپی شده، آرایه اولیه تغییری نکرده و ثابت می ماند. مطالب بالا را با ارائه یک مثال عملی تشریح می کنیم.
مثال عملی: در کد زیر، آرایه Colors را بدون استفاده از عملگر Spread درون آرایه newColors کپی کرده ایم. همانطور که در خروجی مشاهده می کنید، پس از اینکه عضو جدید “Green” را به آرایه newColors اضافه کردیم، آرایه اول متغیر Colors نیز تغییر کرده و “Green” به آن هم اضافه شده است:

let colors = ['Red', 'Yellow'];  
let newColors = colors;  
newColors.push('Green');  
console.log(newColors);  
console.log(colors);  
            

خروجی کد :

[ 'Red', 'Yellow', 'Green' ]
[ 'Red', 'Yellow', 'Green' ]
            

مثال عملی 2: اما در کد مثال زیر، آرایه Colors را با استفاده از عملگر Spread در آرایه newColors کپی کرده ایم. باز همانطور که در خروجی مشخص است، اضافه کردن عضو جدید “Green” به آرایه newColors باعث تغییر در آرایه Colors نشده و این آرایه ثابت مانده است.

let colors = ['Red', 'Yellow'];  
let newColors = [...colors];  
newColors.push('Green');  
console.log(newColors);  
console.log(colors);   
            

خروجی کد :

[ 'Red', 'Yellow', 'Green' ]
[ 'Red', 'Yellow' ]
            

عملگر Spread بر روی رشته های متنی String:

در این بخش نشان می دهیم عملگر Spread چگونه باعث گسترش رشته های متنی String می شود. در مثال زیر نحوه کار آموزش داده شده است.
مثال عملی: در کد مثال زیر، آرایه str را با 3 متغیر مجزای متنی String ایجاد کرده ایم:

let str = ['A', ...'EIO', 'U'];  
console.log(str);  
            

در کد مثال فوق، عملگر Spread را بر روی متغیر رشته ای ‘EIO’ اعمال کرده ایم. این عملگر متغیر ‘EIO’ را به کاراکترهای تشکیل دهنده آن تقسیم کرده و هرکدام را به عنوان یک عضو جدید در خروجی آرایه نشان داده است:

[ 'A', 'E', 'I', 'O', 'U' ]