Skip to content

README.md

Latest commit

 

History

History
741 lines (575 loc) · 37.9 KB

README.md

File metadata and controls

741 lines (575 loc) · 37.9 KB

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

مبانی جاوااسکریپت - آرایه‌ها

نقاشی دست‌ساز از Tomomi Imura

journey
    title ماجرای آرایه‌ها و حلقه‌های شما
    section مبانی آرایه
      ایجاد آرایه‌ها: 5: You
      دسترسی به عناصر: 4: You
      روش‌های آرایه: 5: You
    section تسلط بر حلقه‌ها
      حلقه‌های For: 4: You
      حلقه‌های While: 5: You
      نحو مدرن: 4: You
    section پردازش داده‌ها
      آرایه + حلقه‌ها: 5: You
      کاربردهای دنیای واقعی: 4: You
      بهینه‌سازی عملکرد: 5: You
Loading

آزمون پیش از درس

آزمون پیش از درس

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

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

تا پایان این درس، خواهید فهمید که چگونه کارهای پیچیده داده‌ای را تنها با چند خط کد انجام دهید. بیایید این مفاهیم اساسی برنامه‌نویسی را کشف کنیم.

آرایه‌ها

حلقه‌ها

🎥 برای دیدن ویدیوهای مربوط به آرایه‌ها و حلقه‌ها روی تصاویر بالا کلیک کنید.

می‌توانید این درس را در Microsoft Learn نیز دنبال کنید!

mindmap
  root((پردازش داده))
    Arrays
      Structure
        ساختار براکت‌های مربع
        اندیس‌گذاری صفر پایه
        اندازه‌گیری پویا
      Operations
        push/pop
        shift/unshift
        indexOf/includes
      Types
        آرایه اعداد
        آرایه رشته‌ها
        انواع مخلوط
    Loops
      For Loops
        شمارش تکرارها
        پردازش آرایه
        جریان قابل پیش‌بینی
      While Loops
        مبتنی بر شرط
        تکرارهای نامشخص
        ورودی کاربر
      Modern Syntax
        for...of
        forEach
        متدهای تابعی
    Applications
      Data Analysis
        آمار
        فیلترکردن
        تبدیل‌ها
      User Interfaces
        فهرست‌ها
        منوها
        گالری‌ها
Loading

آرایه‌ها

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

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

✅ آرایه‌ها همه جا هستند! می‌توانید یک مثال واقعی از آرایه را مثال بزنید، مثل آرایه پنل‌های خورشیدی؟

ایجاد آرایه‌ها

ایجاد یک آرایه بسیار ساده است - فقط کافی است از کروشه‌های مربعی استفاده کنید!

// آرایه خالی - مثل یک سبد خرید خالی که منتظر اقلام است
const myArray = [];

چه اتفاقی اینجا می‌افتد؟ شما همین الان یک مخزن خالی با استفاده از آن کروشه‌های مربعی [] ساخته‌اید. تصور کنید مثل یک قفسه کتابخانه خالی است - آماده است تا هر کتابی که می‌خواهید آنجا سازمان‌دهی کنید را در خود نگه دارد.

همچنین می‌توانید آرایه خود را با مقادیر اولیه از همان ابتدا پر کنید:

// منوی طعم بستنی مغازه شما
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// اطلاعات پروفایل یک کاربر (ترکیب انواع مختلف داده)
const userData = ["John", 25, true, "developer"];

// نمرات آزمون برای کلاس مورد علاقه شما
const scores = [95, 87, 92, 78, 85];

نکات جالب برای توجه:

  • می‌توانید متن، اعداد، یا حتی مقادیر درست/نادرست را در همان آرایه ذخیره کنید
  • فقط هر مورد را با کاما جدا کنید - ساده است!
  • آرایه‌ها برای نگهداری اطلاعات مرتبط با هم فوق‌العاده‌اند
