جاواسکریپت: ۱۰- لوپ

نوشته حسین بهنودی در ۱۴ آذر ۱۳۹۹

حلقه تکرار – Iterative Loop

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

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

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

  • do
  • while
  • for

همه آنها را باید یاد گرفت و در هر جایی، آن روشی را که ساده‌تر است، به کار برد.


Do-loop

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

do { … } while (condition)


let i = 0;

do {
    console.log(i);
    i++;            // i = i + 1;
} while (i < 5);

//    output: 0, 1, 2, 3, 4

اگر بدنه حلقه تکرار تنها یک خط داشته باشد، به کرلی برکت {} نیازی نیست.


let i = 0;

do console.log(i++); while (i < 5);

//    output: 0, 1, 2, 3, 4

در شرط حلقه تکرار اگر از عمل افزایش یا کاهش درجا استفاده می‌کنید:

  • اگر علامت‌ها قبل از متغیر باشد قبل از مقایسه انجام می‌شود.

let i = 0;

do console.log(i); while (++i < 5);

//    output: 1, 2, 3, 4

  • اگر علامت‌ها بعد از متغیر باشد بعد از مقایسه انجام می‌شود.

let i = 0;

do console.log(i); while (i++ < 5);

//    output: 1, 2, 3, 4, 5

به دلیل آن که شرط حلقه do در پایان کار بررسی می‌شود؛ حتی اگر شرط نادرست باشد، حداقل یک بار اجرا می شود.


let i = 10;

do {
    console.log(i);
    ++i;
} while (i < 5);

//    output: 10

مثال: فاکتوریل – Factorial

در ریاضیات به حاصل ضرب همه اعداد طبیعی کوچکتر یا مساوی آن عدد فاکتوریل آن عدد می‌گویند.


1! = 1
2! = 1 x 2 = 2
3! = 1 x 2 x 3 = 6
4! = 1 x 2 x 3 x 4 = 24
5! = 1 x 2 x 3 x 4 x 5 = 120
...
n! = 1 x 2 x 3 x 4 x 5 x ... x n

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

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

<input type="text" id="in-box">
<button id="btn">OK</button>        
<h1 id="out-box"></h1>    

JS

const inBox = document.getElementById("in-box");
const outBox = document.getElementById("out-box");
const btn = document.getElementById("btn");

btn.onclick = function() {

    let n = inBox.value;
    let f = 1;
    
    do {                           
        f *= n;       // f = f * n;
        --n;          // n = n - 1;
    } while (n);      // n != 0    
    
    outBox.innerHTML = f;
}


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


do f *= n--; while (n);

// Or

do f *= n; while (--n);
    


While-loop

در حلقه while درستی شرط، هر بار در آغاز حلقه بررسی می‌شود. در صورت درست بودنِ شرط، وارد حلقه می‌گردد و آنرا یک بار اجرا می‌کند. و اگر شرط نادرست باشد، اصلا وارد حلقه نمی‌شود و اجرای کد از بعد از حلقه ادامه پیدا می‌کند.

while (condition) { … }


let i = 0;

while (i < 5) {
    console.log(i);
    i++;                // i = i + 1;
}

//    output: 0, 1, 2, 3, 4

اگر بدنه حلقه تکرار تنها یک خط داشته باشد، به کرلی برکت نیازی نیست.


let i = 0;

while (i < 5) console.log(i++);

//    output: 0, 1, 2, 3, 4

در شرط حلقه تکرار اگر از عمل افزایش یا کاهش درجا استفاده می‌کنید:

  • اگر علامت‌ها قبل از متغیر باشد قبل از مقایسه انجام می‌شود.

let i = 0;

while (++i < 5) console.log(i);

//    output: 1, 2, 3, 4

  • اگر علامت‌ها بعد از متغیر باشد بعد از مقایسه انجام می‌شود.

let i = 0;

while (i++ < 5) console.log(i);

//    output: 1, 2, 3, 4, 5

در شرط while اگر شرط از پیش نادرست باشد، دستورات درون حلقه while حتی یکبار هم اجرا نمی‌شوند.


let i = 10;

 while (i < 5) {
    console.log(i);
    ++i;
}

//    output: 

تفاوت do و while

  • حلقه do همیشه دست کم یکبار اجرا می‌شود.
  • حلقه while می‌تواند حتی یکبار هم اجرا نشود.

مثال: فاکتوریل – Factorial

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

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

<input type="text" id="in-box">
<button id="btn">OK</button>        
<h3 id="out-box"></h3>

JS

const inBox = document.getElementById("in-box");
const outBox = document.getElementById("out-box");
const btn = document.getElementById("btn");

