History

localizeflow[bot] cc9b7563f4 chore(i18n): sync translations with latest source changes (chunk 1/1, 291 changes)		7 months ago
..
README.md	chore(i18n): sync translations with latest source changes (chunk 1/1, 291 changes)	7 months ago
assignment.md	chore(i18n): sync translations with latest source changes (chunk 1/1, 291 changes)	7 months ago

README.md

JavaScript मूल बातें: Arrays और Loops

स्केचनोट Tomomi Imura द्वारा

journey
    title आपके एरेज़ और लूप्स की साहसिक यात्रा
    section एरे मूल बातें
      एरे बनाना: 5: You
      एलिमेंट्स तक पहुंचना: 4: You
      एरे मेथड्स: 5: You
    section लूप महारत
      फॉर लूप्स: 4: You
      व्हाइल लूप्स: 5: You
      आधुनिक सिंटैक्स: 4: You
    section डेटा प्रोसेसिंग
      एरे + लूप्स: 5: You
      वास्तविक दुनिया के अनुप्रयोग: 4: You
      प्रदर्शन अनुकूलन: 5: You

प्री-लेक्चर क्विज़

क्या आपने कभी सोचा है कि वेबसाइट्स शॉपिंग कार्ट आइटम्स को कैसे ट्रैक करती हैं या आपका फ्रेंड लिस्ट कैसे दिखाती हैं? यहीं पर arrays और loops काम में आते हैं। Arrays डिजिटल कंटेनरों की तरह होते हैं जो कई जानकारी के टुकड़े रखते हैं, जबकि loops आपको सभी डेटा के साथ कुशलता से काम करने देते हैं बिना बार-बार कोड लिखे।

इन दोनों कॉन्सेप्ट्स का संयोजन आपके प्रोग्रामों में जानकारी को संभालने की नींव बनाता है। आप सीखेंगे कि कैसे हर एक स्टेप मैन्युअल रूप से लिखने से कैसे स्मार्ट और प्रभावी कोड बना सकते हैं जो सैकड़ों या हजारों आइटम्स को तेज़ी से प्रोसेस कर सकता है।

इस पाठ के अंत तक, आप समझ जाएंगे कि कुछ लाइनों के कोड द्वारा कैसे जटिल डेटा टास्क किए जा सकते हैं। आइए इन आवश्यक प्रोग्रामिंग कॉन्सेप्ट्स को एक्सप्लोर करें।

🎥 उपरोक्त छवियों पर क्लिक करें arrays और loops के वीडियो के लिए।

आप यह पाठ Microsoft Learn पर भी ले सकते हैं!

mindmap
  root((डेटा प्रोसेसिंग))
    Arrays
      Structure
        स्क्वायर ब्रैकेट सिंटैक्स
        ज़ीरो-आधारित इंडेक्सिंग
        डायनेमिक साइज़िंग
      Operations
        पुश/पॉप
        शिफ्ट/अनशिफ्ट
        इंडेक्सऑफ़/इंक्लूड्स
      Types
        नंबरों की एरे
        स्ट्रिंग्स की एरे
        मिश्रित प्रकार
    Loops
      For Loops
        काउंटिंग इटरेशन्स
        एरे प्रोसेसिंग
        पूर्वानुमेय प्रवाह
      While Loops
        कंडीशन-आधारित
        अज्ञात पुनरावृत्तियां
        उपयोगकर्ता इनपुट
      Modern Syntax
        for...of
        forEach
        फंक्शनल मेथड्स
    Applications
      Data Analysis
        सांख्यिकी
        फ़िल्टरिंग
        ट्रांसफ़ॉर्मेशन
      User Interfaces
        सूचियां
        मेनू
        गैलरीज़

Arrays

Arrays को एक डिजिटल फाइलिंग कैबिनेट की तरह सोचें - जहाँ एक ड्रॉअर में एक दस्तावेज़ संग्रहीत करने की बजाय, आप कई संबंधित आइटम को एक संरचित कंटेनर में व्यवस्थित कर सकते हैं। प्रोग्रामिंग की भाषा में, arrays आपको एक संगठित पैकेज में कई सूचनाओं को स्टोर करने देते हैं।

