استفاده از حلقه در جاوااسکریپت
- اگر لازم باشد یک کد را چندین و چند بار تکرار کنید میتوانید آن کد را به صورت دستی چندین بار بنویسید اما راه حل بهتری هم وجود دارد و آن استفاده از حلقه ها یا loops است.
- از جمله دستورات loop میتوان به for و while اشاره کرد.
for دستور
- نحوه استفاده از loop, در دستور زیر expression1 درواقع مقدار اولیه مربوط به حلقه است, expression2 نیز شرط مربوط به پایان یافتن حلقه است و درنهایت expression3 هم مشخص میکند حلقه با چند قدم جلو برود.
for (expression 1; expression 2; expression 3) { // code block to be executed }
مثال:
در مثال زیر یک حلقه با شش قدم (شمارش از صفر تا پنج) ایجاد شده است که در هر مرحله عبارت the number is i چاپ شده و بجای i شماره مربوط به مرحله جاری نمایش داده میشود.
<html> <body> <p id=“demo”></p> <script> let text = “”; for (let i = 0; i < 5; i++) { text += “The number is “ + i + “<br>”; } document.getElementById(“demo”).innerHTML = text; </script> </body> </html>
مثال:
در این مثال نیز یک آرایه با چهار عنصر داریم که اجرای حلقه باعث میشود در هر مرحله یکی از عناصر آرایه چاپ شوند یعنی در مرحله اول که i=0 است عنصر مربوط به [0]car یعنی BMW چاپ میشود و این روند تا زمانیکه کل طول آرایه را طی کند ادامه دارد.
<html> <body> <p id=“demo”></p> <script> const cars = [“BMW”, “Volvo”, “Saab”, “Ford”]; let i, len, text; for (i = 0, len = cars.length, text = “”; i < len; i++) { text += cars[i] + “<br>”; } document.getElementById(“demo”).innerHTML = text; </script> </body> </html>
for each, for in و for of دستور
- دستور for in میتواند یک حلقه با طول وابسته به طول یک آرایه ایجاد کند.
مثال:
در این مثال یک آرایه به نام numbers ساخته ایم و در ادامه یک حلقه با دستور (let x in numbers)for ساخته ایم که این حلقه طول numbers را به عنوان تعداد مراحل پایش حلقه درنظر میگیرد.
<html> <body> <p id=“demo”></p> <script> const numbers = [45, 4, 9, 16, 25]; let txt = “”; for (let x in numbers) { txt += numbers[x] + ” “; } document.getElementById(“demo”).innerHTML = txt; </script> </body> </html>
- دستور for each یک تابع بازگشتی را برای تک تک عناصر آرایه فراخوانی میکند و آن تابع را روی همه عناصر اجرا میکند.
مثال:
در مثال ذکر شده آرایه myFunction بر روی تک تک عناصر آرایه numbers اعمال میشود.
<html> <body> <p id=“demo”></p> <script> const numbers = [45, 4, 9, 16, 25]; let txt = “”; numbers.forEach(myFunction); document.getElementById(“demo”).innerHTML = txt; function myFunction(value, index, array) { txt += value + “<br>”; } </script> </body> </html>
- دستور for of وظیفه ایجاد حلقه به طول هر نوع ساختمانی اعم از آرایه, رشته, لیست ها و … را بر عهده دارد.
مثال:
در نمونه پیش رو حلقه به طول رشته javascript ایجاد شده است و در هر مرحله یکی از حروف رشته چاپ شده و به خط بعدی میرود.
<html> <body> <p id=“demo”></p> <script> let language = “JavaScript”; let text = “”; for (let x of language) { text += x + “<br>”; } document.getElementById(“demo”).innerHTML = text; </script> </body> </html>
در جاوااسکریپت While
- در حلقه while یک دستور چندین و چند بار تکرار میشود تا به شرط while برسد.
while (condition) { // code block to be executed }
در مثال آورده شده یک حلقه while ایجاد شده است که داخل حلقه با هر بار اجرا یک واحد به مقدار i اضافه میشود و تا زمانیکه i<10 باشد حلقه تکرار خواهد شد.
<html>
<body>
<p id=“demo”></p>
<script>
let text = “”;
let i = 0;
while (i < 10) {
text += “<br>The number is “ + i;
i++;
}
document.getElementById(“demo”).innerHTML = text;
</script>
</body>
</html>
- میتوان دستور while را به صورت do while نیز استفاده کرد.
do { // code block to be executed } while (condition);
مثال:
در این کد نحوه استفاده از do while نشان داده شده است.
در این مثال تا زمانیکه i<10 باشد مقدار i چاپ میشود.
دقت کنید که اگر مقدار ++i داخل حلقه تعریف نشود این حلقه تا ابد ادامه خواهد یافت.
<html> <body> <p id=“demo”></p> <script> let text = “” let i = 0; do { text += “<br>The number is “ + i; i++; } while (i < 10); document.getElementById(“demo”).innerHTML = text; </script> </body> </html>
break دستور
- دستور break این امکان را ایجاد میکند که درصورت بروز شرایط خاصی حلقه متوقف شده و اجرا از حلقه خارج شود.
در مثال زیر حلقه ای به طول ۱۰ ایجاد شده که در آن i از صفر شروع شده و تا مقدار ۱۰ جلو میرود اما در ادامه شرطی وجود دارد که اگر مقدار i برابر ۳ شد از حلقه خارج شو که این مساله باعث میشود حلقه از ۰ تا ۳ جلو برود.
<html> <body> <p id=“demo”></p> <script> let text = “”; for (let i = 0; i < 10; i++) { if (i == 3) { break; } text += “The number is “ + i + “<br>”; } document.getElementById(“demo”).innerHTML = text; </script> </body> </html>