آموزش کار با حلقه Loop در ES6

آموزش کار با حلقه Loop در ES6:

دستورات حلقه (Looping Statements) در زبان برنامه نویسی به ما امکان می دهند تا مجموعه ای از دستورالعمل ها یا توابع را تا زمانی که شرط تعیین شده درست باشد، به صورت پشت سر هم، تکرار نماییم. حلقه ها (Loops) یک روش ایده آل برای انجام مکرر برخی دستورات یا شرایط در برنامه هستند. در یک حلقه، عملیات تکرار دستورات تحت عنوان چرخه (iteration) نامیده می شود. در شکل زیر، طبقه بندی انواع حلقه یا Loop در زبان ES6 را نشان داده ایم:

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

حلقه های مشخص (Definite Loops) در ES6:

یک حلقه مشخص (Definite Loop) دارای تعداد تکرار دستورات تعیین شده و ثابت است. مثلا 6، 10 یا 20 بار و ... . سه نوع حلقه مشخص در ES6 وجود دارد که در جدول زیر تشریح شده اند:

در ادامه، با ارائه مثال های عملی، کاربرد هریک از حلقه های فوق را نشان خواهیم داد.

آموزش کاربرد حلقه for ( ; ; ) Loop :

حلقه for ( ; ; ) Loop جهت تکرار یک بلوک دستورات برای چند بار پشت سر هم، مناسب است. اگر تعداد دفعات اجرای دستورات تان مشخص است، همواره توصیه می شود از حلقه for ( ; ; ) Loop استفاده کنید. ساختار دستوری این حلقه به صورت زیر است:

for(initialization;condition;incr/decr){    
//statement or code to be executed    
}    
            

هریک از بخش های ساختار حلقه for عبارتند از:

• مقداردهی اولیه (initialization): این بخش شرط اولیه حلقه است که با شروع اجرای آن، یک بار اجرا می شود. در این قسمت می توانید یک متغیر را مقداردهی اولیه کرده یا متغیری که قبلا تعریف شده را نیز مقدار داد. استفاده از این قسمت اختیاری است.
• شرط (condition): این شرط هر بار پس از اجرای دستورات حلقه، جهت اجرای مجدد دستورات آن اجرا و تست می شود. اجرای دستورات حلقه تا نادرست شدن این شرط ادامه پیدا خواهد کرد. شرط فقط مقادیر Boolean که درست (true) یا غلط (false) می باشند را بر می گرداند. تعیین این بخش نیز اختیاری است.
• مکانیزم افزایش/کاهش (increment/ decrement): این بخش مقدار متغیری که معمولا شمارنده حلقه بوده یا شرط آن را تعیین می کند، افزایش یا کاهش می دهد. استفاده از این بخش نیز اختیاری است.
• بدنه دستورات (Statement): این بخش بدنه دستورات حلقه است که تا زمانی که عبارت شرطی حلقه درست باشد، پشت سر هم اجرا شده و با غلط (false) شدن شرط حلقه، اجرای آن متوقف می شود.

شکل زیر فلوچارت و روند اجرای حلقه for Loop در ES6 را نشان می دهد:

در ادامه 3 مثال از کاربرد حلقه ‘for Loop’ را به همراه خروجی نشان داده ایم که اولی یک حلقه ساده for، دومی یک حلقه for با چندین دستور مختلف و آخری یک حلقه بی نهایت infinite for loop است.
مثال 1: در کد مثال زیر، جدول ضرب عدد 2 را با حلقه for ایجاد کرده ایم:

var i;  
for(i=1;i<=10;i++)  
{  
   console.log("2 x "+ i +" =", 2*i);  
}  
            

خروجی :

2 x 1 = 2
2 x 2 = 4
2 x 3 = 6
2 x 4 = 8
2 x 5 = 10
2 x 6 = 12
2 x 7 = 14
2 x 8 = 16
2 x 9 = 18
2 x 10 = 20
            

