مسیر
/
JavaScript
JavaScript
/
برنامه‌ی درسی
/
حلقه‌های آرایه
حل

حلقه‌های آرایه در JavaScript

9 تمرین

درباره‌ی حلقه‌های آرایه

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

اینجا حالتی را بررسی می‌کنیم که نمی‌خواهید در این میان آرایه را تغییر دهید. برای تبدیل آرایه‌ها، به‌جای این صفحه مفهوم تبدیل آرایه را ببینید.

حلقه‌ی for

ابتدایی‌ترین و معمولاً بسیار سریع‌ترین راه برای پیمایش یک آرایه، استفاده از حلقه‌ی for است؛ مفهوم حلقه‌ی For را ببینید.

const numbers = [6.0221515, 10, 23];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
// => 6.0221515
// => 10
// => 23

حلقه‌ی for...of

وقتی می‌خواهید در هر تکرار مستقیماً با مقدار کار کنید و اصلاً به اندیس نیازی ندارید، می‌توانید از حلقه‌ی for...of استفاده کنید.

for...of مثل حلقه‌ی for پایه‌ای که بالا دیدیم کار می‌کند، اما به‌جای اینکه مجبور باشید در حلقه با اندیس به‌عنوان یک متغیر سر و کار داشته باشید، مقدار مستقیماً در اختیارتان قرار می‌گیرد.

const numbers = [6.0221515, 10, 23];

// Because re-assigning number inside the loop will be very
// confusing, disallowing that via const is preferable.
for (const number of numbers) {
  console.log(number);
}
// => 6.0221515
// => 10
// => 23

درست مثل حلقه‌های for معمولی، می‌توانید از continue استفاده کنید تا تکرار جاری را متوقف کنید و از break تا اجرای حلقه را کاملاً متوقف کنید.

JavaScript همچنین حلقه‌ی for...in را دارد که روی کلیدهای یک شیء پیمایش می‌کند. توجه به این نکته مهم است که for...of و for...in با یکدیگر قابل تعویض نیستند؛ برای جزئیات بیشتر مستندات MDN را ببینید.

متد forEach

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

forEach یک تابع برگشتی را به‌عنوان پارامتر می‌پذیرد. تابع برگشتی یک بار برای هر عنصر آرایه فراخوانی می‌شود.

const numbers = [6.0221515, 10, 23];

numbers.forEach((number) => console.log(number));
// => 6.0221515
// => 10
// => 23

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

  • مقدار تکرار جاری
  • اندیس تکرار جاری
  • کل آرایه
const numbers = [6.0221515, 10, 23];

function callback(number, index, fullArray) {
  console.log(number, index, fullArray);
}

numbers.forEach(callback);
// => 6.0221515 0 [ 6.0221515, 10, 23 ]
// => 10 1 [ 6.0221515, 10, 23 ]
// => 23 2 [ 6.0221515, 10, 23 ]

علاوه بر تابع برگشتی، forEach بافت this را که باید در تکرار استفاده شود، به‌عنوان پارامتر دوم اختیاری می‌پذیرد. نمونه‌ای را می‌توانید در بخش «Using thisArg» در MDN ببینید.

هنگام کار با forEach باید چند نکته را در نظر داشته باشید.

  • پس از شروع حلقه‌ی forEach راهی برای متوقف کردن تکرار وجود ندارد. دستورهای break و continue در این بافت وجود ندارند.
  • اگر پس از شروع حلقه آرایه را تغییر دهید، forEach رفتار عجیبی دارد. عنصرهایی که به انتهای آرایه اضافه می‌کنید نادیده گرفته می‌شوند، حذف عنصرها می‌تواند باعث پریده شدن عنصرهای دیگر شود و غیره. برای پرهیز از این دست مشکلات، هرگز آرایه‌ی اصلی را در تابع برگشتی تغییر ندهید.
  • مقدار بازگشتی خود متد forEach برابر با undefined است. به همین دلیل نمی‌توانید هیچ متد دیگری از آرایه را به انتهای آن زنجیره کنید.
  • اگر می‌خواهید کدتان را از نظر کارایی بهینه کنید، بهتر است به‌جای آن از for یا for...of استفاده کنید، چون هر دو حدود سه برابر سریع‌ترند.
ویرایش از طریق GitHub این پیوند در پنجره یا زبانه‌ی جدیدی باز می‌شود

حلقه‌های آرایه را یاد بگیرید