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

عملگر Rest و Spread دو ویژگی جاوا اسکریپت هستند که در ES6 معرفی شده اند. آنها کاملاً متفاوت کار می کنند، اما سینتکس مشابه آنها (سه تا نقطه …) در هنگام کار با آنها برخی تصورات نادرست را به همراه دارد.

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

عملگر rest برای گروه بندی آرگومان های باقی مانده در توابع استفاده می شود.

از طرف دیگر عملگر spread برای تقسیم(پخش) گروهی از مقادیر در جاوا اسکریپت استفاده می شود.

تفاوت عملگرهای rest و spresd

مقالات پربازدید: کاتلین چیست؟ چرا باید زبان برنامه نویسی کاتلین را یاد بگیریم؟

The Rest Operator (عملگر Rest)

این عملگر برای دریافت همه یا باقی آرگومان ها در یک تابع به عنوان یک آرایه استفاده می شود. مثلا:

function printArgs(args) {
  console.log(args)
}

function printArgs(args) {

console.log(args)

}

مهم نیست آرگومان هایی که هنگام استفاده به این تابع ارسال می شوند، تنها آرگومان اول در نظر گرفته می شود. برای بدست آوردن آرگومان های بیشتر، اعلان تابع ممکن است حاوی چیزی مانند …args1, args2, args3 باشد، اما برای چه تعدای؟ رویکرد …args1, args2 برای توابعی که فقط به تعداد معینی آرگومان اهمیت می‌دهند عالی است، اما برای آرگومان‌های نامشخص، rest کار را آسان می‌کند.

به عنوان مثال:

function printArgs(args) {
  console.log(args)
  console.log(arguments)
}
printArgs(1, 2, 3, 4, 5)
// 1
// { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }

function printArgs(args) {

console.log(args)

console.log(arguments)

}

printArgs(1, 2, 3, 4, 5)

// 1

// { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }

همین تکه کد با عملگر rest:

function printArgs(...args) {
  console.log(args)
}
printArgs(1, 2, 3, 4, 5)
// [1, 2, 3, 4, 5]

function printArgs(...args) {

console.log(args)

}

printArgs(1, 2, 3, 4, 5)

// [1, 2, 3, 4, 5]

rest مفید تر از arguments است زیرا:

به شما امکان می دهد آرایه آرگومان ها را هر چه دوست دارید نام گذاری کنید (همانطور که در بالا دیدیم، args)
ان آرایه ای را برمی گرداند، در حالی که arguments یک شی هستند، بنابراین، روش های آرایه را می توان بر روی نتیجه rest‘sانجام داد.
در حالی که arguments ها همه آرگومان های تابع را دریافت می کنند، پس از انتخاب برخی از آرگومان ها، از rest می توان برای دریافت آرگومان های باقی مانده استفاده کرد.به عنوان مثال:

function printNumbers(firstNumber, secondNumber, ...remainingNumbers) {
  console.log(firstNumber)
  console.log(secondNumber)
  console.log(remainingNumbers)
}
printNumbers(1, 2, 3, 4, 5)
// 1
// 2
// [3, 4, 5]

function printNumbers(firstNumber, secondNumber, ...remainingNumbers) {

console.log(firstNumber)

console.log(secondNumber)

console.log(remainingNumbers)

}

printNumbers(1, 2, 3, 4, 5)

// 1

// 2

// [3, 4, 5]

توجه داشته باشید که عدد اول را می‌توان با args[0] نیز دریافت کرد، اما با rest ، می‌توانیم مقادیری را که می‌خواهیم درست از اعلان آرگومان‌ها انتخاب کنیم.

مطالب پربازدید:گریدل چیست ؟ و چگونه مشکل sync گریدل در اندروید استودیو را حل کنیم.

Spread Operator (عملگر spread)

این عملگر برای تقسیم (پخش)یک گروه از مقادیر استفاده می شود. این گروه می تواند یک رشته، آرایه یا شی باشد.

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

const str = "javascript"
const arr = ["javascript"]
console.log(str[0])
// j
console.log(arr[0])
// javascript

const str = "javascript"

const arr = ["javascript"]

console.log(str[0])

// j

console.log(arr[0])

// javascript

برای اشیا، نتیجه عملگر spread یک شی است زیرا اشیاء بر اساس ماهیت کلید-مقدار آنها هستند.

Array expressions