चाहे आप एक फोटो गैलरी बना रहे हों, एक टू-डू लिस्ट मैनेज कर रहे हों, या गेम में हाई स्कोर ट्रैक कर रहे हों, arrays डेटा संगठन की नींव प्रदान करते हैं। आइए देखें वे कैसे काम करते हैं।

✅ Arrays हमारे चारों ओर हैं! क्या आप एक वास्तविक जीवन का उदाहरण सोच सकते हैं, जैसे सोलर पैनल एरे?

Arrays बनाना

Array बनाना बहुत सरल है - बस स्क्वायर ब्रैकेट्स का इस्तेमाल करें!

// खाली ऐरे - जैसे कोई खाली शॉपिंग कार्ट जो आइटम्स के इंतजार में हो
const myArray = [];

यहाँ क्या हो रहा है? आपने बस उन स्क्वायर ब्रैकेट्स [] का उपयोग करके एक खाली कंटेनर बनाया है। इसे एक खाली पुस्तकालय की शेल्फ़ की तरह सोचें - यह उस पर आप जो भी पुस्तकें रखना चाहें, उसके लिए तैयार है।

आप अपने array को शुरू से ही प्रारंभिक मानों से भी भर सकते हैं:

// आपकी आइसक्रीम की दुकान का फ्लेवर मेनू
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// एक उपयोगकर्ता की प्रोफ़ाइल जानकारी (विभिन्न प्रकार के डेटा को मिलाते हुए)
const userData = ["John", 25, true, "developer"];

// आपकी पसंदीदा कक्षा के लिए टेस्ट स्कोर
const scores = [95, 87, 92, 78, 85];

ध्यान देने वाली अच्छी बातें:

आप टेक्स्ट, संख्याएँ, या true/false मान एक ही array में रख सकते हैं
केवल प्रत्येक आइटम को कॉमा से अलग करें - आसान!
Arrays संबंधित जानकारी को एक साथ रखने के लिए परफेक्ट हैं

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

Array इंडेक्सिंग

यहाँ कुछ ऐसा है जो शुरुआत में थोड़ा अजीब लग सकता है: arrays अपने आइटम्स को 0 से नंबर करते हैं, ना कि 1 से। यह शून्य-आधारित इंडेक्सिंग कंप्यूटर मेमोरी के काम करने वाले तरीके से प्रभावित है - यह कंप्यूटरिंग भाषाओं जैसे C के प्रारंभिक दिनों से एक प्रोग्रामिंग कन्वेंशन रहा है। Array का प्रत्येक स्थान अपने स्वयं के एड्रेस नंबर को प्राप्त करता है जिसे index कहते हैं।

इंडेक्स	मान	विवरण
0	"Chocolate"	पहला तत्व
1	"Strawberry"	दूसरा तत्व
2	"Vanilla"	तीसरा तत्व
3	"Pistachio"	चौथा तत्व
4	"Rocky Road"	पाँचवाँ तत्व

✅ क्या यह आपको आश्चर्यचकित करता है कि arrays 0 से शुरू होते हैं? कुछ प्रोग्रामिंग भाषाओं में, इंडेक्स 1 से शुरू होते हैं। इसके पीछे एक दिलचस्प इतिहास है, जिसे आप विकिपीडिया पर पढ़ सकते हैं।

Array एलिमेंट्स तक पहुँच:

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

// ब्रैकेट नोटेशन का उपयोग करके व्यक्तिगत तत्वों तक पहुँचें
console.log(iceCreamFlavors[0]); // "चॉकलेट" - पहला तत्व
console.log(iceCreamFlavors[2]); // "वनीला" - तीसरा तत्व
console.log(iceCreamFlavors[4]); // "रॉकी रोड" - अंतिम तत्व

यहाँ क्या हो रहा है:

इस्तेमाल करता है स्क्वायर ब्रैकेट नोटेशन इंडेक्स नंबर के साथ एलिमेंट तक पहुँचने के लिए
रिटर्न करता है उस खास स्थान पर जो मान स्टोर है
गिनती शुरू करता है 0 से, जिससे पहला एलिमेंट इंडेक्स 0 होता है