مثال 2: در کد مثال زیر چندین عبارت دستوری را در حلقه for قرار داده ایم. با استفاده از عملگر کاما (,) می توانید چندین عبارت مقداردهی و دستور نهایی حلقه را در یک خط قرار دهید. در کد حلقه زیر، سری فیبوناچی را با استفاده از یک حلقه for تک خطی چاپ کرده ایم:

"use strict"   
for(let temp, a = 0, b = 1; b < 40; temp=a, a=b, b=a + temp)
console.log(b);
            

خروجی :

1
1
2
3
5
8
13
21
34
            

مثال 3: در کد حلقه زیر عدم تعیین شمارنده مناسب، عدم نوشتن دستور نهایی دارای توقف و ... ، یک حلقه بی نهایت (infinite) ایجاد شده که به صورت مداوم اجرا می شود. برای جلوگیری از ادامه روند کار حلقه زیر، بایستی دکمه های Ctrl + C را با هم بزنید:

for(;;)  
{    
   console.log("infinitive loop");  // It will print infinite times  
}   
            

خروجی :

infinite loop
infinite loop
infinite loop
infinite loop
infinite loop
infinite loop
infinite loop
infinite loop
infinite loop
infinite loop
infinite loop
infinite loop
	.
	.
	.
	.
infinite loop
            

آموزش کار با حلقه for … in در ES6:

حلقه for … in شبیه حلقه for است و برای حرکت درون خواص یک شی مناسب است. برای مثال وقتی می خواهید مقادیر کلیدها (keys) یک شی (object) را مشاهده کنید، می توانید از حلقه for … in استفاده نمایید.

ساختار دستوری استفاده از حلقه for … in به صورت زیر است:

for (variable_name in object_name) //Here in is the keyword  
{    
  // statement or block to execute    
}  
            

در هر تکرار، یک خاصیت (property) از شی به نام متغیر اختصاص داده می شود و این حلقه تا زمانی که کلیه خواص شی را خوانده و طی کند، ادامه پیدا می کند.
مثال: در کد مثال زیر یک شی را تعریف و خواص آن را مقداردهی کرده ایم. سپس توسط حلقه for … in درون خواص آن حرکت کرده و نام و مقدار تمامی آنها را در خروجی چاپ کرده ایم:

function Mobile(model_no){  
this.Model = model_no;  
this.Color = 'White';  
this.RAM = '4GB';  
}  
var Samsung = new Mobile("Galaxy");  
for(var props in Samsung)  
{  
console.log(props+ " : " +Samsung[props]);  
}  
            

خروجی :

Model : Galaxy
Color : White
RAM : 4GB
            

مثال 2: اگر تابعی را به یکی از خواص شی پاس بدهید، حلقه for … in کل دستورات تابع را در هنگام فراخوانی آن خاصیت، در خروجی نمایش می دهد. همانند کد زیر که تابع ()price را به خاصیت Price شی نسبت داده ایم:

function Mobile(model_no){  
this.Model = model_no;  
this.Color = 'White';  
this.RAM = '4GB';  
this.Price = function price() // The loop will give you this function as it is written here.  
{  
   console.log(this.model + "Price = Rs. 3300");  
}  
}  
var Samsung = new Mobile("Galaxy");  
for(var props in Samsung)  
{  
   console.log(props+ " : " +Samsung[props]);  
}  
            

خروجی :

Model : Galaxy
Color : White
RAM : 4GB
Price : function price()
{
   console.log(this.model + "Price = Rs. 3300");
}
            

همچنین می توانید متدهای تابع (method) را نیز در خروجی نمایش دهید.

آموزش کار با حلقه for … of در ES6:

بر خلاف اشیا (objects)، حلقه for … of برای شمارش متغیرهای شاخص دار مثل آرایه و متن رشته ای String و ... به کار می رود.
ساختار دستوری حلقه for … of به صورت زیر است:

for(variable_name of object_name) // Here of is a keyword  
{    
   //statement or block to execute    
}  
            

در هر تکرار حلقه، کل ویژگی از متغیر به متغیر variable_name اختصاص داده شده و تکرار حلقه تا پایان خواندن تمام خواص ادامه پیدا می کند.
مثال: در کد مثال زیر یک متغیر آرایه ای با چهار عضو به نام fruits تعریف کرده و سپس توسط حلقه for … of، مقادیر اعضای آن را به ترتیب در خروجی چاپ کرده ایم:

var fruits = ['Apple', 'Banana', 'Mango', 'Orange'];  
for(let value of fruits)  
{  
  console.log(value);   
}  
  
/* 
You can also write the above code like: 
 
for(let value of ['Apple', 'Banana', 'Mango', 'Orange']) 
{ 
  console.log(value);  
} 
 
*/  
            

خروجی :

Apple
Banana
Mango
Orange
            

آموزش کار با حلقه های نا معین Indefinite Loops در ES6:

یک حلقه نامعین در ES6 می تواند 1 تا بی نهایت تکرار دستورات داشته باشد. از حلقه های نامعین (Indefinite loops) زمانی که تعداد تکرارها نسبتا زیاد یا نامشخص باشد، استفاده می شود.
دو نوع مهم از حلقه های نامعین در ES6 داریم که در جدول زیر معرفی شده اند:

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

آموزش کار با حلقه while loop در ES6:

حلقه while loop یک مکانیزم کنترل جریان دستورات است که اجازه می دهد تا زمانی که شرط تعیین شده برای آن درست باشد، مجموعه دستوراتش به صورت مکرر اجرا شود. این حلقه شامل یک بلوک کد و یک عبارت شرط یا Condition است.
حلقه while عبارت یا شرط اجرای حلقه را قبل از اجرای بلوک دستورات خود چک می کند و در صورت درست بودن آن (true)، امکان اجرای یک بار دستورات را می دهد. به همین دلیل به ساختار این حلقه تحت عنوان "حلقه پیش آزمون" نام داده اند.
ساختار دستوری حلقه while loop به صورت زیر است:

while (condition) {  
   statements;  
}  
            

فلوچارت روند اجرای این حلقه نیز همانند تصویر زیر است:

مثال: در کد مثال عملی زیر یک متغیر به نام y با مقدار اولیه صفر را تعریف کرده و گفتیم تا زمانی که مقدارش کمتر از 4 است، دستورات حلقه while اجرا شود:

var y = 0;  
while (y < 4) {  
    console.log(y);  
    y++;  
}  
            

خروجی :

0
1
2
3
            

نکات مثال:

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

آموزش کار با حلقه do … while در ES6:

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

do   
{    
  // block of statements to be executed;    
}   
while (expression);   
            

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

مثال: در کد مثال عملی زیر متغیر Count برابر با 6 تعریف شده و گفته ایم که تا زمانی که از 0 بزرگتر است، دستورات حلقه اجرا شود:

var count = 6, fact = 1;  
do {  
    fact = fact * count--;  
} while (count > 0);  
  
console.log(fact);  
            

خروجی :

720
            

اگر بخواهید مثال فوق را با حلقه while loop بنویسید، به صورت زیر خواهد بود:

var count = 6, fact = 1;  
while (count > 0)   
{  
    fact = fact * count--;  
}  
console.log(fact);  
            

خروجی :

720
            

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

دستورات کنترل اجرای حلقه در ES6:

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

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

آموزش کار با دستور break در ES6:

دستور break ادامه اجرای حلقه را متوقف کرده و کنترل برنامه را از آن خارج می کند. شما می توانید دستور break را در حلقه ها و یا دستورات Switch به کار ببرید.
استفاده از دستور break در یک حلقه، باعث خروج برنامه از آن می شود. ساختار دستوری استفاده از break به صورت زیر است:

break;  
            

مثال: در کد مثال زیر یک حلقه با شماره n و مقدار اولیه 1 ایجاد کرده ایم. به برنامه گفته شده اگر مقدار n برابر 4 شد، از حلقه خارج شود (دستور break اجرا می شود):

var n = 1;  
while(n<=7)   
{   
   console.log("n="+n);   
   if(n==4)  
   {  
       break;  
   }   
   n++;  
}  
            

دستور کد مثال فوق چهار مقدار متغیر n از 1 تا 4 (بین 1 تا 7) را چاپ می کند. وقتی مقدار n برابر 4 می شود، با اجرای دستور break ادامه اجرای حلقه متوقف شده و برنامه از آن خارج می شود. خروجی زیر پس از اجرای برنامه بدست می آید:

n=1
n=2
n=3
n=4
            

آموزش کار با دستور Continue در ES6:

بر خلاف دستور break، دستور Continue کنترل برنامه از حلقه خارج نمی کند، فقط ادامه اجرای دستورات دور جاری حلقه را متوقف کرده و دور بعدی اجرای دستورات را از ابتدا آغاز می کند.
ساختار دستوری کاربرد Continue به صورت زیر است:

continue;  
            

مثال: در کد مثال زیر یک حلقه با شمارنده n و مقدار اولیه 0 ایجاد کرده ایم تا اعداد 0 تا 5 را چاپ کند. درون دستورات به حلقه گفته شد اگر مقدار n برابر 3 شد، با اجرای دستور Continue، ادامه اجرای دستورات آن دور حلقه را متوقف کرده و به ابتدای دور بعدی برود.

var n = 0;  
while(n<=5)   
{   
   n++;  
   if(n==3)  
   {  
       continue;  
   }   
   console.log("n = "+n);   
}  
            

کد مثال فوق، مقادیر n را در خروجی چاپ می کند اما وقتی به دور حلقه در n برابر 3 می رسد از آن رد شده و به دور بعدی می رود. خروجی زیر حاصل اجرای کد فوق است:

n = 1
n = 2
n = 4
n = 5
n = 6
            

آموزش استفاده از عنوان Label برای کنترل اجرای دستورات ES6:

یک Label یا شناسه یا identifier است که یک کولون (:) بعد از آن قرار گرفته و برای شناسایی یک بلوک کد یا دستورات در برنامه استفاده می شود. می توانید از عنوان یا Label به همراه دستورات break و continue برای کنترل اجرای دستورات برنامه استفاده کنید.
نمی توانید دستورات break و Continue را با نام عنوان (Label) آنها در دو خط مجزا قرار دهید و بایستی در یک خط باشند. همچنین هیچ دستور یا کدی نباید بین نام عنوان و حلقه مربوط به آن وجود داشته باشد.
ساختار دستوری تعریف یک عنوان یا Label به صورت زیر است:

labelname:  
Statement  
            

• نام عنوان Label name: یک شناسه یا identifier برای فراخوانی عنوان در سطح برنامه است که نبایستی جز نام های رزرو شده جاوا اسکریپت باشد.
• دستور statement: دستور مرتبط با عنوان است.

دو نوع عنوان یا Label در ES6 به شرح زیر داریم:

• عنوان با دستور (Label with break Statement) break:
  اگر بدون اشاره به عنوان (label reference) به کار رود، برای خروج از حلقه یا دستورات Switch استفاده می شود اما به همراه اشاره به label جهت خروج از هر بلوک کدی مناسب است.
• عنوان با دستور (label with continue statement) Continue:
  با یا بدون اشاره به عنوان (label reference) برای خروج از دور جاری حلقه و رفتن به ابتدای دور بعدی استفاده می شود.

آموزش کار با عنوان و دستور break در ES6:

بدون استفاده از اشاره به عنوان (label reference)، می توانید از دستور break فقط جهت خروج از اجرای دستورات یک حلقه یا دستور Switch استفاده کنید. اما با کاربرد همزمان label و دستور break می توانید از هر بلوک کدی خارج شوید.
ساختار دستوری استفاده از label و break به صورت زیر است:

break labelname;   
            

مثال: در کد مثال زیر، حلقه اول را درون عنوان loop 1 و حلقه دوم را درون عنوان loop 2 قرار داده ایم. سپس درون حلقه دوم، با استفاده از دستور break loop 1 گفته ایم هنگامی که مقدار هر دو متغیر x و y برابر 2 شد، از اجرای کامل loop 1 خارج شده و برنامه خاتمه پیدا می کند:

var x, y;  
  
loop1:         //The first for statement is labeled as "loop1."  
  
