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

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

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

چرا حلقه ها اهمیت دارند

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

const names = ["Alice", "Bob", "Charlie", "Diana"]; for (let i = 0; i < names.length; i++) {   console.log(names[i]); }

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

console.log(names[0]); // Alice console.log(names[1]); // Bob console.log(names[2]); // Charlie console.log(names[3]); // Diana

این رویکرد نه تنها ناکارآمد است بلکه مقیاس پذیر نیز نیست. اگر لیست به صدها یا هزاران نام افزایش یابد، نوشتن دستی غیر عملی است.

• کارایی: حلقه‌ها وظایف تکراری را خودکار می‌کنند و مقدار کد مورد نیاز را به میزان قابل توجهی کاهش می‌دهند.
• قابلیت نگهداری: با حلقه ها، افزودن یا حذف موارد از یک لیست نیازی به تغییر در خود حلقه ندارد.
• مقیاس پذیری: حلقه ها می توانند هر تعداد آیتم را مدیریت کنند و کد شما را مقیاس پذیرتر می کنند.

حلقه for

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

مثال: ایجاد لیستی از اعداد زوج تا حد معین.

for (let i = 0; i <= 10; i += 2) {   console.log(i); // Outputs even numbers from 0 to 10 }

حلقه while

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

مثال: یافتن فاکتوریل یک عدد.

let num = 5; let factorial = 1; while (num > 1) {   factorial *= num;   num--; } console.log(factorial); // Outputs: 120

حلقه do…while

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

مثال: اعتبار سنجی ورودی کاربر.

let input; do {   input = prompt("Enter a number greater than 5", ""); } while (input <= 5);

حلقه for…of

حلقه for…of یک نحو ساده برای تکرار بر روی اشیاء تکرارپذیر مانند آرایه ها و رشته ها فراهم می کند.

مثال: تکرار روی آرایه ای از نام ها.

const names = ["Alice", "Bob", "Charlie"]; for (const name of names) {   console.log(name); }

حلقه for…in

اگرچه منحصراً برای آرایه ها نیست، حلقه for…in برای تکرار روی کلیدهای یک شی استفاده می شود.

مثال: چاپ خواص شی.

const person = {name: "Alice", age: 25}; for (const key in person) {   console.log(`${key}: ${person[key]}`); }

استفاده بهینه از حلقه ها

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

مثال: فیلتر کردن اعداد زوج از یک آرایه.

const numbers = [1, 2, 3, 4, 5, 6]; const evenNumbers = []; for (const number of numbers) {   if (number % 2 === 0) {     evenNumbers.push(number);   } } console.log(evenNumbers); // Outputs: [2, 4, 6]

بیانیه های کنترل حلقه Loop Control Statements

• break: حلقه را خاتمه می دهد.
• continue: بقیه تکرار حلقه را رد می کند و با مورد بعدی ادامه می دهد.

مثال: بیرون آمدن از یک حلقه زمانی که یک شرط برآورده شود.

for (let i = 0; i < numbers.length; i++) {   if (numbers[i] === 4) {     console.log("Number 4 found, stopping loop.");     break;   } }

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

مثال حلقه‌ها: نمایش لیست نام‌ها

بیایید مثال نمایش لیستی از نام‌ها با حلقه‌ها را با ادغام HTML و CSS تقویت کنیم تا نشان دهیم که حلقه‌ها چگونه در یک صفحه وب کامل ادغام می‌شوند.

HTML

ابتدا یک ساختار ساده HTML راه اندازی می کنیم. ما یک لیست نامرتب (<ul>) خواهیم داشت که در آن آیتم های لیست (<li>) را به صورت برنامه نویزی برای هر نام درج می کنیم.

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Name Display</title>   <link rel="stylesheet" href="style.css"> </head> <body>   <h1>Names List</h1>   <ul id="namesList"></ul>   <script src="script.js"></script> </body> </html>

CSS (styles.css)

در مرحله بعد، چند سبک اساسی را اضافه کنید تا لیست از نظر بصری جذاب شود.

body {   font-family: Arial, sans-serif;   padding: 20px;   background-color: #f0f0f0; } h1 { color: #333; } ul {   list-style-type: none;   padding: 0; } li {   background-color: #fff;   border: 1px solid #ddd;   padding: 8px;   margin-bottom: 5px;   border-radius: 4px;   box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

جاوا اسکریپت (script.js)

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

document.addEventListener('DOMContentLoaded', () => {   const names = ["Alice", "Bob", "Charlie", "Diana"];   const list = document.getElementById('namesList');   for (let i = 0; i < names.length; i++) {     const item = document.createElement('li');     item.textContent = names[i];     list.appendChild(item);   } });

توضیح

• HTML: ساختار صفحه را تنظیم می کند، از جمله یک عنوان و یک لیست خالی نامرتب که در آن نام ها به صورت پویا درج می شوند.
• CSS: یک ظاهر طراحی برای صفحه و موارد فهرست ارائه می‌کند، از جمله رنگ پس‌زمینه، بالشتک‌ها، حاشیه‌ها و سایه جعبه.
• جاوا اسکریپت: منتظر می ماند تا DOM بارگیری شود، سپس از یک حلقه for برای تکرار در میان آرایه نام ها استفاده می کند، یک آیتم لیست جدید برای هر نام ایجاد می کند و آن را به لیست اضافه می کند.

در این مثال یکپارچه، ما قدرت استفاده از حلقه ها در جاوا اسکریپت برای تعامل با DOM را می بینیم که امکان تولید محتوای پویا را فراهم می کند.

آزمون / Quiz