سینتکس:

const newArray = [...oldArray]

1	const newArray = [...oldArray]

برای مثال:

const oldArray = [3, 4, 5]
const newArray1 = [...oldArray]
console.log(newArray1)
// [3,4,5]
const newArray2 = [1, 2, ...oldArray]
console.log(newArray2)
// [1,2,3,4,5]

const oldArray = [3, 4, 5]

const newArray1 = [...oldArray]

console.log(newArray1)

// [3,4,5]

const newArray2 = [1, 2, ...oldArray]

console.log(newArray2)

// [1,2,3,4,5]

با توجه به موارد بالا، متوجه خواهید شد که چگونه مقادیر oldArray در آرایه های جدید پخش شده اند.

String expressions

سینتکس:

const strArray = [...string]

1	const strArray = [...string]

این شبیه به string.split است. مثلا:

const str = "javascript"
const strArray = [...str]
console.log(strArray)
// [ 'j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't' ]

const str = "javascript"

const strArray = [...str]

console.log(strArray)

// [ 'j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't' ]

Function expressions

سینتکس:

const result = fn(...stringOrArray)

1	const result = fn(...stringOrArray)

به عنوان مثال:

function add(a, b) {
  console.log(a + b)
}
const numbers = [5, 6]
add(...numbers)
// 11

function add(a, b) {

console.log(a + b)

}

const numbers = [5, 6]

add(...numbers)

// 11

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

Object expressions

سینتکس:

const newObj = { ...oldObj }

1	const newObj = { ...oldObj }

به عنوان مثال:

const oldObj = {
  lang: "javascript",
  score: 23,
}
const newObj1 = { ...oldObj }
console.log(newObj1)
// {lang: 'javascript', score: 23}
const newObj2 = { ...oldObj, short: "JS" }
console.log(newObj2)
// { lang: 'javascript', score: 23, short: 'JS' }
const newObj3 = { ...oldObj, score: 40 }
console.log(newObj3)
// { lang: 'javascript', score: 40 }

const oldObj = {

lang: "javascript",

score: 23,

}

const newObj1 = { ...oldObj }

console.log(newObj1)

// {lang: 'javascript', score: 23}

const newObj2 = { ...oldObj, short: "JS" }

console.log(newObj2)

// { lang: 'javascript', score: 23, short: 'JS' }

const newObj3 = { ...oldObj, score: 40 }

console.log(newObj3)

// { lang: 'javascript', score: 40 }

برای newObj1، می‌توانید ببینید که چگونه ویژگی‌های شی قدیمی پخش شده‌اند.

همچنین برای newObj2، می‌توانید ببینید که چگونه ویژگی‌های شی قدیمی پخش شده‌اند، و یک ویژگی short جدید اضافه شده است.

برای newObj3، می‌توانید ببینید که چگونه ویژگی‌های شی قدیمی پخش شده‌اند، و ویژگی score در همان زمان اصلاح شده است. توجه داشته باشید که اگر score:40 قبل از گسترش ویژگی های شی قدیمی اعلام شود، score:23 در اولویت خواهد بود.

عملگر spread به ویژه در عبارات آرایه و شی بسیار مفید در نظر گرفته می شود زیرا تغییر ناپذیری ( immutability) اشیاء جاوا اسکریپت را تضمین می کند.

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

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

سایر مقالات:

نحوه استایل دهی در کنسول

مفهوم event loop در جاوا اسکریپت

برای امتیاز به این نوشته کلیک کنید!

[کل: 2 میانگین: 5]

اشتراک‌گذاری

کلاس ها در کاتلین | آموزش مقدماتی کاتلین |درس نهم نوشته قبل

نحوی مدیریت null در کاتلین به چه صورتی می‌باشد | آموزش مقدماتی کاتلین | درس دهم نوشته بعد

علی فرجی

علی فرجی هستم، برنامه نویس جاوا اسکریپت و ریکت با بیش از 5 سال تجربه. من عاشق برنامه نویسیم و همیشه به دنبال یادگیری چیزهای جدید هستم.همچنین یکی از بنیانگذار های سایت کدایت ، یک سایت آموزش برنامه نویسی در حوزه جاوا اسکریپت، ریکت، اندروید و ... هستم. امیدوارم بتوانم با دانش و تجربه خود به سایر برنامه نویسان کمک کنم تا در این زمینه پیشرفت کنند.