8 روش استفاده از اپراتور Spread در JavaScript

در این مقاله قصد دارم از spread operator ... که در es6 معرفی شده صحبت کنم. از انواع کاربردها و استفاده هایی که قرار هستش توی برنامه نویسی جاوا اسکریپت داشته باشیم توی این مقاله میگم خدمتتون.

1- استفاده در log کردن

برای log گرفتن از روی اشیایی قابل تکرار یا همون iterable objects استفاده میشه

let fruits = ['?', '?', '?', '?'];
console.log(...fruits); //? ? ? ?

2- برای کپی کردن آرایه ها و object

//Array
let fruits = ['?', '?', '?', '?'];
let fruitsCopy = [ ...fruits ]; 
console.log(...fruitsCopy); //? ? ? ?

//objects
let user = {name : &quotJohn&quot, age : 20 };
let userCopy = {...user}

راستی توی این مقاله مفصل درباره کپی کردن آرایه و object ها توی متغیرها صحبت کردم.

3- ادغام یا merge کردن دو یا بیشتر آرایه یا object در یک متغیر

//Array
let fruits = ['?', '?', '?', '?'];
let vegetables = ['?', '?', '?'];
let fruitsAndVeg = [...fruits, ...vegetables];

//objects
let user1 = {name : &quotJohn&quot, age : 20 };
let user2 = {name : &quotRam&quot, salary: '20K' };
let userCopy = {...user1, ...user2};
userCopy ; // {name : &quotRam&quot, age :20 , salary : '20K'};

نکته : هنگام ادغام objects، اگر یک key از قبل وجود داشته باشد ، آخرین شی با همان key جایگزین می شه.

4- برای ارسال arguments در یک متد

function sum(a, b) {
   return a+b;
}
let num = [1,2];
sum(...num); // 3

//متدهای ریاضی
let num = [5,9,3,5,7];
Math.min(...num);
Math.max(...num);

5- در Destructuring variable

//Array
let [melon, ...fruits ] = ['?', '?', '?', '?'];
melon; //? 
fruits; // [ '?', '?', '?']

//objects
let user = {name : &quotRam&quot, age: 20, salary: '20K', job : &quotTester&quot };
let { name, age, ...details } = user;
name; // Ram
age; // 20
details; // {salary: '20K', job : 'Tester'};

6- تبدیل NodeList Object به Array

let nodeList = document.querySelectorAll('.class')
var nodeArray = [...nodeList]

7- تبدیل رشته به کاراکتر

let name = &quotRam"
let chars = [...name];

8- موارد تکراری را از یک آرایه حذف کنید

let num = [1, 3, 1, 3, 3, 1];
let uniqueNum = [...new Set(num)];
uniqueNum; //[ 1, 3 ]

خب به انتهای این مقاله رسیدیم امیدوارم که این مقاله آموزشی مورد توجهتون قرار گرفته باشه.

ممنون از توجهتون :)