btn.onclick = function() {

    let n = inBox.value;
    let f = 1;
    
    while (n) {    // n != 0    
        f *= i;    // f = f * i;
        n--;       // n = n - 1;
    }                           
     
    outBox.innerHTML = f;
}

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


while (n) f *= n--;

// Or

while (--n) f *= n;



For-loop

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

قبل از ورود به حلقه به متغیر شمارنده مقدار اولیه داده می شود. سپس شرط حلقه بررسی می‌شود. در صورت درستی شرط وارد حلقه شده آن را یک بار اجرا می‌کند. سپس مقدار شمارنده تغییر می‌کند. و به ابتدای حلقه برمی‌گردد.

for (begin; condition; step) { … }

متغیر i به عنوان شمارنده تعریف می‌شود و در ابتدا مقدار صفر می‌گیرد. و  در صورتیکه از ۵ کوچکتر باشد، دستورات حلقه را اجرا می‌کند. و هر بار پس از اجرای حلقه یک واحد به i اضافه می‌شود. و دوباره شرط بررسی می‌شود…


for (let i = 0; i < 5; i++) {
    console.log(i);
}

//    output: 0, 1, 2, 3, 4

اگر بدنه حلقه تکرار تنها یک خط داشته باشد، به کرلی برکت نیازی نیست.


for (let i = 0; i < 5; i++) console.log(i);

//    output: 0, 1, 2, 3, 4

مثال: فاکتوریل – Factorial

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

  • متغیر n: یک عدد طبیعی را از کاربر می‌گیرد و  آن را در متغیر n نگه‌می‌دارد.
  • متغیر i: متغیر i شمارنده است؛ و مقدار آن در آغاز کار برابر با یک است و با هر بار تکرار در حلقه یکی به مقدار آن افزوده می‌شود تا از n بزرگتر گردد. آنگاه از حلقه خارج می‌شود.
  • متغیر f: این متغیر برای محاسبه فاکتوریل است. در آغاز کار مقدار آن برابر با یک است. و با هر بار تکرار در عدد بعدی ضرب می‌شود.
HTML

<input type="text" id="in-box">
<button id="btn">OK</button>        
<h1 id="out-box"></h1>    

JS

let inBox = document.getElementById("in-box");
let outBox = document.getElementById("out-box");
let btn = document.getElementById("btn");

btn.onclick = function() {
    let n = inBox.value;
    let f = 1;

    for (let i = 1; i <= n; i++) {
        f *= i;      // f = f * i;
    }                             
    
    outBox.innerHTML = f;
}

به دلیل آنکه یک خط بیشتر نیست، به کرلی برکت نیازی نیست.


for (let i = 1; i <= n; i++) f *= i;

// Or

for (let i = n; i > 0; i--) f *= i;

شرط میانی

با گذاشتن یک شرط در میان حلقه می‌توانید روند اجرای دستورات را به دو صورت تغییر دهید:

۱- جهش به بیرون حلقه
با دستور break به طور کل از حلقه خارج می‌شود و به اولین خط پس از حلقه منتقل می‌شود.


while (...) {

...

if (...) break;

...

}

۲- جهش به دور بعدی حلقه
با دستور continue بقیه دستورات این دور از حلقه اجرا نمی‌شود و به پایان این دور منتقل می‌شود.


while (...) {

...

if (...) continue;

...

}



تمرین ۱

اعداد اول اعدادی طبیعی هستند که بر هیچ عددی بجز خودشان و عدد یک بخش‌پذیر نباشند.

  • این فایل را دانلود کنید.
  • آن را در فولدر js1 باز کنید.
  • تنها فایل script.js را می‌توانید تغییر دهید.
  • هرگاه روی دکمه کلیک شد، مشخص کند عدد خانه بالا اول است یا خیر و نتیجه را در خانه پایین بنویسد.

تمرین ۲

گوتفرید ویلهلم لایبنیتس (به آلمانی: Gottfried Wilhelm Leibniz) ‏ (۱۶۴۶–۱۷۱۶)، دانشمند آلمانی بود. او بنیادگذار دستگاه اعداد دودویی است. که اساس کار کامپیوترهای امروزی است. او برای محاسبه عدد پی نیز یک فرمول ارائه کرد.

  • این فایل را دانلود کنید.
  • آن را در فولدر js1 باز کنید.
  • تنها فایل script.js را می‌توانید تغییر دهید.
  • هرگاه روی دکمه‌ها کلیک شد، حاصل سری عدد پی را به تعداد خانه اول را در خانه دوم بنویسد.