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

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

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

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

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

کلیک کنید

ساختار کلی این حلقه به صورت زیر است.

• مقاله مرتبط: حلقه for در جاوا اسکریپت — از صفر تا صد + مثال و کد

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

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

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

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

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

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

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

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

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

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

• آموزش پروژه محور جاوا اسکریپت | ۱۵ پروژه عملی و کاربردی

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

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

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

1array.forEach(element => {
2    action
3})

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

1let anArray = [1, 3, 5, 6];
2anArray.forEach(x => {
3    console.log(x)
4});
5Output:
61
73
85
96 

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

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

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

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

1for (let element in array){
2        action      
3}

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

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

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

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

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

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

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

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

• کلاس در جاوا اسکریپت — راهنمای کاربردی به زبان ساده

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

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

فیلم آموزش رایگان جاوا اسکریپت JavaScript – سریع و آسان در ۱۵۰ دقیقه در فرادرس

کلیک کنید

ساختار کلی آن همانند کد زیر است.

1for (let i of array) {
2     action 
3}

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

1let anArray = [1, 3, 5, 6];
2for (let i of anArray) {
3    console.log(i)
4}
5Output:
61
73
85
96 

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

1let anArray = [1, 3, 5, 6];
2let v = anArray.length - 1;
3for (let x of anArray) {
4    console.log(anArray[v])
5    v -=1;
6}
7Output:
86
95
103
111 

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

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

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

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

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

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

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

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

• آموزش نصب جاوا اسکریپت — رایگان، کامل و تصویری

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

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

1do{
2   actions
3}
4while (
5    consition
6)

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

1do{
2   console.log(anArray[i])
3    i +=1
4}
5while (
6    i < anArray.length
7)
8Output:
91
103
115
126 

سخن پایانی

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

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

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