for (x = 1; x < 4; x++) {   
     loop2:    //The second for statement is labelled as "loop2"  
   for (y = 1; y < 4; y++) {    
      if (x === 2 && y === 2) {  
         break loop1;  
      }  
      console.log('x = ' + x + ', y = ' + y);  
   }  
}   
            

خروجی :

x = 1, y = 1
x = 1, y = 2
x = 1, y = 3
x = 2, y = 1
            

آموزش کار با عنوان و دستور Continue در ES6:

با استفاده یا بدون استفاده همزمان از اشاره به عنوان (label reference)، می توانید از ادامه اجرای دور جاری دستورات حلقه خارج شده و دور بعدی دستورات حلقه را از ابتدا اجرا کنید.
ساختار دستوری استفاده از عنوان و دستور Continue در ES6 به صورت زیر است:

continue labelname;   
            

مثال: در کد مثال زیر، حلقه اول را درون عنوان loop 1 و حلقه دوم را درون عنوان loop 2 قرار داده ایم. سپس گفتیم در حلقه دوم، هرگاه مقادیر متغیرهای x و y برابر با 2 شد، با اجرای دستور Continue loop 1، اجرای دور خارجی دستورات حلقه اول متوقف شده و به ابتدای اجرای دور بعدی آن پرش نماید:

var x, y;  
  
loop1:   //The first for statement is labelled as "loop1"  
for (x = 1; x < 4; x++) {       
   loop2:  //The second for statement is labelled as "loop2"  
   for (y = 1; y < 4; y++) {     
      if (x === 2 && y === 2) {  
         continue loop1;  
      }  
      console.log('x = ' + x + ', y = ' + y);  
   }  
} 
            

خروجی :

x = 1, y = 1
x = 1, y = 2
x = 1, y = 3
x = 2, y = 1
x = 3, y = 1
x = 3, y = 2
x = 3, y = 3
            

اگر به خروجی دقت کنید، برنامه از تولید هر دو خروجی (x=2 , y=2) و (x=2 , y=3) پرش کرده و انجام نداده است.

تعریف تابع با عنوان (Labeled Function) در ES6:

قبل از ECMAScript 6، عنوان دهی دستورات (Labeled Statement) اجازه عنوان دهی برای تعریف یک تابع را نمی داد اما در روش برنامه نویسی غیر سخت گیرانه ES6، عنوان دهی تعریف تابع مجاز بود و بیشتر نسخه های مرورگر مبتنی بر ECMAScript از این قابلیت پشتیبانی می کردند.
اما در ES6، دستور زبانی جاوا اسکریپت برای عنوان دهی دستورات (Labeled Statement)، اجازه عنوان دهی به تعاریف تابع ها را به عنوان یک شی نام دار (Labeled Item) می دهد اما این امکان شامل یک قانون خطا است که در صورت عدم نگارش درست کد، باعث بروز خطا می شود.
برای سازگاری مرورگرهای وب، این قانون با افزودن متن زیر اصلاح شده است:

LabeledItem : FunctionDeclaration
            

اگر هریک از سورس کدهای حالت برنامه نویسی سخت گیرانه جاوا اسکریپت با این قانون مطابقت داشته باشد، باعث بروز خطای دستوری می شود.
در اکما اسکریپت ECMAScript 2015، تابع عنوان دهی شده زیر در حالت برنامه نویسی غیر سخت گیرانه (non-strict mode) درست است:

L: function hello() {}  
            

اگر کد فوق در حالت برنامه نویسی سخت گیرانه جاوا اسکریپت (Strict mode) بنویسید، باعث بروز خطا می شود:

'use strict';  
L: function hello() {}  
// SyntaxError: In strict mode code, functions can only be declared at top level or inside a block.  
            

توابع قابل توقف (Generator Function) را نه در حالت کدنویسی غیر سخت گیرانه و نه در حالت سخت گیرانه نمی توان عنوان دهی کرد. کد زیر باعث بروز خطا می شود:

L: function* hello()   
{  
}  
// SyntaxError: Generator Functions cannot be labelled