Array एलिमेंट्स को संशोधित करना:

// एक मौजूदा मान बदलें
iceCreamFlavors[4] = "Butter Pecan";
console.log(iceCreamFlavors[4]); // "बटर पेकान"

// अंत में एक नया तत्व जोड़ें
iceCreamFlavors[5] = "Cookie Dough";
console.log(iceCreamFlavors[5]); // "कूकी डो"

ऊपर दिए गए में हमने:

संशोधित किया इंडेक्स 4 पर मौजूद "Rocky Road" को "Butter Pecan" में
जोड़ा नया एलिमेंट "Cookie Dough" इंडेक्स 5 पर
स्वतः बढ़ाई array की लंबाई जब सीमा से बाहर जोड़ा गया

Array Length और सामान्य मेथड्स

Arrays में अंतर्निहित प्रॉपर्टीज़ और मेथड्स होती हैं जो डेटा के साथ काम करना बहुत आसान बनाती हैं।

Array लंबाई पता करना:

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

// जैसे-जैसे array बदलता है लंबाई स्वतः अपडेट होती है
iceCreamFlavors.push("Mint Chip");
console.log(iceCreamFlavors.length); // 6

मुख्य बातें याद रखें:

रिटर्न करता है array के टोटल आइटम की संख्या
स्वतः अपडेट होता है जब आइटम जोड़े या हटाए जाते हैं
प्रदान करता है डायनामिक काउंट जो loops और सत्यापन के लिए उपयोगी है

अत्यावश्यक Array मेथड्स:

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"); // 1 लौटाता है ("banana" की स्थिति)
const hasApple = fruits.includes("apple"); // सत्य लौटाता है

इन मेथड्स को समझना:

push() (अंत में) और unshift() (शुरुआत में) से आइटम जोड़ता है
pop() (अंत में) और shift() (शुरुआत में) से आइटम हटाता है
indexOf() से आइटम ढूंढ़ता है और includes() से अस्तित्व जांचता है
हटाए गए elements या पोजीशन इंडेक्स जैसे उपयोगी मान वापस करता है

✅ खुद आज़माइए! अपने ब्राउज़र के कंसोल में अपना खुद का एक array बनाकर उससे खेलें।

🧠 Array मूल बातें जांच: अपने डेटा को व्यवस्थित करना

अपने array की समझ कैसे जांचें:

आप क्यों सोचते हैं कि arrays 0 से गिनती शुरू करते हैं, 1 से नहीं?
क्या होता है अगर आप किसी ऐसे इंडेक्स का एक्सेस करें जो मौजूद नहीं है (जैसे arr[100] जब array में 5 आइटम हों)?
क्या आप तीन वास्तविक दुनिया के उदाहरण सोच सकते हैं जहाँ arrays उपयोगी होंगे?

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

वास्तविक दुनिया की समझ: Arrays प्रोग्रामिंग में हर जगह हैं! सोशल मीडिया फ़ीड्स, शॉपिंग कार्ट्स, फोटो गैलरी, प्लेलिस्ट गाने - ये सब arrays के पीछे काम करते हैं!

Loops

सोचिए कि चार्ल्स डिकेंस के उपन्यासों में प्रसिद्ध सजा जहाँ छात्रों को स्लेट पर बार-बार पंक्तियाँ लिखनी पड़ती थीं। कल्पना करें कि आप किसी को केवल आदेश दे सकें कि "इस वाक्य को 100 बार लिखो" और यह अपने आप हो जाए। यही loops आपके कोड के लिए करते हैं।

Loops ऐसे हैं जैसे आपके पास एक थकता नहीं सहायक हो जो बिना गलती के काम दोहराता रहता है। चाहे आपको शॉपिंग कार्ट के हर आइटम को चेक करना हो या किसी एल्बम के सभी फ़ोटो दिखाने हों, loops दोहराव को कुशलतापूर्वक संभालते हैं।

JavaScript कई प्रकार के loops प्रदान करता है। आइए प्रत्येक को देखें और समझें कि उन्हें कब उपयोग करना चाहिए।