flowchart LR
    A["📦 آرایه‌ها"] --> B["ایجاد [ ]"]
    A --> C["ذخیره چندین مورد"]
    A --> D["دسترسی با اندیس"]
    
    B --> B1["const arr = []"]
    B --> B2["const arr = [1,2,3]"]
    
    C --> C1["اعداد"]
    C --> C2["رشته‌ها"]
    C --> C3["بولین‌ها"]
    C --> C4["انواع مخلوط"]
    
    D --> D1["arr[0] = اول"]
    D --> D2["arr[1] = دوم"]
    D --> D3["arr[2] = سوم"]
    
    E["📊 اندیس آرایه"] --> E1["اندیس 0: اول"]
    E --> E2["اندیس 1: دوم"]
    E --> E3["اندیس 2: سوم"]
    E --> E4["اندیس n-1: آخر"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1
Loading

ایندکس‌گذاری آرایه

یک نکته‌ای که شاید اول کمی غیرعادی به نظر برسد: آرایه‌ها اقلام خود را از شماره ۰ شمارش می‌کنند، نه ۱. این شماره‌گذاری از صفر منشأ در نحوه کار حافظه کامپیوتر دارد - و یک قرارداد برنامه‌نویسی از زمان‌های ابتدایی زبان‌هایی مانند C است. هر خانه در آرایه یک شماره آدرس مخصوص به خود به نام ایندکس دارد.

ایندکس مقدار توضیح
0 "شکلاتی" عنصر اول
1 "توت فرنگی" عنصر دوم
2 "وانیلی" عنصر سوم
3 "پسته‌ای" عنصر چهارم
4 "راک رود" عنصر پنجم

✅ آیا تعجب می‌کنید که آرایه‌ها از ایندکس صفر شروع می‌شوند؟ در برخی زبان‌های برنامه‌نویسی، ایندکس‌ها از ۱ شروع می‌شوند. تاریخچه جالبی درباره این موضوع وجود دارد که می‌توانید در ویکی‌پدیا بخوانید.

دسترسی به عناصر آرایه:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// دسترسی به عناصر فردی با استفاده از نماد کروشه
console.log(iceCreamFlavors[0]); // "شکلات" - اولین عنصر
console.log(iceCreamFlavors[2]); // "وانیل" - سومین عنصر
console.log(iceCreamFlavors[4]); // "راکى رود" - آخرین عنصر

تجزیه و تحلیل آنچه اینجا رخ می‌دهد:

  • استفاده از علامت کروشه با شماره ایندکس برای دسترسی به عناصر
  • بازگرداندن مقدار ذخیره شده در آن موقعیت خاص آرایه
  • شروع شمارش از ۰ به طوری که اولین عنصر ایندکس ۰ دارد

تغییر عناصر آرایه:

// تغییر یک مقدار موجود
iceCreamFlavors[4] = "Butter Pecan";
console.log(iceCreamFlavors[4]); // "بادام زمینی کره‌ای"

// افزودن یک عنصر جدید در انتها
iceCreamFlavors[5] = "Cookie Dough";
console.log(iceCreamFlavors[5]); // "خمیر کوکی"

در نمونه بالا، ما:

  • عنصر ایندکس ۴ را از "راک رود" به "باتر پیکان" تغییر دادیم
  • یک عنصر جدید "کاکی دو" را در ایندکس ۵ اضافه کردیم
  • اندازه آرایه را هنگام اضافه کردن فراتر از محدودیت‌های فعلی به طور خودکار افزایش دادیم

طول آرایه و روش‌های رایج

آرایه‌ها با خصوصیات و روش‌های داخلی می‌آیند که کار با داده‌ها را بسیار آسان‌تر می‌کنند.

یافتن طول آرایه:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
console.log(iceCreamFlavors.length); // ۵

// طول به صورت خودکار با تغییر آرایه به‌روزرسانی می‌شود
iceCreamFlavors.push("Mint Chip");
console.log(iceCreamFlavors.length); // ۶

نکات کلیدی برای به خاطر سپردن:

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

روش‌های مهم آرایه:

const fruits = ["apple", "banana", "orange"];

// افزودن عناصر
fruits.push("grape");           // اضافه کردن به انتها: ["apple", "banana", "orange", "grape"]
fruits.unshift("strawberry");   // اضافه کردن به ابتدا: ["strawberry", "apple", "banana", "orange", "grape"]

// حذف عناصر
const lastFruit = fruits.pop();        // حذف و بازگرداندن "grape"
const firstFruit = fruits.shift();     // حذف و بازگرداندن "strawberry"

// یافتن عناصر
const index = fruits.indexOf("banana"); // بازگرداندن ۱ (موقعیت "banana")
const hasApple = fruits.includes("apple"); // بازگرداندن true

درک این روش‌ها:

  • اضافه کردن عناصر با push() (پایان) و unshift() (شروع)
  • حذف عناصر با pop() (پایان) و shift() (شروع)
  • یافتن عناصر با indexOf() و بررسی وجود با includes()
  • بازگرداندن مقادیری مثل عناصر حذف شده یا ایندکس محل‌ها

✅ خودتان امتحان کنید! در کنسول مرورگر خود آرایه‌ای بسازید و آن را دستکاری کنید.

🧠 بررسی اصول آرایه: سازماندهی داده‌های شما

درک خود را از آرایه تست کنید:

  • چرا فکر می‌کنید آرایه‌ها شمارش را از ۰ شروع می‌کنند نه ۱؟
  • اگر تلاش کنید به ایندکسی دسترسی پیدا کنید که وجود ندارد (مانند arr[100] در آرایه‌ای با ۵ عنصر)، چه اتفاقی می‌افتد؟
  • می‌توانید سه مثال دنیای واقعی که آرایه‌ها در آنها مفید هستند، بیاورید؟
stateDiagram-v2
    [*] --> EmptyArray: const arr = []
    EmptyArray --> WithItems: افزودن عناصر
    WithItems --> Accessing: استفاده از ایندکس‌ها
    Accessing --> Modifying: تغییر مقادیر
    Modifying --> Processing: استفاده از متدها
    
    WithItems --> WithItems: push(), unshift()
    Processing --> Processing: pop(), shift()
    
    note right of Accessing
        ایندکس‌گذاری صفر مبنا
        arr[0] = عنصر اول
    end note
    
    note right of Processing
        متدهای داخلی
        عملیات پویا
    end note
Loading

بینش دنیای واقعی: آرایه‌ها در همه جای برنامه‌نویسی هستند! فیدهای رسانه‌های اجتماعی، سبدهای خرید، گالری عکس‌ها، لیست‌های پخش موسیقی — همه‌ی این‌ها پشت صحنه آرایه هستند!

حلقه‌ها

حلقه‌ها را مانند مجازات مشهور در رمان‌های چارلز دیکنز تصور کنید که دانش‌آموزان مجبور بودند خطوطی را بارها و بارها روی تخته بنویسند. تصور کنید اگر بتوانید به سادگی به کسی بگویید «این جمله را ۱۰۰ بار بنویس» و آن به طور خودکار انجام شود. این دقیقاً همان کاری است که حلقه‌ها برای کد شما انجام می‌دهند.

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

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

flowchart TD
    A["🔄 انواع حلقه‌ها"] --> B["حلقه For"]
    A --> C["حلقه While"]
    A --> D["حلقه For...of"]
    A --> E["متد forEach"]
    
    B --> B1["تکرارهای مشخص"]
    B --> B2["بر اساس شمارنده"]
    B --> B3["for(init; شرط; افزایش)"]
    
    C --> C1["تکرارهای ناشناخته"]
    C --> C2["بر اساس شرط"]
    C --> C3["while(شرط)"]
    
    D --> D1["مدرن ES6+"]
    D --> D2["تکرار آرایه"]
    D --> D3["for(آیتم از آرایه)"]
    
    E --> E1["سبک تابعی"]
    E --> E2["متد آرایه"]
    E --> E3["array.forEach(تابع_تماس)"]
    
    F["⏰ چه زمانی استفاده کنیم"] --> F1["For: شمارش، ایندکس‌ها"]
    F --> F2["While: ورودی کاربر، جستجو"]
    F --> F3["For...of: تکرار ساده"]
    F --> F4["forEach: برنامه‌نویسی تابعی"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1
    style F fill:#fce4ec
Loading

حلقه For

حلقه for مانند تنظیم تایمر است - شما دقیقاً می‌دانید چند بار می‌خواهید چیزی اتفاق بیفتد. بسیار منظم و قابل پیش‌بینی است، که آن را برای کار با آرایه‌ها یا شمارش چیزها ایده‌آل می‌کند.

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

بخش هدف مثال
مقداردهی اولیه تعیین نقطه شروع let i = 0
شرط ادامه اجرای حلقه i < 10
افزایش نحوه به‌روزرسانی i++ 
// شمارش از ۰ تا ۹
for (let i = 0; i < 10; i++) {
  console.log(`Count: ${i}`);
}

// مثال کاربردی‌تر: پردازش نمرات
const testScores = [85, 92, 78, 96, 88];
for (let i = 0; i < testScores.length; i++) {
  console.log(`Student ${i + 1}: ${testScores[i]}%`);
}

گام به گام، اینجا چه اتفاقی می‌افتد:

  • مقداردهی اولیه متغیر شمارنده i برابر ۰ در ابتدا
  • بررسی شرط i < 10 قبل از هر تکرار
  • اجرای بلوک کد وقتی که شرط صحیح باشد
  • افزایش مقدار i به اندازه ۱ بعد از هر تکرار با i++
  • توقف هنگامی که شرط نادرست می‌شود (وقتی i به ۱۰ می‌رسد)

✅ این کد را در کنسول مرورگر اجرا کنید. وقتی تغییرات کوچکی در شمارنده، شرط یا قسمت افزایش ایجاد می‌کنید، چه اتفاقی می‌افتد؟ می‌توانید آن را طوری اجرا کنید که عقبگرد کند و شمارش معکوس ایجاد کند؟

🗓️ بررسی تسلط بر حلقه For: تکرار کنترل‌شده

درک خود از حلقه for را ارزیابی کنید:

  • سه قسمت حلقه For کدامند و هرکدام چه کاری انجام می‌دهند؟
  • چگونه می‌توانید به صورت معکوس روی آرایه حلقه بزنید؟
  • اگر قسمت افزایش (i++) را فراموش کنید چه اتفاقی می‌افتد؟
flowchart TD
    A["🚀 شروع حلقه for"] --> B["مقداردهی اولیه: let i = 0"]
    B --> C{"شرط: i < طول آرایه؟"}
    C -->|true| D["اجرای بلوک کد"]
    D --> E["افزایش: i++"]
    E --> C
    C -->|false| F["✅ خروج از حلقه"]
    
    G["📋 الگوهای رایج"] --> G1["for(let i=0; i<n; i++)"]
    G --> G2["for(let i=n-1; i>=0; i--)"]
    G --> G3["for(let i=0; i<arr.length; i+=2)"]
    
    style A fill:#e3f2fd
    style F fill:#e8f5e8
    style G fill:#fff3e0
Loading

حکمت حلقه‌ها: حلقه‌های For زمانی که دقیقاً می‌دانید چند بار چیزی را باید تکرار کنید، عالی‌اند. آنها رایج‌ترین انتخاب برای پردازش آرایه‌ها هستند!

حلقه While

حلقه while مانند گفتن «ادامه بده تا زمانی که...» است - ممکن است دقیقاً ندانید چند بار اجرا می‌شود، ولی می‌دانید چه زمانی باید متوقف شود. این برای کارهایی مانند گرفتن ورودی از کاربر تا دریافت داده مورد نظر یا جستجو در داده‌ها برای یافتن چیزی، ایده‌آل است.

ویژگی‌های حلقه While:

  • تا زمانی که شرط درست باشد ادامه می‌دهد
  • مدیریت دستی متغیرهای شمارنده را نیاز دارد
  • شرط را قبل از هر تکرار بررسی می‌کند
  • ریسک حلقه بی‌نهایت اگر شرط هرگز نادرست نشود
// مثال پایه شمارش
let i = 0;
while (i < 10) {
  console.log(`While count: ${i}`);
  i++; // فراموش نکنید که افزایش دهید!
}

// مثال عملی‌تر: پردازش ورودی کاربر
let userInput = "";
let attempts = 0;
const maxAttempts = 3;

while (userInput !== "quit" && attempts < maxAttempts) {
  userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`);
  attempts++;
}

if (attempts >= maxAttempts) {
  console.log("Maximum attempts reached!");
}

درک این مثال‌ها:

  • مدیریت دستی متغیر شمارنده i داخل بدنه حلقه
  • افزایش شمارنده برای جلوگیری از حلقه بی‌نهایت
  • نمایش کاربرد عملی با ورودی کاربر و محدود کردن تعداد تلاش‌ها
  • شامل مکانیزم‌های ایمنی برای جلوگیری از اجرای بی‌پایان

♾️ بررسی حکمت حلقه While: تکرار مبتنی بر شرط

درک خود از حلقه while را امتحان کنید:

  • خطر اصلی هنگام استفاده از حلقه‌های while چیست؟
  • چه زمانی حلقه while را به حلقه for ترجیح می‌دهید؟
  • چگونه می‌توان از حلقه‌های بی‌نهایت جلوگیری کرد؟
flowchart LR
    A["🔄 حلقه‌های While در مقابل For"] --> B["حلقه While"]
    A --> C["حلقه For"]
    
    B --> B1["تعداد تکرار نامشخص"]
    B --> B2["مبتنی بر شرط"]
    B --> B3["ورودی کاربر، جستجو"]
    B --> B4["⚠️ خطر: حلقه‌های بی‌نهایت"]
    
    C --> C1["تعداد تکرار مشخص"]
    C --> C2["مبتنی بر شمارنده"]
    C --> C3["پردازش آرایه"]
    C --> C4["✅ ایمن: پایان پیش‌بینی‌شده"]
    
    D["🛡️ نکات ایمنی"] --> D1["همیشه متغیر شرط را تغییر دهید"]
    D --> D2["شرایط خروج را وارد کنید"]
    D --> D3["حداکثر تعداد تکرار را تنظیم کنید"]
    
    style A fill:#e3f2fd
    style B fill:#fff3e0
    style C fill:#e8f5e8
    style D fill:#ffebee
Loading

اول ایمنی: حلقه‌های while قدرتمندند اما نیاز به مدیریت دقیق شرط دارند. همیشه مطمئن شوید شرط حلقه در نهایت نادرست می‌شود!

جایگزین‌های حلقه مدرن

جاوااسکریپت آجهای حلقه مدرنی ارائه می‌دهد که می‌توانند کد شما را خواناتر و کم‌خطاتر کنند.

حلقه For...of (از ES6 به بعد):

const colors = ["red", "green", "blue", "yellow"];

// رویکرد مدرن - پاک‌تر و ایمن‌تر
for (const color of colors) {
  console.log(`Color: ${color}`);
}

// مقایسه با حلقه for سنتی
for (let i = 0; i < colors.length; i++) {
  console.log(`Color: ${colors[i]}`);
}

مزایای کلیدی for...of:

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

روش forEach:

const prices = [9.99, 15.50, 22.75, 8.25];

// استفاده از forEach برای سبک برنامه‌نویسی تابعی
prices.forEach((price, index) => {
  console.log(`Item ${index + 1}: $${price.toFixed(2)}`);
});

// forEach با توابع فلشی برای عملیات ساده
prices.forEach(price => console.log(`Price: $${price}`));

چیزهایی که باید درباره forEach بدانید:

  • اجرای تابعی برای هر عنصر آرایه
  • ارائه مقدار عنصر و ایندکس به عنوان پارامتر
  • قادر به توقف زودهنگام نیست (برخلاف حلقه‌های سنتی)
  • بازگرداندن مقدار undefined (آرایه جدید ایجاد نمی‌کند)

✅ چرا ممکن است حلقه for را به حلقه while ترجیح دهید؟ ۱۷ هزار نفر این سؤال را در StackOverflow داشتند و برخی نظرات ممکن است برای شما جالب باشد.

🎨 بررسی سینتکس حلقه مدرن: پذیرش ES6+

درک خود را از جاوااسکریپت مدرن ارزیابی کنید:

  • مزایای for...of نسبت به حلقه‌های for سنتی چیست؟
  • چه زمانی ممکن است هنوز حلقه‌های for سنتی را ترجیح دهید؟
  • تفاوت forEach و map چیست؟
quadrantChart
    title راهنمای انتخاب حلقه
    x-axis سنتی --> مدرن
    y-axis ساده --> پیچیده
    quadrant-1 مدرن پیچیده
    quadrant-2 سنتی پیچیده
    quadrant-3 سنتی ساده
    quadrant-4 مدرن ساده
    
    Traditional For: [0.2, 0.7]
    While Loop: [0.3, 0.6]
    For...of: [0.8, 0.3]
    forEach: [0.9, 0.4]
    Array Methods: [0.8, 0.8]
Loading

روند مدرن: سینتکس ES6+ مانند for...of و forEach در حال تبدیل شدن به رویکرد محبوب برای تکرار آرایه‌ها هستند چون پاک‌تر و کمتر خطاپذیرند!

حلقه‌ها و آرایه‌ها

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

پردازش سنتی آرایه:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// روش کلاسیک حلقه for
for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`);
}

// روش مدرن for...of
for (const flavor of iceCreamFlavors) {
  console.log(`Available flavor: ${flavor}`);
}

بیایید هر روش را درک کنیم:

  • استفاده از خاصیت طول آرایه برای تعیین مرز حلقه
  • دسترسی به عناصر توسط ایندکس در حلقه‌های for سنتی
  • دسترسی مستقیم به عناصر در حلقه‌های for...of
  • پردازش هر عنصر آرایه دقیقاً یک بار

مثال عملی پردازش داده:

const studentGrades = [85, 92, 78, 96, 88, 73, 89];
let total = 0;
let highestGrade = studentGrades[0];
let lowestGrade = studentGrades[0];

// همه نمرات را با یک حلقه پردازش کنید
for (let i = 0; i < studentGrades.length; i++) {
  const grade = studentGrades[i];
  total += grade;
  
  if (grade > highestGrade) {
    highestGrade = grade;
  }
  
  if (grade < lowestGrade) {
    lowestGrade = grade;
  }
}

const average = total / studentGrades.length;
console.log(`Average: ${average.toFixed(1)}`);
console.log(`Highest: ${highestGrade}`);
console.log(`Lowest: ${lowestGrade}`);

چگونگی کارکرد این کد:

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

✅ با حلقه زدن روی آرایه‌ای که خودتان ساخته‌اید در کنسول مرورگر خود آزمایش کنید.

flowchart TD
    A["📦 داده‌های آرایه"] --> B["🔄 پردازش حلقه‌ای"]
    B --> C["📈 نتایج"]
    
    A1["[85, 92, 78, 96, 88]"] --> A
    
    B --> B1["محاسبه مجموع"]
    B --> B2["یافتن مین/ماکزیمم"]
    B --> B3["شمارش شرایط"]
    B --> B4["تغییر داده‌ها"]
    
    C --> C1["میانگین: ۸۷.۸"]
    C --> C2["بیشترین: ۹۶"]
    C --> C3["موفقیت: ۵/۵"]
    C --> C4["نمرات حرفی"]
    
    D["⚡ الگوهای پردازش"] --> D1["انباشته‌سازی (جمع)"]
    D --> D2["مقایسه (مین/ماکزیمم)"]
    D --> D3["فیلترکردن (شرایط)"]
    D --> D4["نگاشت (تبدیل)"]
    
    style A fill:#e3f2fd
    style B fill:#fff3e0
    style C fill:#e8f5e8
    style D fill:#f3e5f5
Loading

چالش GitHub Copilot Agent 🚀

از حالت Agent استفاده کنید برای کامل کردن چالش زیر:

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

دستور: تابعی به نام analyzeGrades بسازید که یک آرایه از اشیای نمرات دانش‌آموزان (هر کدام شامل نام و امتیاز) بگیرد و یک شیء با آمارهایی مانند بالاترین نمره، پایین‌ترین نمره، میانگین نمرات، تعداد دانش‌آموزانی که قبول شده‌اند (امتیاز >= ۷۰) و آرایه‌ای از نام‌های دانش‌آموزان بالاتر از میانگین را بازگرداند. در راه‌حل خود از حداقل دو نوع حلقه مختلف استفاده کنید.

برای اطلاعات بیشتر درباره حالت Agent اینجا را ببینید.

🚀 چالش

جاوااسکریپت چندین متد مدرن آرایه‌ای ارائه می‌دهد که می‌توانند جایگزین حلقه‌های سنتی برای وظایف خاص شوند. forEach، for-of، map، filter و reduce را بررسی کنید.

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

آزمون پس از سخنرانی

آزمون پس از سخنرانی

مرور و مطالعه خودآموز

آرایه‌ها در جاوااسکریپت متدهای زیادی دارند که برای دستکاری داده‌ها بسیار مفید هستند. در مورد این متدها مطالعه کنید و چندتا از آن‌ها (مثل push، pop، slice و splice) را روی آرایه‌ای که ساخته‌اید امتحان کنید.

تکلیف

حلقه زدن روی یک آرایه

📊 خلاصه ابزارهای آرایه‌ها و حلقه‌های شما

graph TD
    A["🎯 تسلط بر آرایه‌ها و حلقه‌ها"] --> B["📦 مبانی آرایه"]
    A --> C["🔄 انواع حلقه‌ها"]
    A --> D["🔗 پردازش داده‌ها"]
    A --> E["🎨 تکنیک‌های مدرن"]
    
    B --> B1["ایجاد: [ ]"]
    B --> B2["شاخص‌گذاری: arr[0]"]
    B --> B3["متدها: push, pop"]
    B --> B4["ویژگی‌ها: length"]
    
    C --> C1["For: تکرارهای مشخص"]
    C --> C2["While: مبتنی بر شرط"]
    C --> C3["For...of: دسترسی مستقیم"]
    C --> C4["forEach: تابعی"]
    
    D --> D1["محاسبه آمار"]
    D --> D2["تبدیل داده‌ها"]
    D --> D3["فیلتر و جستجو"]
    D --> D4["پردازش بلادرنگ"]
    
    E --> E1["توابع پیکان‌دار"]
    E --> E2["زنجیره‌سازی متدها"]
    E --> E3["بازسازی ساختار"]
    E --> E4["رشته‌های قالب‌بندی"]
    
    F["💡 مزایای کلیدی"] --> F1["مدیریت مؤثر داده‌ها"]
    F --> F2["کاهش تکرار کد"]
    F --> F3["راهکارهای مقیاس‌پذیر"]
    F --> F4["نحو تمیزتر"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1
    style F fill:#fce4ec
Loading

🚀 جدول زمانی تسلط شما بر آرایه‌ها و حلقه‌ها

⚡ کاری که در ۵ دقیقه آینده می‌توانید انجام دهید

  • یک آرایه از فیلم‌های مورد علاقه‌تان بسازید و به عناصر خاص آن دسترسی پیدا کنید
  • یک حلقه for بنویسید که از ۱ تا ۱۰ بشمرد
  • چالش متدهای مدرن آرایه را که در درس بود امتحان کنید
  • تمرین ایندکس‌گذاری آرایه را در کنسول مرورگرتان انجام دهید

🎯 کاری که در این ساعت می‌توانید به انجام برسانید

  • آزمون پس از درس را کامل کنید و مفاهیم دشوار را مرور کنید
  • تحلیل‌گر نمره جامع از چالش GitHub Copilot بسازید
  • یک سبد خرید ساده بسازید که آیتم اضافه و حذف کند
  • تمرین تبدیل بین انواع مختلف حلقه‌ها
  • آزمایش با متدهای آرایه مانند push، pop، slice و splice

📅 سفر پردازش داده یک هفته‌ای شما

  • تکلیف "حلقه زدن روی یک آرایه" را با بهبودهای خلاقانه به پایان برسانید
  • یک برنامه فهرست انجام کار با استفاده از آرایه‌ها و حلقه‌ها بسازید
  • یک ماشین‌حساب ساده آمار برای داده‌های عددی بسازید
  • تمرین با متدهای آرایه MDN
  • یک گالری عکس یا رابط لیست پخش موسیقی بسازید
  • برنامه‌نویسی تابعی را با map، filter و reduce کاوش کنید

🌟 تحول یک ماهه شما

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

🏆 چک‌این قهرمان نهایی پردازش داده

مهارت خود در آرایه‌ها و حلقه‌ها را جشن بگیرید:

  • مفیدترین عملیات آرایه‌ای که برای کاربردهای دنیای واقعی یاد گرفته‌اید چیست؟
  • کدام نوع حلقه برای شما طبیعی‌تر است و چرا؟
  • درک آرایه‌ها و حلقه‌ها چگونه رویکرد شما را در سازماندهی داده تغییر داده است؟
  • دوست دارید بعداً چه کار پیچیده پردازش داده‌ای را انجام دهید؟
journey
    title تحول پردازش داده‌های شما
    section امروز
      سردرگمی آرایه: 3: شما
      اصول حلقه‌ها: 4: شما
      درک ایندکس‌ها: 5: شما
    section این هفته
      تسلط بر متدها: 4: شما
      پردازش بهینه: 5: شما
      نحو مدرن: 5: شما
    section ماه آینده
      الگوریتم‌های پیچیده: 5: شما
      بهینه‌سازی عملکرد: 5: شما
      آموزش به دیگران: 5: شما
Loading

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

سلب مسئولیت:
این سند با استفاده از سرویس ترجمه هوش مصنوعی Co-op Translator ترجمه شده است. هرچند ما در تلاش برای دقت هستیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است دارای خطا یا نواقصی باشند. سند اصلی به زبان بومی خود باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، توصیه می‌شود از ترجمه حرفه‌ای انسانی استفاده شود. ما مسئول هیچ گونه سوءتفاهم یا برداشت نادرستی که از استفاده این ترجمه به وجود آید نیستیم.