آموزش جاوا اسکریپت – حلقه های جاوا اسکریپت

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

تفاوت انواع حلقه های جاوا اسکریپت

حلقه ها (Loop) برای اجرا کردن دوباره و دوباره ی یک کد یکسان , تا جایی که شرط برقرار شود, استفاده می شود.

پشت این ایده ساده یک حلقه تکرار است که بصورت خودکار عملیات مشخص شده را برای ذخیره زمان و انرژی ما انجام می دهد.

حلقه های جاوا اسکریپت شامل پنج نوع مختلف هستند:

While : بلاک کد را تا زمانی که مقدار شرط برابر true شود, بصورت مکرر اجرا می کند.
Do…while : یکبار بلاک کد را داخل حلقه اجرا می کند; سپس شرط را بررسی می کند. اگر true نبود, دستور تا زمانی که شرط مشخص شده true شود ادامه می یابد.
For : حلقه را تا زمانی که شمارنده ما به مقدار عددی خاصی برسد, ادامه می دهد.
For…in : حلقه را از طریق خصوصیات (property) یک آبجکت اجرا می کند
For…of : حلقه را برای آبجکت های قابل بازگشت مثل آرایه ها, رشته ها و غیره اجرا می کند.

در بخش زیر با جزییات بیشتر دستورات هر یک از حلقه ها را بررسی می کنیم.

حلقه while در جاوا اسکریپت

حلقه while بلاک کد را بر اساس شرط تعیین شده تا زمانی که برابر true باشد, اجرا می کند. همین که شرط ما از حالت true خارج شود, حلقه می ایستد.

سینتکس کلی حلقه while در جاوا اسکریپت بصورت زیر است :

while(condition) {
    // Code to be executed
}

while(condition) {

// Code to be executed

}

مثال زیر یک حلقه را تا زمانی که متغییر i کمتر یا مساوی ۵ باشد. متغییر در هر بار اجرای حلقه یکی به آن اضافه می شود.

var i = 1;
while(i <= 5) {    
    document.write("<p>The number is " + i + "</p>");
    i++;
}

var i = 1;

while(i <= 5) {

document.write("The number is " + i + "");

i++;

}

نکته: دقت کنید که شرط مشخص شده شما در حلقه نهایتا باید false شود. در غیر اینصورت, حلقه هرگز متوقف نمی شود و یک حلقه بی نهایت ایجاد می شود که ممکن است باعث crash شدن مرورگر شما, کندی سیستم شود که در نهایت شاید مجبور به ریستارت سیستم شوید. یکی از اشتباهات معمول, فراموش کردن افزایش مقدار متغیر شمارشگر است (در اینجا همان i است)

حلقه do…while در جاوا اسکریپت

حلقه do-while نیز یک نوع حلقه while است, که شرط را در آخر حلقه تکرار ارزیابی می کند.

حلقه do-while یکبار بلاک کد را اجرا و سپس شرط را ارزیابی می کند. اگر شرط true بود, دستور تا جایی که شرط true باشد تکرار می شود.

سینتکس کلی حلقه do…while در جاوا اسکریپت بصورت زیر است :

do {
    // Code to be executed
}
while(condition);

do {

// Code to be executed

}

while(condition);

کد جاوا اسکریپت در مثال زیر یک حلقه با شروع i=1 را تعریف کرده است.سپس در خروجی متنی را چاپ می کند و مقدار i را افزایش می دهد.

سپس شرط ارزیابی می شود, و اگر مقدار i کمتر یا مساوی ۵ بود, حلقه به تکرار خود ادامه می دهد.

var i = 1;
do {
    document.write("<p>The number is " + i + "</p>");
    i++;
}
while(i <= 5);

var i = 1;

do {

document.write("The number is " + i + "");

i++;

}

while(i <= 5);

فرق بین while و do…while

حلقه while یک تفاوت مهم با حلقه do…while دارد.

با حلقه while , شرطی که باید ارزیابی شود, در اول حلقه تکرار تست می شود, بنابراین اگر مقدار شرطی برابر false باشد, حلقه به هیچ وجه اجرا نمی شود.

در حالی که حلقه do-while همیشه یکبار اجرا می شود حتی اگر مقدار شرط برابر false باشد, چرا که برخلاف حلقه while , شرط به جای اول در آخر حلقه ارزیابی می شود.

حلقه for در جاوا اسکریپت

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

for(initialization; condition; increment) {
    // Code to be executed
}

for(initialization; condition; increment) {

// Code to be executed

}

پارامترهای استفاده شده برای حلقه for معنای زیر را دارد:

Initialization : برای مشخص کردن متغییر شمارشگر استفاده می شود و قبل از اجرای کد داخل حلقه, یکبار بدون قید و شرط ارزیابی می شود.
Condition : در اول هر تکرار ارزیابی می شود. اگر true بود, دستورات حلقه اجرا می شود, اگر ارزیابی false بود, پس حلقه به پایان می رسد
Increment : شمارشگر حلقه را در هر بار اجرای حلقه با مقدار جدید بروزرسانی می کند.