flowchart TD
    A["🔄 लूप प्रकार"] --> B["फॉर लूप"]
    A --> C["व्हाइल लूप"]
    A --> D["फॉर...ऑफ लूप"]
    A --> E["forEach मेथड"]
    
    B --> B1["ज्ञात पुनरावृत्तियां"]
    B --> B2["काउंटर-आधारित"]
    B --> B3["for(init; condition; increment)"]
    
    C --> C1["अज्ञात पुनरावृत्तियां"]
    C --> C2["शर्त-आधारित"]
    C --> C3["while(condition)"]
    
    D --> D1["आधुनिक ES6+"]
    D --> D2["एरे पुनरावृत्ति"]
    D --> D3["for(item of array)"]
    
    E --> E1["कार्यात्मक शैली"]
    E --> E2["एरे मेथड"]
    E --> E3["array.forEach(callback)"]
    
    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

For Loop

for loop ऐसा है जैसे टाइमर सेट करना - आपको पता होता है कि किसी काम को कितनी बार करना है। यह सुपर ऑर्गनाइज़्ड और प्रेडिक्टेबल होता है, जो इसके perfect बनाता है जब आप arrays के साथ काम कर रहे हों या गिनती करनी हो।

For loop संरचना:

घटक	उद्देश्य	उदाहरण
Initialization	प्रारंभिक बिंदु सेट करना	`let i = 0`
Condition	कब जारी रखना है	`i < 10`
Increment	कैसे अपडेट करना है	`i++`

// 0 से 9 तक गिनती
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 को 0 वैल्यू देता है
हर पुनरावृति से पहले शर्त i < 10 की जांच करता है
जब शर्त सही होती है तब कोड ब्लॉक को एक्सीक्यूट करता है
हर पुनरावृति के बाद i++ से i को 1 से बढ़ाता है
जब शर्त गलत हो जाती है (जब i 10 पहुँचता है) तो बंद हो जाता है

✅ इस कोड को ब्राउज़र कंसोल में चलाएं। क्या होता है जब आप काउंटर, शर्त, या पुनरावृत्ति एक्सप्रेशन में छोटे बदलाव करते हैं? क्या आप इसे उल्टा कर सकते हैं, काउंटडाउन बनाते हुए?

🗓️ For Loop महारत परीक्षा: नियंत्रित दोहराव

अपने for loop की समझ की जाँच करें:

for loop के तीन भाग क्या हैं और प्रत्येक क्या करता है?
आप कैसे array में उल्टी दिशा से loop करेंगे?
क्या होता है अगर आप increment पार्ट (i++) भूल जाते हैं?

flowchart TD
    A["🚀 फ़ॉर लूप प्रारंभ करें"] --> B["प्रारंभ करें: let i = 0"]
    B --> C{"शर्त: i < array.length?"}
    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

Loop ज्ञान: जब आपको पता होता है कि किसी काम को कितनी बार दोहराना है तो for loops सबसे बेहतरीन होते हैं। वे array प्रोसेसिंग के लिए सबसे आम विकल्प हैं!

While Loop

while loop ऐसा है जैसे कह रहे हों "जब तक यह शर्त सही है तब तक करते रहो" - आपको नहीं पता होता कि यह कितनी बार चलेगा, लेकिन पता होता है कि कब रुकना है। यह तब परफेक्ट होता है जब आपको उपयोगकर्ता से इनपुट मांगते रहना हो या डेटा खोजते रहना हो जब तक कुछ न मिल जाए।

While loop की विशेषताएँ:

शर्त सही होने तक चलता रहता है
मैन्युअल रूप से किसी भी काउंटर वेरिएबल को मैनेज करने की जरूरत होती है
हर पुनरावृति से पहले शर्त की जांच करता है
अगर शर्त कभी गलत न हो तो अनंत loops का खतरा होता है

// बुनियादी गिनती का उदाहरण
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 को लूप के अंदर मैन्युअल रूप से नियंत्रित करता है
असीमित loops से बचने के लिए काउंटर बढ़ाता है
उपयोगकर्ता इनपुट और प्रयास सिमित करने के व्यावहारिक उदाहरण दिखाता है
अंतहीन निष्पादन से बचाव के लिए सुरक्षा तंत्र शामिल करता है

