foreach در جاوا اسکریپت – آموزش نحوه کار کرد به زبان ساده

حلقه foreach‎ در جاوا اسکریپت یکی از متدهای مهمی است که می‌توان آن را برای پیمایش عناصر آرایه‌‌ها به کار برد و عملیات خاصی را روی هر عنصر انجام داد. این متد جاوا اسکریپت دارای ویژگی‌های منحصربه‌فردی است که آن را از سایر روش‌های تکرار روی آرایه‌ها متمایز می‌کند. کار با متد foreach‎ بسیار جالب و قابل‌توجه است و به شدت به خوانایی کدهای ما کمک خواهد کرد.

در این مطلب از «مجله فرادرس» می‌خواهیم نحوه استفاده از متد foreach‎ در جاوا اسکریپت و شیوه عملکرد آن را با استفاده از نمونه‌ کدهای واقعی بررسی کنیم. همچنین متد foreach‎ و حلقه for در جاوا اسکریپت را باهم مقایسه خواهیم کرد تا بتوانیم بین آن‌ها بهتر تفاوت قائل شویم و بدانیم چه زمانی باید یکی از آن‌ها را بر دیگری ترجیح دهیم.

سینتکس foreach‎ در جاوا اسکریپت و پارامترهای آن

به عنوان یک پارامتر، foreach‎ تابع callback را می‌پذیرد و آن را برای هر ورودی در آرایه اجرا می‌کند. Callback به بیان ساده تابعی است که باید پس از پایان یافتن تابعی دیگر اجرا شود. این تابع فراخوانی سه آرگومان می‌گیرد و «سینتکس» (syntax) آن به صورت زیر است:

1forEach(callback(currentElement, index, arr), thisValue);

• «عنصر فعلی» (currentElement) -  ضروری است.
• «اندیس فعلی عنصر» (index) -  اختیاری است.
• «آرایه» (Arr)

در نهایت، پارامترthisValue که پارامتری اختیاری است و به عنوان مقدار در تابع callback استفاده خواهد شد.

فیلم آموزش رایگان جاوا اسکریپت JavaScript – سریع و آسان در 150 دقیقه در فرادرس

کلیک کنید

نحوه استفاده از متد foreach‎ در جاوا اسکریپت

برای درک متد foreach‎ در جاوا اسکریپت باید در عمل آن را بررسی کنیم. همان‌طور که در بالا به آن اشاره کردیم، می‌توان از این متد برای تکرار روی عناصر آرایه‌ها و اعمال تابع callback برای هر عنصر آن آرایه استفاده کنیم. در این بخش نحوه اعلان تابع callback مناسب و نحوه استفاده از هر یک از پارامترهای آن را توضیح خواهیم داد.

در نسخه‌های قبلی جاوا اسکریپت، قبل از نسخه ES6 جاوا اسکریپت، باید یک تابع callback به‌صورت زیر اعلان می‌شد:

1const ages = [20, 28, 19, 56];
2const newAges = [];
3
4ages.forEach(function (age) {
5	newAges.push(age + 5);
6});
7
8console.log(newAges); 
9// Output: [25, 33, 24, 61]

همچنین، این قابلیت وجود دارد که تابع callback را درجایی خارج از متد foreach‎ تعریف و با استفاده از سینتکس زیر آن را فراخوانی کرد:

1const ages = [20, 28, 19, 56];
2const newAges = [];
3
4ages.forEach(increaseAgeBy5);
5
6function increaseAgeBy5(age) {
7	newAges.push(age + 5);
8}
9
10console.log(newAges); 
11// Output: [25, 33, 24, 61]

هر دوی این‌ها، روش‌های بسیار خوانا و قابل‌ درکی برای استفاده از متد foreach‎ هستند. نکته قابل‌توجه اینجاست که این سینتکس حتی قابل ساده‌تر شدن هم است. از ES6 به بعد تابع callback را به‌صورت زیر فراخوانی می‌شود.

1const ages = [20, 28, 19, 56];
2const newAges = [];
3
4ages.forEach((age) => {
5	newAges.push(age + 5);
6});
7
8console.log(newAges); 
9

خروجی این قطعه کد به صورت زیر است:

(4) [25, 33, 24, 61]
0: 25
1: 33
2: 24
3: 61

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

1const ages = [20, 28, 19, 56];
2const newAges = [];
3
4ages.forEach((age) => newAges.push(age + 5));
5
6console.log(newAges); 
7// Output: [25, 33, 24, 61]

پارامتر اندیس یا index Parameter در foreach‎ برای چیست؟

شاخص یا اندیس پارامتری اختیاری است که می‌تواند برای ارزیابی موقعیت عنصری در آرایه اصلی استفاده شود. به عنوان مثال، می‌توانیم موقعیت و مقدار عنصر را با آن نمایش دهیم:

1const languages = ['C++', 'C#', 'JS', 'Python'];
2
3languages.forEach(function (languages, index) {
4	console.log(index + ': ' + languages);
5});

خروجی این قطعه کد به صورت شکل زیر است.

0: C++
1: C#
2: JS
3: Python

پارامتر آرایه یا array Parameter و نقش آن در متد foreach‎

پارامتر آرایه به خود آرایه اصلی ارجاع داده می‌شود. این هم پارامتری اختیاری برای متد foreach‎ در جاوا اسکریپت است که معمولاً به‌ندرت از آن استفاده می‌شود، زیرا از قبل به هر عنصر جداگانه دسترسی وجود دارد و می‌توان عملیات را روی آن‌ها اجرا کرد. اگر آن را به عنوان پارامتری ازconsole.log()‎ ارسال کنیم، کل آرایه یک بار برای هر عنصر در آرایه چاپ می‌شود. مثال زیر در این رابطه آورده شده است.

1const languages = ['C++', 'C#', 'JS', 'Python'];
2
3languages.forEach(function (languages, index, array) {
4	console.log(array);
5});

خروجی به صورت زیر است:

(4) ["C++", "C#", "JS", "Python"]
(4) ["C++", "C#", "JS", "Python"]
(4) ["C++", "C#", "JS", "Python"]
(4) ["C++", "C#", "JS", "Python"]

معرفی فیلم های آموزش جاوا اسکریپت

جاوا اسکریپت یکی از پرکاربردترین زبان‌های برنامه نویسی است که عمده کاربرد آن در وب و ساخت اپلیکیشن موبایل به حساب می‌آید. بازار جاوا اسکریپت روزبه‌روز داغ‌تر و نیاز سازمان‌ها به متخصصان این حوزه نیز هر روز افزایش پیدا می‌کند. به‌صورت کلی می‌توان گفت که با یادگیری زبان برنامه نویسی جاوا اسکریپت شرایط ورود به بازار کار تا حدود زیادی فراهم می‌شود.

برای این هدف در پلتفرم فرادرس دوره های آموزش جامع جاوا اسکریپت زیادی قرار داده شده‌اند که به‌صورت کاملاً کاربردی به آموزش این زبان محبوب می‌پردازند. دوره‌های آموزش جاوا اسکریپت فرادرس از سطع مقدماتی تا پیشرفته در این پلتفرم موجود هستند و علاقه‌مندان به این زبان می‌توانند از این آموزش‌ها بهره ببرند. در تصویر بالا تنها تعداد کمی از دوره‌های موجود در مجموعه آموزش جاوا اسکریپت تنها به عنوان نمونه آمده‌اند.

• برای مشاهده مجموعه‌ی کامل فیلم های آموزشی جاوا اسکریپت فرادرس + اینجا کلیک کنید.

مثال‌های رایج  از متد foreach‎ در جاوا اسکریپت

در این بخش به چند مثال جالب و قابل‌توجه از متد foreach‎ در جاوا اسکریپت می‌پردازیم. ما قرار است که اعمال حلقه روی عناصر آرایه‌ای از اشیاء و نحوه محاسبه مجموع تمام عناصر را در آرایه در قالب مثال‌هایی به صورت عملی ببینیم.

حلقه زدن در میان آرایه‌ای از اشیاء با متد foreach‎ در جاوا اسکریپت

رایج‌ترین کاربرد متد foreach‎ در جاوا اسکریپت چاپ هر عنصر یا برخی از فیلدهای آن‌ها از یک آرایه است، به مثال زیر در این رابطه توجه کنید:

1const students = [
2	{ firstName: 'Ali', lastName: 'Ahmadi' },
3	{ firstName: 'Zahra', lastName: 'Amini' },
4	{ firstName: 'Naser', lastName: 'Rasoli' },
5];
6
7students.forEach((student) => {
8	console.log(`${student.firstName} ${student.lastName}`);
9});