آموزش متد forEach در جاوا اسکریپت

هنگام کار با آرایه‌ها، مواردی و وظایفی وجود دارد که باید هر مقدار را در آرایه پیمایش کرد که اینجاست متد forEach در جاوا اسکریپت اهمیت خاص خود را پیدا می‌کند. یادگیری این متد یکی از سرفصل‌های مهم در آموزش جاوا اسکریپت بوده و تسلط به آن برای هر برنامه‌نویس جاوا اسکریپتی لازم و ضروری است.

زبان برنامه نویسی جاوا اسکریپت چندین روش برای پیمایش عناصر از طریق آرایه‌ها از جمله متد یا حلقه forEach ارائه می‌کند. در حالی که این روش‌ها عملکردهای مشابهی دارند، ممکن است تغییرات جزئی داشته باشند. انتخاب بهترین روش در نهایت به ترجیح شما بستگی دارد، اما درک نحوه عملکرد هر یک ضروری است.

در این مطلب از مجله سبزلرن، نحوه استفاده از متد forEach در جاوا اسکریپت (forEach in JavaScript) برای پیمایش انواع مختلف آرایه‌ها و همچنین درک تفاوت‌های آن در مقایسه با استفاده از حلقه for را بررسی خواهیم کرد.

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

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

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

array.forEach(callback(element, index, arr), thisValue);

این متد پنج پارامتر را می‌پذیرد:

• callback

این تابعی است که برای هر عنصر آرایه فراخوانی می‌شود.

• element

مقدار عنصر فعلی در حال پردازش را نشان می‌دهد.

• index

پارامتر اختیاری که نشان‌دهنده اندیس عنصر فعلی در آرایه است که از 0 شروع می‌شود.

• array

پارامتر اختیاری شامل کل آرایه‌ای است که بر روی آن forEach فراخوانی می‌شود.

• thisArg

پارامتر اختیاری که نمایانگر مقداری است که باید به عنوان this در هنگام اجرای تابع تماس مجدد استفاده شود. در صورت ارائه، به عنوان this برای هر فراخوانی تابع برگشت استفاده می‌شود. در غیر این صورت، undefined به طور پیش‌فرض استفاده می‌شود.

ارزش برگشتی متد forEach همیشه تعریف نشده است. این متد لزوماً آرایه اصلی را تغییر نمی‌دهد، زیرا به عملکرد تابع callback ارائه شده بستگی دارد.

سینتکس و پارامترهای متد forEach در Javascript

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

1 | فقط از تابع پاسخ به تماس (CallbackFunction) استفاده کنید:

 array.forEach(CallbackFunction);

2 | استفاده از تابع callback و مقدار مشخص شده this:

 array.forEach(CallbackFunction, thisValue);

تابع callback در forEach می‌تواند تا سه آرگومان را بگیرد، اما همه آن‌ها اجباری نیستند. در ادامه نمونه هایی از استفاده از forEach با دستور معمولی و ES6 برای اعلان تابع callback آورده شده است:

فقط با استفاده از عنصر فعلی:

 array.forEach((currentElement) => { /* ... */ })

استفاده از عنصر جاری و اندیس آن:

 array.forEach((currentElement، index) => { /* ... */ })

استفاده از عنصر فعلی، اندیس و خود آرایه:

 array.forEach((currentElement، index، array) => { /* ... */ })

استفاده از تمام پارامترها با مقدار this مشخص شده:

 array.forEach((currentElement، index، array) => { /* ... */ }، thisValue)

ممکن است پارامترها بسیار زیاد به نظر برسند اما به شما امکان می‌دهند حلقه forEach را بر اساس نیاز خود سفارشی کنید. در توضیحات زیر آنچه هر پارامتر انجام می‌دهد آورده شده است:

callbackFunction : این تابع برای هر عنصر آرایه یک بار اجرا می‌شود. می‌تواند از آرگومان‌های زیر استفاده کند:

• currentElement

نشان‌دهنده عنصر فعلی در حال پردازش است.

• index

پارامتر اختیاری نشان‌دهنده شاخص عنصر فعلی.

• array

پارامتر اختیاری که آرایه ارسال شده به forEach را برمی‌گرداند.

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

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

مثال‌هایی از حلقه forEach در جاوا اسکریپت

قبل از اینکه به بررسی مثال‌های متفاوتی از حلقه forEach در Javascript بپردازیم بیایید به همه آرگومان‌هایی که در تابع callback ارسال می‌شوند با جزئیات بیشتری نگاهی بیندازیم.

نحوه استفاده از آرگومان currentElement

برای نشان دادن نحوه استفاده از آرگومان currentElement در متد forEach، بیایید آرایه‌ای حاوی جزئیات کارمند مانند نام، سن، حقوق و ارز را در نظر بگیریم:

const staffsDetails = [
 { name: "Jam Josh", age: 44, salary: 4000, currency: "USD" },
 { name: "Justina Kap", age: 34, salary: 3000, currency: "USD" },
 { name: "Chris Colt", age: 37, salary: 3700, currency: "USD" },
 { name: "Jane Doe", age: 24, salary: 4200, currency: "USD" }
];

فرض کنید قصد داریم نام هر کارمند را به صورت جداگانه همراه با متنی توصیفی نمایش دهیم. ما می‌توانیم با استفاده از متد forEach همان‌طور که در زیر نشان داده شده است به این هدف برسیم:

staffsDetails.forEach((staffDetail) => {
 let sentence = `I am ${staffDetail.name}, a staff of Royal Suites.`;
 console.log(sentence);
});

این کد خروجی زیر را تولید می‌کند:

"I am Jam Josh, a staff of Royal Suites."
"I am Justina Kap, a staff of Royal Suites."
"I am Chris Colt, a staff of Royal Suites."
"I am Jane Doe, a staff of Royal Suites."

در این مثال، حلقه forEach روی جزئیات هر کارمند پیمایشی انجام داده و جمله‌ای ایجاد خواهد کرد که نام آن‌ها را در یک رشته از پیش تعریف‌شده ترکیب می‌کند.

از طرف دیگر، اگر currentElement یک شی حاوی جفت‌های کلید/مقدار باشد، می‌توانیم آن را در حلقه forEach تخریب کنیم. بیایید این مسئله را با استفاده از مثال قبلی نشان دهیم:

staffsDetails.forEach(({ name }, index) => {
 let sentence = `I am ${name}, a staff of Royal Suites.`;
 console.log(sentence);
});

این رویکرد به ما امکان می‌دهد مستقیماً به ویژگی name هر شیء کارمند دسترسی داشته باشیم. خروجی حاصل مانند قبل خواهد بود و نام هر کارمند در رشته متنی خروجی گنجانده شده است.

نحوه استفاده از آرگومان index

همچنین می‌توانیم اندیس هر آیتم در آرایه را با استفاده از آرگومان اندیس داخلی بازیابی کنیم. در مثال زیر نحوه ادغام آن در حلقه forEach در جاوا اسکریپت آمده است:

staffsDetails.forEach((staffDetail, index) => {
 let sentence = `index ${index} : I am ${staffDetail.name}, a staff of Royal Suites.`;
 console.log(sentence);
});

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

"index 0 : I am Jam Josh a staff of Royal Suites."
"index 1 : I am Justina Kap a staff of Royal Suites."
"index 2 : I am Chris Colt a staff of Royal Suites."
"index 3 : I am Jane Doe a staff of Royal Suites."

نحوه استفاده از آرگومان array

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

staffsDetails.forEach((staffDetail, index, array) => {
 console.log(array);
});

از آنجایی که ما چهار آیتم در آرایه داریم و عمل تکرار یا پیمایش چهار بار اجرا می‌شود، این کد کل آرایه را چهار بار پیمایش کرده و به ما خروجی می‌دهد. بیایید این کار را با یک آرایه کوچک‌تر نشان دهیم و خروجی را ببینیم:

let scores = [12, 55, 70];
scores.forEach((score, index, array) => {
 console.log(array);
});

خروجی مثال فوق به صورت زیر است:

[12, 55, 70]
[12, 55, 70]
[12, 55, 70]

تا به اینجای مطلب هر آرگومان تابع callback را توضیح داده و از آن استفاده کردیم. اکنون، بیایید مثال‌های بیشتری را بررسی کنیم تا به طور کامل نحوه عملکرد forEach در جاوا اسکریپت را قبل از مقایسه آن با حلقه سنتی برای پیمایش آرایه درک کنیم.

نحوه اضافه کردن تمام مقادیر در آرایه‌ای از اعداد با forEach در جاوا اسکریپت

فرض کنید یک آرایه حاوی چندین عدد به عنوان امتیازات کارمندان داریم و می‌خواهیم همه اعداد را با استفاده از متد forEach جمع کنیم. این کار به صورت زیر قابل انجام است:

const scores = [12, 55, 70, 47];
let total = 0;
scores.forEach((score) => {
 total += score;
});

console.log(total); // Output: 184