مثال زیر یک حلقه را با i=1 شروع می کند. حلقه تا زمانی که متغییر i کوچکتر یا برابر ۵ بود ادامه می یابد. متغیر i در هربار اجرای حلقه یکی به آن اضافه می شود :

for(var i=1; i<=5; i++) {
    document.write("<p>The number is " + i + "</p>");
}

for(var i=1; i<=5; i++) {

document.write("The number is " + i + "");

}

حلقه for مخصوصا برای تکرار روی آرایه ها هم مفید است:

// An array with some elements
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Loop through all the elements in the array 
for(var i=0; i<fruits.length; i++) {
    document.write("<p>" + fruits[i] + "</p>");
}

// An array with some elements

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

// Loop through all the elements in the array

for(var i=0; i<fruits.length; i++) {

document.write("" + fruits[i] + "");

}

حلقه for..in در جاوا اسکریپت

حلقه for-in یک نوع خاص از حلقه است که روی خصوصیات object یا المان های آرایه تکرار را انجام می دهد

for(variable in object) {
    // Code to be executed
}

for(variable in object) {

// Code to be executed

}

شمارشگر حلقه (variable) در حلقه for-in یک رشته است نه شماره. که شامل نام خصوصیات آبجکت فعلی یا ایندکس المان آرایه فعلی است.

مثال زیر به شما نحوه تکرار روی تمام خصوصیات آبجکت جاوا اسکریپت را نشان می دهد :

// An object with some properties 
var person = {"name": "Clark", "surname": "Kent", "age": "36"};
 
// Loop through all the properties in the object  
for(var prop in person) {  
    document.write("<p>" + prop + " = " + person[prop] + "</p>"); 
}

// An object with some properties

var person = {"name": "Clark", "surname": "Kent", "age": "36"};

// Loop through all the properties in the object

for(var prop in person) {

document.write("" + prop + " = " + person[prop] + "");

}

مشابه مثال بالا, می توانید این حلقه را روی المان های یک آرایه بصورت زیر اجرا کنید:

// An array with some elements
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Loop through all the elements in the array 
for(var i in fruits) {  
    document.write("<p>" + fruits[i] + "</p>");
}

// An array with some elements

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

// Loop through all the elements in the array

for(var i in fruits) {

document.write("" + fruits[i] + "");

}

نکته: حلقه for-in نباید روی آرایه ای که ترتیب ایندکس آن مهم است اجرا شود. شما بهتر است از حلقه for برای ایندکس های عددی استفاده کنید.

حلقه for…of در جاوا اسکریپت

ES6 یک حلقه for-of جدید را برای اجرای تکرار روی آرایه ها یا دیگر آبجکت های قابل تکرار مثل رشته ها را بصورت بسیار ساده ارایه داده است.

مثال زیر به شما نحوه اجرای حلقه روی آرایه ها و رشته ها را نشان می دهد.

// Iterating over array
let letters = ["a", "b", "c", "d", "e", "f"];

for(let letter of letters) {
    console.log(letter); // a,b,c,d,e,f
}

// Iterating over string
let greet = "Hello World!";

for(let character of greet) {
    console.log(character); // H,e,l,l,o, ,W,o,r,l,d,!
}

// Iterating over array

let letters = ["a", "b", "c", "d", "e", "f"];

for(let letter of letters) {

console.log(letter); // a,b,c,d,e,f

}

// Iterating over string

let greet = "Hello World!";

for(let character of greet) {

console.log(character); // H,e,l,l,o, ,W,o,r,l,d,!

}

در مورد قابلیت های دیگر ES6 در بخش های بعدی یاد می گیریم.

نکته: حلقه for…of با آبجکت ها کار نمی کند چرا که قابل تکرار نیست. اگر می خواهید تکرار را روی خصوصیات یک آبجکت اجرا کنید, از حلقه for-in استفاده کنید.

امیدوارم از حلقه های جاوا اسکریپت نهایت استفاده را برده باشید.

در بخش بعدی با توابع جاوا اسکریپت آشنا می شوید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

آموزش جاوا اسکریپت – حلقه های جاوا اسکریپت

تفاوت انواع حلقه های جاوا اسکریپت

حلقه while در جاوا اسکریپت

حلقه do…while در جاوا اسکریپت

فرق بین while و do…while

حلقه for در جاوا اسکریپت

حلقه for..in در جاوا اسکریپت

حلقه for…of در جاوا اسکریپت

آموزش PHP – کار با حلقه ها در PHP

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

آموزش جاوا اسکریپت – اعتبارسنجی فرم در جاوا اسکریپت

آموزش جاوا اسکریپت – Regular Expression در جاوا اسکریپت ۲

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه