برنامه نویسی و IT

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

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

ویدئو پیشنهادی: جاوا اسکریپت

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

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

برای درک بهتر بیایید به قطعه کد زیر نگاه کنیم:

for (initialization; condition; final expression) {
	// کدی که باید اجرا کنیم
}

در دستور بالا سه عبارت در عبارت for وجود دارد: مقداردهی اولیه (initialization)، شرط (condition) و عبارت نهایی (final expression) که به‌عنوان  عنصر افزایشی نیز شناخته می‌شود.

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

بیایید از یک مثال اساسی برای نشان دادن مفهوم حلقه for در جاوا اسکریپت استفاده کنیم. در مثال زیر یک عبارت for را با 5 تکرار راه‌اندازی می‌کنیم و هر تکرار را در کنسول چاپ می‌کنیم.

// ایجاد یک حلقه با 5 بار تکرار
for (let i = 0; i < 4; i++) {
	//چاپ هر تکرار در کنسول
	console.log(i);
}

خروجی:

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

در مثال بالا، ما حلقه for را با مقدار i = 0 مقداردهی اولیه کردیم، که حلقه را از 0 شروع می‌کند. شرط را i < 4 قرار می‌دهیم، به این معنی که تا زمانی که i کمتر از 4 ارزیابی کند، حلقه به اجرا کن. عبارت نهایی ما از i++ تعداد هر تکرار را از طریق حلقه افزایش می‌دهد. console.log(i) اعداد را چاپ می‌کند که با 0 شروع می‌شوند و به‌محض اینکه i به‌عنوان 4 ارزیابی شد متوقف می‌شود.

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

// متغیر اولیه را روی 0 قرار دهید
let i = 0;

// افزایش دستی متغییر در هر مرحله
console.log(i++);
console.log(i++);
console.log(i++);
console.log(i++);

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

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

در بخش بعدی با هر سه عنصر موجود در حلقه for بیشتر آشنا خواهیم شد.

مقداردهی اولیه در حلقه for

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

let i = 0;

ما متغیری به نام i را با کلمه کلیدی let اعلام می‌کنیم (کلمه کلیدی var نیز ممکن است استفاده شود) و به آن مقدار 0 می‌دهیم. درحالی‌که متغیر را می‌توان هر چیزی نام‌گذاری کرد، i بیشتر استفاده می‌شود. متغیر i مخفف iteration است، این عبارت با جاوا اسکریپت سازگار است و کد را فشرده نگه می‌دارد.

شرایط در حلقه for

حلقه‌های for معمولاً دارای یک شرط هستند. به نحوه نوشتن شرط زیر دقت کنید.

i < 4;

ما قبلاً ثابت کرده‌ایم که متغیر تکرار ما یعنی i، نشان‌دهنده 0 برای شروع است. حال می‌گوییم تا زمانی که i در این مثال کمتر از 4 باشد، شرط درست است.

عبارت نهایی در حلقه for

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

i++

در مثال ما، با i++ متغیر را یک واحد افزایش می‌دهیم. این همان اجرای i = i + 1 است. برخلاف عبارات مقداردهی اولیه و شرط، عبارت نهایی با نقطه‌ویرگول به پایان نمی‌رسد.

قرار دادن هر سه عنصر در کنار هم

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

// ایجاد یک حلقه با 5 بار تکرار
for (let i = 0; i < 4; i++) {
	console.log(i);
}

ابتدا، i را اعلام می‌کنیم و آن را روی 0 قرار می‌دهیم. سپس، شرطی می‌گذاریم که حلقه اجرا شود تا زمانی که i کمتر از 4 شود. درنهایت، i در هر تکرار یک 1 واحد افزایش می‌دهیم. بلوک کد ما مقدار i را در کنسول چاپ می‌کند، بنابراین نتیجه ما 0، 1، 2 و 3 به‌عنوان خروجی خواهد بود.

عبارات اختیاری در حلقه for جاوا اسکریپت

هر سه عبارت در حلقه for اختیاری هستند. برای مثال، می‌توانیم همان را برای دستور بدون عبارت مقداردهی اولیه با مقداردهی اولیه متغیر خارج از حلقه بنویسیم.

// اعلام متغییر خارج از حلقه
let i = 0;

//  راه اندازی یا ساخت حلقه
for (; i < 4; i++) {
	console.log(i);
}

حلقه for در جاوا اسکریپت - مثال

در این مثال، اولین  نقطه‌ویرگول (;) برای تعیین اینکه آیا عبارت به مقداردهی اولیه، شرط یا عبارت نهایی اشاره دارد، حتی زمانی که حذف‌شده است، ضروری است.

در مثال زیر نیز می‌توانیم شرط را از حلقه حذف کنیم. ما از یک دستور if همراه با break استفاده می‌کنیم تا به حلقه بگوییم که وقتی i بزرگ‌تر از 3 شد، اجرای آن متوقف شود.

// اعلام متغییر خارج از حلقه
let i = 0;

// حذف مقدار دهی اولیه و شرط
for (; ; i++) {
	if (i > 3) {
		break;
	}
	console.log(i);
}

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

نکته مهم: در صورت حذف شرط باید عبارت break به کد اضافه شود، در غیر این صورت حلقه برای همیشه به‌صورت یک حلقه بی‌نهایت اجرا می‌شود.

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

// اعلام متغییر خارج از حلقه
let i = 0;

// حدف تمام عبارات 
for (; ;) {
	if (i > 3) {
		break;
	}
	console.log(i);
	i++;
}

نحوه به کاربردن حلقه for در جاوا اسکریپت

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

اصلاح یک آرایه با حلقه‌های for جاوا اسکریپت

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

// ساخت یک آرایه خالی
let arrayExample = [];

// ساخت یک حلقه با سه بار تکرار
for (let i = 0; i < 3; i++) {
	// به روزرسانی آرایه با مقدار متغییر
	arrayExample.push(i);
	console.log(arrayExample);
}

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

ما حلقه‌ را طوری تنظیم می‌کنیم که تا وقتی‌که i < 3 دیگر درست نباشد اجرا شود و به کنسول می‌گوییم که آرایه arrayExample را در انتهای هر تکرار در کنسول چاپ کند. با این روش می‌توانیم ببینیم که آرایه چگونه با مقادیر جدید به‌روز می‌شود.

طول یک آرایه

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

//ساخت یک آرایه با سه عنصر
let fish = [ "makhtabkhooneh", "javaschript", "kami" ];

// اجرای حلقه به طول آرایه
for (let i = 0; i < fish.length; i++) {
	// چاپ هر عنصر در آرایه
	console.log(fish[i]);
}

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

در این مثال، ما از طریق هر شاخص آرایه با fish[i] افزایش می‌دهیم (مثلاً حلقه از طریق fish[0]، fish[1] و غیره افزایش می‌یابد). این باعث می‌شود که شاخص یا اندیس با هر تکرار به‌صورت پویا به‌روز شود.

حلقهFor…In  در جاوا اسکریپت

عبارت for…in روی ویژگی‌های یک شی‌ء تکرار می‌شود. برای نشان دادن این حلقه for در جاوا اسکریپت، یک شی‌ء به نام websiteساده با چند جفت name:value می‌سازیم.

const website= {
	species: "great white",
	color: "white",
	numberOfTeeth: Infinity
}

با استفاده از حلقه for…in می‌توانیم به‌راحتی به نام هر یک از ویژگی‌ها دسترسی داشته باشیم.

const shark = {
	name: "makhtabkhooneh",
	Activity: "online traning",
	numberOfTeeth: Infinity
}
// چاپ نام ویژگی شی
for (attribute in website) {
	console.log(attribute);
}

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

همچنین می‌توانیم با استفاده از نام ویژگی به‌عنوان مقدار شاخص شی‌ء، به مقادیر هر ویژگی دسترسی داشته باشیم.

const website= {
	name: "makhtabkhooneh",
	Activity: "online traning",
	numberOfTeeth: Infinity
}
// چاپ مقادیر ویژگی شی
for (attribute in website) {
	console.log(website[attribute]);
}

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

با کنار هم قرار دادن آن‌ها، می‌توانیم به تمام نام ها و مقادیر یک شی‌ء دسترسی داشته باشیم.

const website= {
	name: "makhtabkhooneh",
	Activity: "online traning",
	numberOfTeeth: Infinity
}
// چاپ نام و مقادیر ویژگی های شی
for (attribute in website) {
	console.log(`${attribute}`.toUpperCase() + `: ${website[attribute]}`);
}

آموش حلقه for در جاوا اسکریپت مکتب خونه

ما از متد ()toUpperCase برای تغییر نام ویژگی و دنبال کردن آن توسط مقدار ویژگی استفاده کردیم. for…in یک روش بسیار مفید برای تکرار از طریق ویژگی‌های شی‌ء است.

حلقه For…Of در جاوا اسکریپت

دستور for…in برای تکرار روی خواص شی‌ء مفید است، اما برای تکرار روی اشیاء تکرارپذیر مانند آرایه‌ها و رشته‌ها، می‌توانیم از دستور for…of استفاده کنیم. عبارت for…of یک ویژگی جدیدتر از ECMAScript 6 است. ECMAScript (یا ES) یک مشخصات زبان اسکریپت است که برای استانداردسازی جاوا اسکریپت ایجادشده است.

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


let website= [ "makhtabkhooneh", "javaschript", "kami" ];

for (let web of website) {
	console.log(website);
}

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

همچنین می‌توان با استفاده از روش entries() فهرست مرتبط با عناصر نمایه را چاپ کرد.


for (let [index, web] of website.entries()) {
	console.log(index, web);
}

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

یک‌رشته را می‌توان به همان روشی که یک آرایه تکرار کرد.

//رشته را به یک متغیر اختصاص دهید
let writer = "kami"; 
for (let name of writer) {
	console.log(name);
}

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

در این مورد، ما از طریق هر کاراکتر در رشته حلقه زدیم و آن‌ها را به ترتیب متوالی چاپ کردیم.

نتیجه گیری

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

کامل بهرامی

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

نوشته های مشابه

‫2 دیدگاه ها

دیدگاهتان را بنویسید

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

دکمه بازگشت به بالا