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

آخرین به‌روزرسانی: ۱۷ اردیبهشت ۱۴۰۱
زمان مطالعه: ۶ دقیقه

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

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

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

for(var i = initial value; i < array.length; i++) {
       array[i]}

اکنون با استفاده از ساختار مبنای فوق روی یک آرایه می‌چرخیم.

anArray = [1, 3, 5, 6];
for(let i = 0; i < anArray.length; i++) {
    console.log(anArray[i])
}
Output:
1
3
5
6 

همچنین می‌توانیم با استفاده از حلقه for جاوا اسکریپت روی هر کدام از آیتم‌های این آرایه، کاری انجام دهیم.

anArray = [1, 3, 5, 6];
for(let i = 0; i < anArray.length; i++) {
    console.log("5", "x", anArray[i], "=", anArray[i] * 5)
}
Output:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

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

anArray = [1, 3, 5, 6];
for(let i = anArray.length-1; i > = 0; i--) {
    console.log("5", "x", anArray[i], "=", anArray[i]*5)
}
Output:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5

منطق پشت کد فوق چندان دور از ذهن نیست. اندیس‌های آرایه از صفر آغاز می‌شوند. از این رو با فراخوانی کردن anArray[i] به طور معمول از اندیس صفر تا سه حرکت می‌کنیم، چون آرایه فوق شامل چهار آیتم است.

بدین ترتیب با کسر کردن یک واحد از طول آرایه و تعیین شرط به صورت بزرگ‌تر یا مساوی صفر بودن می‌توان یک حلقه کاهشی در جاوا اسکریپت تعریف کرد. توجه داشته باشید که اندیس یک آرایه در جاوا اسکریپت همواره یک واحد از طول آرایه کمتر است. از این رو شرط i >= 0 موجب می‌شود که چرخش حلقه روی آخرین آیتم آرایه متوقف شود.

مطلب پیشنهادی مجله فرادرس برای مطالعه:

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

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

ساختار کلی حلقه forEach در جاوا اسکریپت به صورت زیر است.

array.forEach(element => {
    action
})

برای این که با طرز کار عملی آن آشنا شوید، به مثال زیر توجه کنید.

let anArray = [1, 3, 5, 6];
anArray.forEach(x => {
    console.log(x)
});
Output:
1
3
5
6 

با استفاده از مثال فوق یک عملیات ساده ریاضی روی هر آیتم آرایه اجرا می‌کنیم که مشابه مثال قبلی است.

let anArray = [1, 3, 5, 6];
anArray.forEach(x => {
    console.log("5", "x", x, "=", x * 5)
});
Output:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

فیلم آموزش جاوا اسکریپت (JavaScript)

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

در این مقاله به آموزش کلاس در جاوا اسکریپت و مفاهیم مربوطه پرداخته شد. پیش از یادگیری مفهوم کلاس در جاوا اسکریپت لازم است آموزش مقدماتی جاوا اسکریپت گذرانده شود. یک منبع مناسب برای این منظور می‌تواند دوره آموزش جاوا اسکریپت فرادرس باشد. مدت زمان این فرادرس به صورت تقریبی ۹ ساعت و مدرس آن مهندس محمد عبداللهی است. این دوره آموزشی به ۲۳ فصل تقسیم‌بندی شده است که در آن ضمن آموزش جامع و کاربردی جاوا اسکریپت به ارائه تمرین‌هایی برای بخش‌های مختلف پرداخته می‌شود.

شیوه استفاده از حلقه for…in در جاوا اسکریپت

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

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

for (let element in array){
        action      
}

حلقه for…in هر آیتم درون آرایه را به یک متغیر (عنصر) که درون پرانتز اعلان شده، انتساب می‌دهد. از این رو لاگ کردن مستقیم عنصر درون حلقه یک اندیس آرایه (و نه خود آیتم آرایه) را بازگشت می‌دهد.

let anArray = [1, 3, 5, 6];
for (let i in anArray){
    console.log(i)
}
Output:
0
1
2
3 

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

let anArray = [1, 3, 5, 6];
for (let i in anArray){
    console.log(anArray[i])
}
Output:
1
3
5
6 

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

let anArray = [1, 3, 5, 6];
// Remove one from the length of the array and assign this to a variable:
let v = anArray.length - 1; 
// Use the above variable as an index basis while iterating down the array:
for (let i in anArray){
    console.log(anArray[v])
    v -=1;
}
Output:
6
5
3
1 

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

مطلب پیشنهادی مجله فرادرس برای مطالعه:

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

حلقه for…of در جاوا اسکریپت مشابه حلقه for…in است. اما بر خلاف for…in روی اندیس‌های آرایه نمی‌چرخد؛ بلکه عمل تکرار روی خود آیتم‌های آرایه انجام می‌گیرد. ساختار کلی آن همانند کد زیر است.

for (let i of array) {
     action 
}

در مثال زیر از این روش تکرار برای چرخش روی یک آرایه به صورت افزایشی استفاده کرده‌ایم.

let anArray = [1, 3, 5, 6];
for (let i of anArray) {
    console.log(i)
}
Output:
1
3
5
6 

از این روش می‌توان برای چرخش کاهشی روی آرایه و معکوس کردن خروجی نیز استفاده کرد. روش کار مشابه روشی است که در خصوص حلقه for…in اجرا کردیم.

let anArray = [1, 3, 5, 6];
let v = anArray.length - 1;
for (let x of anArray) {
    console.log(anArray[v])
    v -=1;
}
Output:
6
5
3
1 

برای اجرای عملیات درون حلقه به ترتیب زیر عمل می‌کنیم.

let anArray = [1, 3, 5, 6];
let v = anArray.length - 1;
for (let x of anArray) {
    console.log("5", "x", anArray[v], "=", anArray[v] * 5)
    v -=1;
}
Output:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5 

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

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

let i = 0;
while (i < 10) {
    console.log(4)
}

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

let i = 0;
while (i < anArray.length) {
    console.log(anArray[i])
    i +=1
}
Output:
1
3
5
6 

مطلب پیشنهادی مجله فرادرس برای مطالعه:

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

حلقه do…while یک مجموعه از عمل‌ها را که به طور صریح درون ساختار do بیان شده‌اند، پذیرفته و اجرا می‌کند. سپس شرط انجام این عمل‌ها درون حلقه while تعیین می‌شود. ساختار کلی آن چنین است.

do{
   actions
}
while (
    consition
)

در مثال زیر با استفاده از حلقه do…while روی یک آرایه می‌چرخیم.

do{
   console.log(anArray[i])
    i +=1
}
while (
    i < anArray.length
)
Output:
1
3
5
6 

فیلم آموزش JavaScript ES6 جاوا اسکریپت

فیلم آموزش JavaScript ES6 (جاوا اسکریپت)

اکما اسکریپت (ECMA Script) با سرنام ES، نسخه استاندارد جاوا اسکریپت به حساب می‌آید که ویژگی‌های بسیار بیش‌تری در آن به جاوا اسکریپت اضافه شده است. طول زمان این فرادرس به صورت تقریبی ۲ ساعت و مدرس آن مهندس سید رضا هاشمیان است. این دوره پیش نیازی برای آموزش فریم‌ورک‌های مبتنی بر جاوا اسکریپت محسوب می‌شود و مشاهده این دوره به افرادی پیشنهاد می‌شود که مایل هستند در حوزه Front end متخصص شوند. این آموزش به ۱۰ فصل تقسیم‌بندی شده و حاوی مباحثی مانند آشنایی با Destructor ،Generator ،Iterator و موارد دیگر است.

سخن پایانی

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

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

بر اساس رای ۱۰ نفر
آیا این مطلب برای شما مفید بود؟
شما قبلا رای داده‌اید!
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
makeuseof

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *