درس ۱۴: حلقه‌ها و تکرار

یادگیری حلقه‌های JavaScript برای تکرار عملیات

درس ۱۴ از ۲۰

پیشرفت درس

حلقه‌ها چیستند؟

حلقه‌ها (Loops) ابزارهای قدرتمندی در JavaScript هستند که به شما امکان تکرار یک بلوک کد را چندین بار می‌دهند. به جای نوشتن کد تکراری، می‌توانید از حلقه‌ها استفاده کنید تا کد خود را کوتاه‌تر و کارآمدتر کنید.

کاربردهای حلقه‌ها:

پردازش آرایه‌ها و لیست‌ها
تولید محتوای تکراری
محاسبات ریاضی پیچیده
جستجو در داده‌ها
اعتبارسنجی ورودی‌ها

حلقه for

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

ساختار حلقه for:

for (مقداردهی اولیه; شرط; به‌روزرسانی) {
    // کد قابل تکرار
}

مثال عملی:

تمرین عملی: حلقه‌های مختلف

در ادامه، انواع مختلف حلقه‌ها را مشاهده و تست کنید:

ویرایشگر کد خط 1، ستون 1

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>حلقه‌های JavaScript</title>
    <style>
        body {
            font-family: 'Vazirmatn', sans-serif;
            direction: rtl;
            text-align: right;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            min-height: 100vh;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255,255,255,0.1);
            padding: 30px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
        }
        .demo-section {
            background: rgba(255,255,255,0.1);
            padding: 20px;
            margin: 20px 0;
            border-radius: 10px;
            border-right: 4px solid #4CAF50;
        }
        .output {
            background: rgba(0,0,0,0.3);
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
            font-family: monospace;
            direction: ltr;
            text-align: left;
        }
        button {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
            font-family: 'Vazirmatn', sans-serif;
        }
        button:hover {
            background: #45a049;
        }
        .counter {
            font-size: 24px;
            font-weight: bold;
            color: #FFD700;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔄 حلقه‌های JavaScript</h1>
        
        <div class="demo-section">
            <h2>حلقه for ساده</h2>
            <button onclick="simpleForLoop()">اجرای حلقه for</button>
            <div id="forOutput" class="output"></div>
        </div>
        
        <div class="demo-section">
            <h2>حلقه while</h2>
            <button onclick="whileLoopDemo()">اجرای حلقه while</button>
            <div id="whileOutput" class="output"></div>
        </div>
        
        <div class="demo-section">
            <h2>حلقه do-while</h2>
            <button onclick="doWhileDemo()">اجرای حلقه do-while</button>
            <div id="doWhileOutput" class="output"></div>
        </div>
        
        <div class="demo-section">
            <h2>شمارنده تعاملی</h2>
            <div class="counter" id="counter">0</div>
            <button onclick="startCounter()">شروع شمارش</button>
            <button onclick="stopCounter()">توقف</button>
            <button onclick="resetCounter()">بازنشانی</button>
        </div>
        
        <div class="demo-section">
            <h2>حلقه for...of برای آرایه</h2>
            <button onclick="forOfDemo()">پردازش آرایه</button>
            <div id="forOfOutput" class="output"></div>
        </div>
    </div>
</body>
</html>

// متغیر برای کنترل شمارنده
let counterInterval;
let currentCount = 0;

// حلقه for ساده
function simpleForLoop() {
    const output = document.getElementById('forOutput');
    let result = '';
    
    for (let i = 1; i <= 5; i++) {
        result += `تکرار ${i}: مربع ${i} = ${i * i}\n`;
    }
    
    output.textContent = result;
}

// حلقه while
function whileLoopDemo() {
    const output = document.getElementById('whileOutput');
    let result = '';
    let num = 1;
    
    while (num <= 10) {
        if (num % 2 === 0) {
            result += `${num} عدد زوج است\n`;
        }
        num++;
    }
    
    output.textContent = result;
}

// حلقه do-while
function doWhileDemo() {
    const output = document.getElementById('doWhileOutput');
    let result = '';
    let password;
    let attempts = 0;
    
    do {
        attempts++;
        password = prompt(`تلاش ${attempts}: رمز عبور را وارد کنید (123):`);
        
        if (password === null) {
            result = 'کاربر عملیات را لغو کرد';
            break;
        }
        
        if (password !== '123') {
            result += `تلاش ${attempts}: رمز اشتباه\n`;
        }
        
    } while (password !== '123' && attempts < 3);
    
    if (password === '123') {
        result += `موفق! رمز در تلاش ${attempts} درست بود`;
    } else if (attempts >= 3) {
        result += 'حداکثر تلاش انجام شد';
    }
    
    output.textContent = result;
}

// شمارنده تعاملی
function startCounter() {
    if (counterInterval) return; // جلوگیری از شروع مجدد
    
    counterInterval = setInterval(() => {
        currentCount++;
        document.getElementById('counter').textContent = currentCount;
        
        // تغییر رنگ بر اساس عدد
        const counter = document.getElementById('counter');
        if (currentCount % 10 === 0) {
            counter.style.color = '#FF6B6B';
        } else if (currentCount % 5 === 0) {
            counter.style.color = '#4ECDC4';
        } else {
            counter.style.color = '#FFD700';
        }
    }, 100);
}

function stopCounter() {
    if (counterInterval) {
        clearInterval(counterInterval);
        counterInterval = null;
    }
}

function resetCounter() {
    stopCounter();
    currentCount = 0;
    document.getElementById('counter').textContent = '0';
    document.getElementById('counter').style.color = '#FFD700';
}

// حلقه for...of برای آرایه
function forOfDemo() {
    const output = document.getElementById('forOfOutput');
    const fruits = ['سیب', 'موز', 'پرتقال', 'انگور', 'هلو'];
    let result = 'فهرست میوه‌ها:\n';
    
    for (const fruit of fruits) {
        result += `🍎 ${fruit}\n`;
    }
    
    result += '\nپردازش با ایندکس:\n';
    
    for (let i = 0; i < fruits.length; i++) {
        result += `${i + 1}. ${fruits[i]}\n`;
    }
    
    output.textContent = result;
}

// اجرای خودکار هنگام بارگذاری
document.addEventListener('DOMContentLoaded', function() {
    console.log('صفحه حلقه‌های JavaScript آماده است!');
});

نمایش زنده

انواع حلقه‌ها در JavaScript

۱. حلقه for

برای تکرار با تعداد مشخص استفاده می‌شود:

for (let i = 0; i < 5; i++) {
    console.log("تکرار شماره: " + i);
}

۲. حلقه while

تا زمانی که شرط برقرار باشد، تکرار می‌شود:

let i = 0;
while (i < 5) {
    console.log("شمارش: " + i);
    i++;
}

۳. حلقه do-while

حداقل یک بار اجرا می‌شود، سپس شرط بررسی می‌شود:

let i = 0;
do {
    console.log("اجرا شد: " + i);
    i++;
} while (i < 3);

۴. حلقه for...of

برای پیمایش آرایه‌ها و آبجکت‌های قابل تکرار:

const fruits = ['سیب', 'موز', 'پرتقال'];
for (const fruit of fruits) {
    console.log(fruit);
}

۵. حلقه for...in

برای پیمایش ویژگی‌های آبجکت‌ها:

const person = {name: 'علی', age: 25, city: 'تهران'};
for (const key in person) {
    console.log(key + ': ' + person[key]);
}

کنترل جریان حلقه

دستور break

برای خروج زودهنگام از حلقه:

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break; // خروج از حلقه
    }
    console.log(i);
}

دستور continue

برای رد کردن تکرار فعلی و ادامه به تکرار بعدی:

for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
        continue; // رد کردن اعداد زوج
    }
    console.log(i); // فقط اعداد فرد چاپ می‌شوند
}

مثال‌های کاربردی

محاسبه فاکتوریل

function factorial(n) {
    let result = 1;
    for (let i = 1; i <= n; i++) {
                        result *= i;
    }
    return result;
}

console.log(factorial(5)); // 120

جستجو در آرایه

function findInArray(array, target) {
    for (let i = 0; i < array.length; i++) {
        if (array[i] === target) {
            return i; // ایندکس عنصر پیدا شده
        }
    }
    return -1; // عنصر پیدا نشد
}

const numbers = [10, 20, 30, 40, 50];
console.log(findInArray(numbers, 30)); // 2

تولید جدول ضرب

function multiplicationTable(n) {
    for (let i = 1; i <= 10; i++) {
        console.log(`${n} × ${i} = ${n * i}`);
    }
}

multiplicationTable(7);

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

⚠️ خطر حلقه بی‌نهایت

همیشه مطمئن شوید که شرط حلقه در نهایت false می‌شود:

// اشتباه - حلقه بی‌نهایت
let i = 0;
while (i < 10) {
    console.log(i);
    // i++ فراموش شده!
}

// درست
let i = 0;
while (i < 10) {
    console.log(i);
    i++; // به‌روزرسانی متغیر
}

💡 نکات بهینه‌سازی

از حلقه مناسب برای هر موقعیت استفاده کنید
متغیرهای حلقه را در کمترین محدوده تعریف کنید
از break و continue برای کنترل بهتر استفاده کنید
برای آرایه‌ها از for...of استفاده کنید
برای آبجکت‌ها از for...in استفاده کنید

آزمون درس ۱۴

سوال ۱: کدام حلقه حداقل یک بار اجرا می‌شود؟

for while do-while for...of

سوال ۲: کدام دستور برای خروج از حلقه استفاده می‌شود؟

continue break return exit

سوال ۳: خروجی این کد چیست؟

for (let i = 0; i < 3; i++) {
    if (i === 1) continue;
    console.log(i);
}

0, 1, 2 0, 2 1, 2 0, 1