قبلاً از مجموعه‌ای از جزئیات کارکنان استفاده می‌کردیم. اکنون، بیایید سعی کنیم تمام حقوق کارکنان را جمع‌بندی کنیم تا بفهمیم چگونه با اشیا کار می‌کند:

let totalSalary = 0;
staffsDetails.forEach(({salary}) => {
 totalSalary += salary;
});

console.log(totalSalary + " USD"); // Output: "14900 USD"

در این مثال، ما از ساختار تخریب شی برای دسترسی مستقیم به ویژگی حقوق استفاده کردیم.

نحوه استفاده از Conditional ها در تابع Callback

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

به عنوان مثال، فرض کنید مجموعه‌ای از جزئیات کارکنان داریم و می‌خواهیم نام افرادی را که حقوقشان 4000 دلار یا بیشتر است را نمایش دهیم:

staffsDetails.forEach(({name, salary}) => {
 if(salary >= 4000){
 console.log(name);
 }
});

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

"Jam Josh"
"Jane Doe"

در این مثال، ما فقط نام کارکنانی را چاپ می‌کنیم که حقوق آن‌ها دارای شرایط مشخص شده است.

دو مثال ساده از متد forEach در جاوا اسکریپت

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

// Define a function named func
function func() {

// Define the original array
 const items = [12, 24, 36];

// Create an empty array to store the copied elements
 const copy = [];

// Use forEach() method to iterate over each element in the 'items' array
 items.forEach(function (item) {

// Perform an operation on each element and push the result to the 'copy' array
 copy.push(item + item + 2);
 });

// Output the 'copy' array
 console.log(copy);
}

// Call the function
func();

توضیحات کدهای بالا به صورت زیر است:

در مرحله اول ما تابعی به نام func تعریف می‌کنیم.

function func() {

در داخل تابع، آرایه اصلی با نام items را با عناصر [12، 24، 36] ایجاد می‌کنیم.

 const items = [12, 24, 36];

در مرحله بعد یک آرایه خالی به نام copy ایجاد کرده تا عناصر کپی شده را ذخیره کنیم.

 const copy = [];

متد forEach در جاوا اسکریپت برای پیمایش روی هر عنصر در آرایه items استفاده می‌شود. در متد forEach، یک تابع ناشناس با یک پارامتر (item) تعریف می‌کنیم که هر عنصر آرایه را در طول پیمایش نشان می‌دهد.

items.forEach(function (item) {
 copy.push(item + item + 2);
 });

در داخل تابع ناشناس، روی هر عنصر یک عملیات انجام می‌دهیم (المان را به خودش اضافه می‌کنیم و سپس 2 را اضافه می‌کنیم) و نتیجه را به آرایه copy انتقال می‌دهیم. در نهایت آرایه copy را به کنسول خروجی می‌دهیم. خروجی به صورت زیر خواهد بود:

[26، 50، 74]

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

در مثال دوم از متد forEach در جاوا اسکریپت برای محاسبه مربع هر عنصر در آرایه استفاده می‌کنیم.

// Define a function named func
function func() {

// Define the original array
 const items = [1, 29, 47];

// Create an empty array to store the calculated squares
 const copy = [];

// Use forEach() method to iterate over each element in the 'items' array
 items.forEach(function (item) {

// Calculate the square of each element and push the result to the 'copy' array
 copy.push(item * item);
 });

// Output the 'copy' array
 console.log(copy);
}

// Call the function
func();

توضیحات مثال فوق نیز به صورت زیر است:

تابعی به نام func تعریف می‌کنیم.

function func() {

در داخل تابع، آرایه اصلی به نام items را با عناصر [1، 29، 47] ایجاد می‌کنیم.

 const items = [1, 29, 47];

برای ذخیره مربع‌های محاسبه شده یک آرایه خالی به نام copy ایجاد می‌کنیم.

 const copy = [];

متد forEach در جاوا اسکریپت برای پیمایش روی هر عنصر در آرایه items استفاده می‌شود. در متد forEach، یک تابع ناشناس با یک پارامتر (item) تعریف می‌کنیم که هر عنصر آرایه را در طول پیمایش نشان می‌دهد.

 items.forEach(function (item) {
 copy.push(item * item);
 });

در داخل تابع ناشناس، مربع هر عنصر را محاسبه می‌کنیم (عنصر را در خودش ضرب می‌کنیم) و نتیجه را به آرایه copy انتقال می‌دهیم. در نهایت آرایه copy را به کنسول خروجی می‌دهیم که خروجی آن مانند زیر است:

[ 1, 841, 2209 ]

این خروجی آرایه حاصل را پس از محاسبه مربع هر عنصر در آرایه اصلی و ذخیره آن‌ها در آرایه جدید نشان می‌دهد.

تفاوت for و foreach در جاوا اسکریپت

متد forEach در جاوا اسکریپت و حلقه for سنتی کاملاً مشابه هستند اما هر کدام ویژگی‌های منحصربه‌فردی دارند. یکی از تفاوت‌های کلیدی در توانایی آن‌ها برای مدیریت عبارات break و continue در حلقه نهفته است.

در یک حلقه for، می‌توانیم از break برای خروج زودهنگام از حلقه استفاده کنیم یا به پیمایش بعدی پرش کنیم. با این حال، این دستورالعمل‌ها در متد forEach کار نمی‌کنند. بیایید این مسئله را با مثال‌هایی نشان دهیم:

const scores = [12, 55, 70, 47];

scores.forEach((score) => {
 console.log(score);

 if (score === 70)
 break; // This will throw a syntax error
});

تلاش برای استفاده از break در حلقه forEach منجر به خطای نحوی می‌شود که نشان می‌دهد مجاز نیست. به طور مشابه، استفاده از continue در حلقه forEach در جاوا اسکریپت نیز منجر به یک خطا می‌شود:

const scores = [12, 55, 70, 47];

scores.forEach((score) => {
 if (score === 70)
 continue; // This will throw a syntax error
 console.log(score);
});

با این حال، این دستورات break و continue در یک حلقه for سنتی کاملاً بدون مشکل کار می‌کنند. طبق دو مثال زیر:

const scores = [12, 55, 70, 47];

for (let i = 0; i < scores.length; i++) {
 console.log(scores[i]);

 if (scores[i] === 70)
 break;
}

خروجی:

12
55
70

و به طور مشابه با دستورالعمل continue:

const scores = [12, 55, 70, 47];

for (let i = 0; i < scores.length; i++) {
 if (scores[i] === 70)
 continue;

 console.log(scores[i]);
}

خروجی:

12
55
47

به طور خلاصه، در حالی که forEach در جاوا اسکریپت برای پیمایش روی آرایه‌ها روشی راحت است، اما فاقد توانایی استفاده از دستورات break و continue است که می‌تواند در موقعیت‌های خاص ضروری باشد. در چنین مواردی، حلقه for سنتی انتخاب بهتری خواهد بود.

مقایسه forEach با حلقه for در کار با آرایه با عناصر گمشده

یک مقایسه مهم دو حلقه نام برده هنگام برخورد با آرایه‌های حاوی عناصر از دست رفته رخ می‌دهد. این سناریو ممکن است به دلیل عدم نظارت توسعه‌دهنده یا دلایل دیگر رخ دهد که مدیریت این آرایه‌ها بین حلقه for و متد forEach متفاوت است. در حلقه for، عناصر گمشده به صورت تعریف نشده نشان داده می‌شوند، در حالی که متد forEach در جاوا اسکریپت به سادگی از آن‌ها عبور می‌کند. بیایید این را با مثال‌هایی توضیح دهیم:

برای حلقه for:

const studentsScores = [70, , 12, 55, , 70, 47];

for (let i = 0; i < studentsScores.length; i++) {
 console.log(studentsScores[i]);
}

خروجی:

70
undefined
12
55
undefined
70
47

برای حلقه forEach:

const studentsScores = [70, , 12, 55, , 70, 47];

studentsScores.forEach((studentScore) => {
 console.log(studentScore);
});

خروجی:

70
12
55
70
47

همچنین توجه به این نکته مهم است که عملکرد async/await در جاوا اسکریپت با متد forEach کار نمی‌کند اما با متد حلقه for به صورت یکپارچه عمل می‌کند.

یادگیری جاوا اسکریپت با رویکردی متفاوت

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

کار با متد forEach فقط یکی از مباحث مهم در یادگیری جاوا اسکریپت است. اگر می‌خواهید که به همه مباحث جاوا اسکریپت مسلط شوید و این زبان را به صورت کاملاً حرفه‌ای یاد بگیرید، پیشنهاد ما به شما شرکت در دوره آموزش صفر را صد جاوا اسکریپت سبزلرن است. در این دوره آموزشی شما به صورت صفر تا صد به تمامی جنبه‌های جاوا اسکریپت، کار با کتابخانه و فریمورک‌های آن و غیره آشنا خواهید شد و در پایان می‌توانید به صورت کاملاً کاربردی پروژه‌های مختلفی را اجرا کرده و وارد بازار کار شوید. در کنار همه این‌ها شما در تمام مراحل یادگیری از پشتیبانی اساتید بهره‌مند خواهید شد.