♾️ While Loop ज्ञान परीक्षा: शर्त-आधारित दोहराव

अपने while loop की समझ की जाँच करें:

while loops का मुख्य खतरा क्या है?
आप किस स्थिति में for loop के बजाय while loop चुनेंगे?
आप अनंत loops को कैसे रोक सकते हैं?

flowchart LR
    A["🔄 व्हाइल बनाम फॉर"] --> B["व्हाइल लूप"]
    A --> C["फॉर लूप"]
    
    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

सुरक्षा पहले: While loops शक्तिशाली होते हैं लेकिन शर्त प्रबंधन में सावधानी की जरूरत होती है। हमेशा सुनिश्चित करें कि आपका लूप शर्त अंततः गलत हो जाएगी!

आधुनिक Loop विकल्प

JavaScript आधुनिक loop सिंटैक्स प्रदान करता है जो आपके कोड को अधिक पठनीय और त्रुटि-रहित बना सकता है।

For...of Loop (ES6+):

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

// आधुनिक तरीका - साफ और सुरक्षित
for (const color of colors) {
  console.log(`Color: ${color}`);
}

// पारंपरिक फॉर लूप के साथ तुलना करें
for (let i = 0; i < colors.length; i++) {
  console.log(`Color: ${colors[i]}`);
}

for...of के मुख्य फायदे:

इंडेक्स प्रबंधन और ऑफ-बाय-वन त्रुटियों को खत्म करता है
सीधे array एलिमेंट्स तक पहुंच प्रदान करता है
कोड पठनीयता में सुधार करता है और सिंटैक्स जटिलता कम करता है

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 के बारे में जानने योग्य:

हर array एलिमेंट के लिए एक फ़ंक्शन को चलाता है
एलिमेंट वैल्यू और इंडेक्स दोनों को पैरामीटर के रूप में प्रदान करता है
शुरुआत में रोकना संभव नहीं (पारंपरिक loops की तरह)
undefined रिटर्न करता है (यह नया array नहीं बनाता)

✅ आप for loop और while loop में से क्यों चुनेंगे? StackOverflow पर 17K दर्शकों ने यही सवाल किया था, और कुछ राय आपके लिए रोचक हो सकती हैं।

🎨 आधुनिक Loop सिंटैक्स जांच: ES6+ को अपनाना

अपने आधुनिक JavaScript ज्ञान का मूल्यांकन करें:

for...of के पारंपरिक for loops पर क्या फायदे हैं?
आप कब पारंपरिक for loops को प्राथमिकता देंगे?
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]

आधुनिक प्रवृत्ति: ES6+ सिंटैक्स जैसे for...of और forEach array पुनरावृत्ति के लिए प्रिय हो रहे हैं क्योंकि ये साफ़-सुथरे और त्रुटि-रहित हैं!

Loops और Arrays

Arrays को loops के साथ मिलाकर शक्तिशाली डेटा प्रोसेसिंग क्षमताएं बनती हैं। यह संयोजन कई प्रोग्रामिंग कार्यों की नींव है, जैसे सूचियाँ दिखाना या सांख्यकीय गणना करना।

परंपरागत Array प्रोसेसिंग:

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

// क्लासिक फॉर लूप तरीका
for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`);
}

// आधुनिक फॉर...ऑफ तरीका
for (const flavor of iceCreamFlavors) {
  console.log(`Available flavor: ${flavor}`);
}

आइए प्रत्येक दृष्टिकोण को समझें:

लूप सीमा निर्धारित करने के लिए array length प्रॉपर्टी का उपयोग करता है
पारंपरिक for loops में इंडेक्स के द्वारा एलिमेंट्स को एक्सेस करता है
for...of loops में सीधे एलिमेंट एक्सेस प्रदान करता है
प्रत्येक array एलिमेंट को ठीक एक बार प्रोसेस करता है

व्यावहारिक डेटा प्रोसेसिंग उदाहरण:

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}`);

