Rest در جاوا اسکریپت

در این نوشته، نحوه استفاده ازrest در جاوا اسکریپت (javascript) برای جمع آوری پارامترها و قرار دادن همه آنها در یک آرایه را یاد خواهیم گرفت. اگه علاقه مند به مشاهده محتوای ویدئویی هستید، ویدئو “ Rest در جاوا اسکریپت ” رو میتونید در چنل یوتیوبمون مشاهده کنید. فقط کافیه وی*ی انتون روشن باشه.

معرفی rest parameters در جاوا اسکریپت

ES6 یک نوع جدید از parameter که دارای prefix سه نقطه(…) است به نام rest parameter ارائه کرد.rest parameter به شما اجازه می دهد تا تعداد نامحدودی از arguments ها را به عنوان یک آرایه نشان دهید. syntax زیر را ببینید:

function fn(a,b,...args) {
   //...
}

function fn(a,b,...args) {

//...

}

آخرین پارامتر (args) داری پیشوند سه نقطه (…) است که rest parameter ( ...args) نامیده می شود.

تمام arguments هایی که به تابع پاس می دهید در لیست پارامترها نگاشته می شود. در syntax بالا ، اولین argument به a ، دومین مورد به b و سومین ، چهارمین و غیره درargs به عنوان آرایه ذخیره می شود.برای مثال :

fn(1, 2, 3, "A", "B", "C");

1	fn(1, 2, 3, "A", "B", "C");

آرایه args مقادیر زیر را در خود ذخیره می کنید:

[3,'A','B','C']

1	[3,'A','B','C']

اگر شما فقط دو پارامتر اولی را پاس بدهید، rest parameter یک آرایه خالی خواهد بود:

fn(1,2);

fn(1,2);

args به شکل زیر خواهد بود:

[]

[]

توجه داشته باشید که rest parameters باید در انتهای لیست argument ها قرار بگیرد.خروجی قطعه کد زیر error خواهد بود:

function fn(a,...rest, b) {
 // error
}

function fn(a,...rest, b) {

// error

}

Error:

SyntaxError: Rest parameter must be last formal parameter

1	SyntaxError: Rest parameter must be last formal parameter

مثال های بیشتر از rest parameters در جاوا اسکریپت

به مثال زیر دقت کنید:

function sum(...args) {
    let total = 0;
    for (const a of args) {
        total += a;
    }
    return total;
}

sum(1, 2, 3);

function sum(...args) {

let total = ;

for (const a of args) {

total += a;

}

return total;

}

sum(1, 2, 3);

خروجی قطعه کد بالا:

6

در این مثال ، args یک آرایه است و ما می توانیم از حلقه for..of برای تکرار عناصر و جمع بندی آنها استفاده کنیم.

فرض کنید در زمان فراخوانی تابع ()sum ممکن است arguments هایی با data types های مختلف مثل number, string, و boolean پاس داده شود و شما فقط قصد داشته باشید اعداد را جمع کنید:

function sum(...args) {
	return args
		.filter(function (e) {
			return typeof e === "number";
		})
		.reduce(function (prev, curr) {
			return prev + curr;
		});
}

function sum(...args) {

return args

.filter(function (e) {

return typeof e === "number";

})

.reduce(function (prev, curr) {

return prev + curr;

});

}

قطعه کد بالا فقط جمع arguments هایی که عدد هستند را محاسبه می کند.

پیاده سازی darkMode با دو خط کد جاوا اسکریپت

let result = sum(10,'Hi',null,undefined,20); 
console.log(result);

1 2	let result = sum(10,'Hi',null,undefined,20); console.log(result);

خروجی:

30

توجه داشته باشید که بدون rest parameters ، باید از arguments object تابع استفاده کنید.

با این حال ، arguments object از نوع Array نیست ، بنابراین نمی توانید مستقیماً از filter() method استفاده کنید. در ES5 ، شما باید از() Array.prototype.filter.call به شکل زیر استفاده کنید:

function sum() {
	return Array.prototype.filter
		.call(arguments, function (e) {
			return typeof e === "number";
		})
		.reduce(function (prev, curr) {
			return prev + curr;
		});
}

function sum() {

return Array.prototype.filter

.call(arguments, function (e) {

return typeof e === "number";

})

.reduce(function (prev, curr) {

return prev + curr;

});

}

همانطور که می بینید ، rest parameter کد را زیبا تر می کند. فرض کنید باید arguments ها را بر اساس یک type خاص مانند numbers، strings، boolean و null فیلتر کنید. تابع زیر به شما در انجام این کار کمک می کند:

function filterBy(type, ...args) {
	return args.filter(function (e) {
		return typeof e === type;
	});
}

function filterBy(type, ...args) {

return args.filter(function (e) {

return typeof e === type;

});

}

rest parameters و arrow function در جاوا اسکریپت

یک arrow function در واقع arguments object ندارد. بنابراین ، اگر می خواهید تعدادی arguments به arrow function پاس دهید، باید از rest parameters استفاده کنید. مثال زیر را ببینید:

const combine = (...args) => {
	return args.reduce(function (prev, curr) {
		return prev + " " + curr;
	});
};
let message = combine("JavaScript", "Rest", "Parameters"); // =>
console.log(message); // JavaScript Rest Parameters

const combine = (...args) => {

return args.reduce(function (prev, curr) {

return prev + " " + curr;

});

};

let message = combine("JavaScript", "Rest", "Parameters"); // =>

console.log(message); // JavaScript Rest Parameters

خروجی :

JavaScript Rest Parameters

1	JavaScript Rest Parameters

تابع () combine یک arrow function است که تعداد نامحدودی arguments می گیرد و آنها را بهم متصل می کند

rest parameter در توابع dynamic

جاوا اسکریپت به شما این امکان را می دهد که توابع پویا از طریق Function constructor ایجاد کنید. و ممکن است از rest parameter در یک تابع پویا استفاده شود. به عنوان مثال:

var showNumbers = new Function('...numbers', 'console.log(numbers)');
showNumbers(1, 2, 3);

1 2	var showNumbers = new Function('...numbers', 'console.log(numbers)'); showNumbers(1, 2, 3);

خروجی:

[ 1, 2, 3 ]

1	[ 1, 2, 3 ]

Rest در جاوا اسکریپت

معرفی rest parameters در جاوا اسکریپت

مثال های بیشتر از rest parameters در جاوا اسکریپت

rest parameters و arrow function در جاوا اسکریپت

rest parameter در توابع dynamic

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

معرفی rest parameters در جاوا اسکریپت

مثال های بیشتر از rest parameters در جاوا اسکریپت

rest parameters و arrow function در جاوا اسکریپت

rest parameter در توابع dynamic

مطالب زیر را حتما مطالعه کنید

Reflection در جاوا اسکریپت

Proxy در جاوا اسکریپت

()includes در جاوا اسکریپت

endsWith در جاوا اسکریپت

startsWith در جاوا اسکریپت

()Object.is در جاوا اسکریپت

دیدگاهتان را بنویسید لغو پاسخ