نحوه کارکرد عملگرهای rest و spread در جاوا اسکریپت

نحوه کارکرد عملگرهای rest و spread در جاوا اسکریپت

نحوه کارکرد عملگرهای rest و spread در جاوا اسکریپت

What is the difference between Rest and Spread?

توسط : admin
در این آموزش درباره دو عملگرد پر کاربرد در که نسخه es6 معرفی شد میپردازیم .

 

عملگر Rest

این عملگرد تمام عناصر باقیمانده (از این رو  ، نام آن rest است ،که اشاره به  "بقیه عناصر ارایه"  دارد ) در یک آرایه را در یک مجموعه جدید جمع آوری میکند .منظور از عناصر باقیمانده چیست ؟ با یک مثال بیشتر متوجه خواهید شد :

var myName = ["Morteza" , "Reza" , "Ali"] ;
const [firstName , ...familyName] = myName ;
console.log(firstName); // Morteza ;
console.log(familyName); // [ "Reza" , "Ali"] ;

 

همانطور که در مثال بالا در خط 2 نشان داده شده است ، آن سه نقطه بقیه عناصر آرایه myName را در یک زیر مجموعه جدید جمع آوری کرده است .نام این عمل destructuring است که آرایه یا شیء را به قطعات کوچکتر می شکند.

destructuring با استفاده از پارامتر rest به ما کمک کرد تا آرایه مان را به یک پارامتر اصلی که  مستقیماً به نام firstname نامیده شد  و همچنین جمع آوری بقیه عناصر در آرایه دیگری به نام FamilyName  تقسیم کنیم . و در واقع  دستور زیر به این شکل شد :

firstName = Morteza 
...familyName =  [ "Reza" , "Ali"]

 

نحوه دریافت پارامتر ها به صورت rest ؟

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

function myData(...args){
console.log(args) ; // ["Morteza",35,"Front-End Developer"]
}
myData("Morteza",35,"Front-End Developer") ;

 

همانطور که در مثال بالا نشان داده شده است ، myData پارامترهایی را در args... دریافت کرد که این پارامتر ها به صورت جداگانه و هر کدام یک نوع داده متفاوت بودند (در این مثال رشته و عدد ) که توسط rest به صورت یک آرایه خواهد بود که شامل تمام آرگومان های ارسال شده توسط تابع  است.

 

عملگر Spread

این عملگر بر خلاف  Rest که پارامتر ها را در یک آرایه جمع می کند ، عملگر Spread عناصر جمع آوری شده را در عنصر واحد اضافه می کند. به مثال زیر توجه فرمایید :

var myName = ["Morteza" , "Reza" , "Ali"];
var newArr = [...myName ,"FrontEnd" , 35];
console.log(newArr) ; // ["Morteza" , "Reza" , "Ali" , "FrontEnd" , 35 ] ;

 

می توانید ببینید چه اتفاقی افتاده است؟

بله ، آرایه myName که توسط عملگرد spread درون آرایه جدید newArr که خود این آرایه شامل تعدادی عنصر است اضافه شده که نتیجه این عمل باعث میشود که عناصر آرایه myName درون آرایه جدید newArr باز شده و یک آرایه بزرگتر را تشکیل بدهند .

از این عملگرد می توان از آن برای کپی کردن یک آرایه در دیگری یا برای پیوند دادن دو آرایه به یکدیگر استفاده کرد.

 

نتیجه گیری 

Rest Parameter  تمام عناصر باقیمانده در یک آرایه را در یک آرایه دیگر جمع آوری  میکند .

Spread Operator  باز کردن عناصر جمع آوری شده مانند آرایه ها در یک عنصر واحد انجام میدهد .

 

 

 

نظرات :

در عرض چند دقیقه برای ایجاد حساب

کاربری خود اقدام کنید


اکنون حساب کاربری خود را ایجاد کنید!


ایجاد حساب کاربری

با ثبت نام در نیلوتک از آخرین بروز رسانی های آموزش ها و مقالات سایت مطلع شوید