for (تکرار به تعداد مشخص)حلقه for کدهای شما رو تا زمانی که یک شرط خاص غلط (false) بشه، پشت سر هم تکرار میکنه. اگر قبلاً با زبانهای جاوا یا C کار کرده باشی، ظاهر این حلقه برات کاملاً آشناست.
ساختار کلی یک حلقه for به این صورت هست:
for (initialization; condition; afterthought) {
// کدهایی که باید تکرار بشن
}
وقتی جاوااسکریپت به یک حلقه for میرسه، این مراحل رو به ترتیب قدمبهقدم اجرا میکنه:
مقداردهی اولیه (initialization): این بخش فقط یکبار در شروع حلقه اجرا میشه. معمولاً اینجا یک یا چند متغیر برای شمارش تعداد دورهای حلقه میسازیم (مثلاً let i = 0).
بررسی شرط (condition): قبل از اینکه کدهای داخل حلقه اجرا بشن، این شرط چک میشه. اگر درست (true) باشه، کدها اجرا میشن. اگر غلط (false) باشه، حلقه همینجا متوقف میشه و کامپیوتر میره سراغ خطهای بعدی برنامه. (اگر این بخش رو خالی بگذاری، سیستم فرض میکنه شرط همیشه درسته).
اجرای کدها (statement): کدهای داخل آکلواد اجرا میشن.
گام حرکت یا پساندازه (afterthought): بعد از اینکه کدهای داخل حلقه تموم شد، این تیکه کد اجرا میشه که معمولاً برای اضافه کردن به شمارنده است (مثلاً ++i).
بازگشت به قدم ۲: دوباره شرط بررسی میشه و این چرخه انقدر ادامه پیدا میکنه تا شرط غلط بشه.
فرض کن یک فرم HTML داری که کاربر میتونه چندین سبک موسیقی رو همزمان انتخاب کنه:
<form name="selectForm">
<label for="musicTypes">چندتا از سبکهای موسیقی زیر رو انتخاب کن و دکمه رو بزن:</label>
<select id="musicTypes" name="musicTypes" multiple>
<option selected>R&B</option>
<option>Jazz</option>
<option>Blues</option>
<option>New Age</option>
<option>Classical</option>
<option>Opera</option>
</select>
<button id="btn" type="button">چندتا انتخاب شده؟</button>
</form>
حالا میخوایم با جاوااسکریپت و یک حلقه for، تکتکِ گزینهها رو چک کنیم و ببینیم کاربر کلاً چندتا گزینه رو تیک زده:
function countSelected(selectObject) {
let numberSelected = 0; // یک شمارنده برای تعداد انتخابها
// حلقه از صفر شروع میشه و تا زمانی که به تعداد کل گزینهها برسه، یکییکی جلو میره
for (let i = 0; i < selectObject.options.length; i++) {
// اگر گزینه شماره i توسط کاربر انتخاب شده بود:
if (selectObject.options[i].selected) {
numberSelected++; // یکی به شمارنده اضافه کن
}
}
return numberSelected;
}
// وصل کردن تابع به دکمه سایت
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
const musicTypes = document.selectForm.musicTypes;
console.log(`شما ${countSelected(musicTypes)} گزینه را انتخاب کردهاید.`);
});
let i = 0: شمارنده حلقه از صفر (گزینه اول لیست) شروع میشه.
i < selectObject.options.length: حلقه تا زمانی ادامه پیدا میکنه که i از تعداد کل گزینههای منو کوچکتر باشه.
++i: هر بار که یک گزینه چک میشه، یکی به i اضافه میشه تا در دور بعدی گزینه بعدی بررسی بشه.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://developer.mozilla.org/en-US/docs/Web/JavaScript