यह कोड इस तरह काम करता है:

योग और अत्यधिक मानों के लिए ट्रैकिंग वेरिएबल सेट करता है
एक कुशल लूप के साथ प्रत्येक ग्रेड को प्रोसेस करता है
औसत गणना के लिए कुल जमा करता है
प्रत्येक पुनरावृति में उच्चतम और निम्नतम मान ट्रैक करता है
लूप पूरा होने के बाद अंतिम सांख्यिकी गणना करता है

✅ अपने ब्राउज़र कंसोल में अपनी बनाई हुई array पर लूपिंग का प्रयोग करके देखें।

flowchart TD
    A["📦 एरे डेटा"] --> B["🔄 लूप प्रोसेसिंग"]
    B --> C["📈 परिणाम"]
    
    A1["[85, 92, 78, 96, 88]"] --> A
    
    B --> B1["कुल निकालें"]
    B --> B2["न्यूनतम/अधिकतम खोजें"]
    B --> B3["शर्तें गिनें"]
    B --> B4["डेटा बदलें"]
    
    C --> C1["औसत: 87.8"]
    C --> C2["सबसे उच्च: 96"]
    C --> C3["पास: 5/5"]
    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

GitHub Copilot एजेंट चुनौती 🚀

एजेंट मोड का उपयोग करके निम्नलिखित चुनौती पूरी करें:

विवरण: Arrays और loops को मिलाकर एक व्यापक डेटा प्रोसेसिंग फ़ंक्शन बनाएं जो एक डेटा सेट का विश्लेषण करे और सार्थक अंतर्दृष्टि उत्पन्न करे।

प्रॉम्प्ट: एक फ़ंक्शन analyzeGrades बनाएं जो एक array ले जो छात्र ग्रेड ऑब्जेक्ट्स (प्रत्येक में नाम और स्कोर विशेषताएँ हों) को इनपुट लेता हो और एक वस्तु लौटाए जिसमें उच्चतम स्कोर, निम्नतम स्कोर, औसत स्कोर, पास हुए छात्रों की गिनती (स्कोर >= 70), और औसत से ऊपर स्कोर करने वाले छात्रों के नाम की array शामिल हो। अपनी समाधान में कम से कम दो अलग-अलग loop प्रकारों का उपयोग करें।

यहाँ agent mode के बारे में और जानें।

🚀 चुनौती

JavaScript कई आधुनिक एरे मेथड प्रदान करता है जो विशिष्ट कार्यों के लिए परंपरागत लूप्स को बदल सकते हैं। forEach, for-of, map, filter, और reduce का अन्वेषण करें।

आपकी चुनौती: कम से कम तीन अलग-अलग एरे मेथड्स का उपयोग करके छात्र ग्रेड्स का उदाहरण पुनः तैयार करें। देखें कि आधुनिक JavaScript सिंटैक्स के साथ कोड कितना साफ और अधिक पठनीय बन जाता है।

Post-Lecture Quiz

Post-lecture quiz

Review & Self Study

JavaScript में Arrays के साथ कई मेथड्स जुड़े हुए हैं, जो डेटा हेरफेर के लिए अत्यंत उपयोगी हैं। इन मेथड्स के बारे में पढ़ें और अपने बनाए गए किसी एरे पर कुछ मेथड्स जैसे push, pop, slice, और splice आज़माएँ।

Assignment

Loop an Array

📊 आपका Arrays & Loops टूलकिट सारांश

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

🚀 आपके Arrays & Loops मास्टरी टाइमलाइन

⚡ अगले 5 मिनट में आप क्या कर सकते हैं

अपनी पसंदीदा फिल्मों की एक एरे बनाएं और विशिष्ट तत्वों तक पहुँचें
1 से 10 तक गिनने वाला for लूप लिखें
लेसन में दिए आधुनिक एरे मेथड्स की चुनौती आज़माएं
अपने ब्राउज़र कंसोल में एरे इंडेक्सिंग का अभ्यास करें

🎯 इस घंटे में आप क्या हासिल कर सकते हैं

पोस्ट-लेसन क्विज़ पूरा करें और कठिन अवधारणाओं की समीक्षा करें
GitHub Copilot चुनौती से व्यापक ग्रेड विश्लेषक बनाएं
एक सरल शॉपिंग कार्ट बनाएं जो आइटम जोड़ता और हटाता हो
विभिन्न लूप प्रकारों के बीच परिवर्तन का अभ्यास करें
push, pop, slice, और splice जैसे एरे मेथड्स के साथ प्रयोग करें

📅 आपकी सप्ताह भर की डेटा प्रोसेसिंग यात्रा

"Loop an Array" असाइन्मेंट को रचनात्मक सुधारों के साथ पूरा करें
एरे और लूप्स का उपयोग करके टू-डू लिस्ट एप्लिकेशन बनाएं
संख्यात्मक डेटा के लिए एक सरल सांख्यिकी कैलकुलेटर बनाएं
MDN एरे मेथड्स के साथ अभ्यास करें
एक फोटो गैलरी या म्यूजिक प्लेलिस्ट इंटरफ़ेस बनाएं
map, filter, और reduce के साथ फंक्शनल प्रोग्रामिंग का अन्वेषण करें

🌟 आपका महीने भर का परिवर्तन

उन्नत एरे ऑपरेशंस और प्रदर्शन अनुकूलन में महारत हासिल करें
पूर्ण डेटा विज़ुअलाइज़ेशन डैशबोर्ड बनाएं
डेटा प्रोसेसिंग से संबंधित ओपन सोर्स प्रोजेक्ट्स में योगदान दें
व्यावहारिक उदाहरणों के साथ दूसरों को एरे और लूप्स सिखाएं
पुन: उपयोग योग्य डेटा प्रोसेसिंग फंक्शंस की व्यक्तिगत लाइब्रेरी बनाएं
एरे पर आधारित एल्गोरिदम और डेटा संरचनाओं का अन्वेषण करें

🏆 अंतिम डेटा प्रोसेसिंग चैम्पियन चेक-इन

अपने एरे और लूप मास्टरी का जश्न मनाएं:

आपने वास्तविक दुनिया के अनुप्रयोगों के लिए सबसे उपयोगी एरे ऑपरेशन क्या सीखा है?
कौन सा लूप प्रकार आपको सबसे प्राकृतिक लगता है और क्यों?
एरे और लूप्स को समझने से आपका डेटा व्यवस्थित करने का दृष्टिकोण कैसे बदला है?
आप अगला कौन सा जटिल डेटा प्रोसेसिंग कार्य करना चाहेंगे?

journey
    title आपका डेटा प्रोसेसिंग विकास
    section आज
      Array Confusion: 3: आप
      Loop Basics: 4: आप
      Index Understanding: 5: आप
    section इस सप्ताह
      Method Mastery: 4: आप
      Efficient Processing: 5: आप
      Modern Syntax: 5: आप
    section अगला महीना
      Complex Algorithms: 5: आप
      Performance Optimization: 5: आप
      Teaching Others: 5: आप

📦 आपने डेटा संगठन और प्रोसेसिंग की शक्ति को अनलॉक कर लिया है! एरे और लूप लगभग प्रत्येक एप्लिकेशन की नींव हैं जो आप कभी भी बनाएंगे। सरल सूचियों से लेकर जटिल डेटा विश्लेषण तक, अब आपके पास जानकारी को कुशलतापूर्वक और सुंदर रूप से संभालने के उपकरण हैं। हर गतिशील वेबसाइट, मोबाइल ऐप, और डेटा-आधारित एप्लिकेशन इन बुनियादी अवधारणाओं पर निर्भर करता है। स्केलेबल डेटा प्रोसेसिंग की दुनिया में आपका स्वागत है! 🎉

अस्वीकरण: यह दस्तावेज़ AI अनुवाद सेवा Co-op Translator का उपयोग करके अनुवादित किया गया है। यद्यपि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या अशुद्धियाँ हो सकती हैं। मूल भाषा में मूल दस्तावेज़ को अधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए पेशेवर मानव अनुवाद की सलाह दी जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं।