31 KiB

Raw Blame History

जाभास्क्रिप्ट आधारभूत: एरेहरू र लूपहरू

स्केच नोट टोमोमी इमुरा द्वारा

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

के तपाईंले कहिल्यै सोच्नुभएको छ कि वेबसाइटहरूले किन शपिङ कार्टका वस्तुहरू ट्र्याक गर्छन् वा तपाईंको साथीहरूको सूची देखाउँछन्? यहीँ एरेहरू र लूपहरूको भूमिका आउँछ। एरेहरू डिजिटल कन्टेनर जस्तै हुन् जसले धेरै जानकारीहरू राख्छन्, जबकि लूपहरूले तपाईंलाई त्यो सबै डेटा कुशलतापूर्वक काम गर्न अनुमति दिन्छन्।

यी दुई अवधारणाहरूले तपाईंको प्रोग्रामहरूमा जानकारी व्यवस्थापनको आधार बनाउँछन्। तपाईंले प्रत्येक चरणलाई म्यानुअली लेख्ने कामबाट स्मार्ट, कुशल कोड सिर्जना गर्न सिक्नुहुनेछ जसले सयौं वा हजारौं वस्तुहरू छिटो प्रक्रिया गर्न सक्छ।

यस पाठको अन्त्यसम्ममा, तपाईंले केही लाइनको कोडले जटिल डेटा कार्यहरू कसरी पूरा गर्ने भन्ने कुरा बुझ्नुहुनेछ। यी आवश्यक प्रोग्रामिङ अवधारणाहरू अन्वेषण गरौं।

🎥 माथिका तस्बिरहरूमा क्लिक गरेर एरेहरू र लूपहरूको भिडियो हेर्नुहोस्।

तपाईं यो पाठ Microsoft Learn मा लिन सक्नुहुन्छ!

एरेहरू

एरेहरूलाई डिजिटल फाइलिङ क्याबिनेटको रूपमा सोच्नुहोस् - एउटा दराजमा एउटा कागजात भण्डारण गर्नुको सट्टा, तपाईं धेरै सम्बन्धित वस्तुहरूलाई एउटै संरचित कन्टेनरमा व्यवस्थित गर्न सक्नुहुन्छ। प्रोग्रामिङ सन्दर्भमा, एरेहरूले तपाईंलाई धेरै जानकारीहरू एउटै प्याकेजमा भण्डारण गर्न अनुमति दिन्छ।

चाहे तपाईं फोटो ग्यालरी बनाउँदै हुनुहुन्छ, टु-डु सूची व्यवस्थापन गर्दै हुनुहुन्छ, वा खेलमा उच्च स्कोरहरू ट्र्याक गर्दै हुनुहुन्छ, एरेहरूले डेटा संगठनको आधार प्रदान गर्छन्। हेर्नुहोस्, यो कसरी काम गर्छ।

✅ एरेहरू हाम्रो वरिपरि छन्! के तपाईं एरेको वास्तविक जीवन उदाहरण सोच्न सक्नुहुन्छ, जस्तै सौर्य प्यानल एरे?

एरेहरू सिर्जना गर्नु

एरे सिर्जना गर्नु धेरै सरल छ - केवल स्क्वायर ब्र्याकेटहरू प्रयोग गर्नुहोस्!

// Empty array - like an empty shopping cart waiting for items
const myArray = [];

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

तपाईं आफ्नो एरेलाई सुरुमा नै प्रारम्भिक मानहरूद्वारा भरिएको बनाउन सक्नुहुन्छ:

// Your ice cream shop's flavor menu
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// A user's profile info (mixing different types of data)
const userData = ["John", 25, true, "developer"];

// Test scores for your favorite class
const scores = [95, 87, 92, 78, 85];

ध्यान दिन लायक कुराहरू:

तपाईंले एउटै एरेमा पाठ, संख्या, वा सत्य/झुटो मानहरू भण्डारण गर्न सक्नुहुन्छ
प्रत्येक वस्तुलाई अल्पविरामले छुट्याउनुहोस् - सजिलो!
एरेहरू सम्बन्धित जानकारीहरू सँगै राख्नको लागि उत्तम छन्

एरे इन्डेक्सिङ

यहाँ केहि असामान्य लाग्न सक्छ: एरेहरूले आफ्नो वस्तुहरूलाई 0 बाट सुरु गरेर नम्बर गर्छन्, 1 बाट होइन। यो शून्य-आधारित इन्डेक्सिङ कम्प्युटर मेमोरी कसरी काम गर्छ भन्ने कुरामा आधारित छ - यो प्रोग्रामिङ परम्परा कम्प्युटिङ भाषाहरू जस्तै C को प्रारम्भिक दिनदेखि चल्दै आएको छ। एरेको प्रत्येक स्थानले इन्डेक्स भनिने ठेगाना नम्बर पाउँछ।

इन्डेक्स	मान	विवरण
0	"चकलेट"	पहिलो तत्व
1	"स्ट्रबेरी"	दोस्रो तत्व
2	"भ्यानिला"	तेस्रो तत्व
3	"पिस्टाचियो"	चौथो तत्व
4	"रकी रोड"	पाँचौं तत्व

✅ के तपाईंलाई एरेहरू शून्य इन्डेक्सबाट सुरु हुन्छ भन्ने कुरा अचम्म लाग्छ? केही प्रोग्रामिङ भाषाहरूमा इन्डेक्सहरू 1 बाट सुरु हुन्छ। यसको बारेमा रोचक इतिहास विकिपिडिया मा पढ्न सक्नुहुन्छ।

एरे तत्वहरू पहुँच गर्नु:

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

// Access individual elements using bracket notation
console.log(iceCreamFlavors[0]); // "Chocolate" - first element
console.log(iceCreamFlavors[2]); // "Vanilla" - third element
console.log(iceCreamFlavors[4]); // "Rocky Road" - last element

यहाँ के भइरहेको छ:

प्रयोग गर्छ स्क्वायर ब्र्याकेट नोटेशन इन्डेक्स नम्बरसँग तत्वहरू पहुँच गर्न
फिर्ता गर्छ एरेको सो विशेष स्थानमा भण्डारण गरिएको मान
सुरु गर्छ 0 बाट गन्न, पहिलो तत्वको इन्डेक्स 0 बनाउँछ

एरे तत्वहरू परिमार्जन गर्नु:

// Change an existing value
iceCreamFlavors[4] = "Butter Pecan";
console.log(iceCreamFlavors[4]); // "Butter Pecan"

// Add a new element at the end
iceCreamFlavors[5] = "Cookie Dough";
console.log(iceCreamFlavors[5]); // "Cookie Dough"

माथिको उदाहरणमा हामीले:

परिमार्जन गर्‍यौं इन्डेक्स 4 मा रहेको "रकी रोड" लाई "बटर पेकन" मा
थप गर्‍यौं नयाँ तत्व "कुकी डो" इन्डेक्स 5 मा
स्वतः विस्तार गर्‍यो एरेको लम्बाइ जब वर्तमान सीमा भन्दा बाहिर थपियो

एरे लम्बाइ र सामान्य विधिहरू

एरेहरूमा बिल्ट-इन गुणहरू र विधिहरू हुन्छन् जसले डेटा काम गर्न धेरै सजिलो बनाउँछ।

एरे लम्बाइ पत्ता लगाउनु:

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

// Length updates automatically as array changes
iceCreamFlavors.push("Mint Chip");
console.log(iceCreamFlavors.length); // 6

महत्वपूर्ण बुँदाहरू सम्झनुहोस्:

फिर्ता गर्छ एरेमा कुल तत्वहरूको संख्या
स्वतः अपडेट हुन्छ जब तत्वहरू थपिन्छन् वा हटाइन्छन्
प्रदान गर्छ लूपहरू र मान्यताका लागि गतिशील गणना

आवश्यक एरे विधिहरू:

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

// Add elements
fruits.push("grape");           // Adds to end: ["apple", "banana", "orange", "grape"]
fruits.unshift("strawberry");   // Adds to beginning: ["strawberry", "apple", "banana", "orange", "grape"]

// Remove elements
const lastFruit = fruits.pop();        // Removes and returns "grape"
const firstFruit = fruits.shift();     // Removes and returns "strawberry"

// Find elements
const index = fruits.indexOf("banana"); // Returns 1 (position of "banana")
const hasApple = fruits.includes("apple"); // Returns true

यी विधिहरू बुझ्नुहोस्:

थप्छ push() (अन्त्यमा) र unshift() (सुरुमा) द्वारा तत्वहरू
हटाउँछ pop() (अन्त्यमा) र shift() (सुरुमा) द्वारा तत्वहरू
पत्ता लगाउँछ indexOf() द्वारा तत्वहरू र includes() द्वारा अस्तित्व जाँच्छ
फिर्ता गर्छ उपयोगी मानहरू जस्तै हटाइएका तत्वहरू वा स्थिति इन्डेक्सहरू

✅ आफैं प्रयास गर्नुहोस्! आफ्नो ब्राउजरको कन्सोलमा एरे सिर्जना गरेर परिमार्जन गर्नुहोस्।

लूपहरू

चार्ल्स डिकेन्सका उपन्यासहरूमा प्रसिद्ध सजायको बारेमा सोच्नुहोस् जहाँ विद्यार्थीहरूले स्लेटमा बारम्बार लाइनहरू लेख्नुपर्थ्यो। कल्पना गर्नुहोस् यदि तपाईं कसैलाई "यो वाक्य १०० पटक लेख्नुहोस्" भनेर निर्देशन दिन सक्नुहुन्छ र यो स्वचालित रूपमा पूरा हुन्छ। यही कुरा लूपहरूले तपाईंको कोडका लागि गर्छ।

लूपहरू tireless सहायक जस्तै हुन् जसले कार्यहरू दोहोर्याउन सक्छ। चाहे तपाईं शपिङ कार्टको प्रत्येक वस्तु जाँच गर्न चाहनुहुन्छ वा एल्बममा सबै फोटोहरू देखाउन चाहनुहुन्छ, लूपहरूले दोहोर्याइलाई कुशलतापूर्वक व्यवस्थापन गर्छ।

जाभास्क्रिप्टले छनोट गर्नका लागि धेरै प्रकारका लूपहरू प्रदान गर्दछ। प्रत्येकलाई जाँच गरौं र कहिले प्रयोग गर्ने बुझौं।

फोर लूप

for लूप टाइमर सेट गर्ने जस्तै हो - तपाईंलाई थाहा छ कि तपाईंले कति पटक केहि गर्न चाहनुहुन्छ। यो धेरै व्यवस्थित र पूर्वानुमान योग्य छ, जसले गर्दा यो एरेहरूसँग काम गर्दा वा वस्तुहरू गणना गर्न उत्तम बनाउँछ।

फोर लूप संरचना:

घटक	उद्देश्य	उदाहरण
सुरुवात	सुरु बिन्दु सेट गर्छ	`let i = 0`
सर्त	कहिले जारी राख्ने	`i < 10`
वृद्धि	कसरी अपडेट गर्ने	`i++`

// Counting from 0 to 9
for (let i = 0; i < 10; i++) {
  console.log(`Count: ${i}`);
}

// More practical example: processing scores
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++ द्वारा
रोक्छ जब सर्त झुटो हुन्छ (जब i 10 पुग्छ)

✅ यो कोड ब्राउजर कन्सोलमा चलाउनुहोस्। काउन्टर, सर्त, वा पुनरावृत्ति अभिव्यक्तिमा सानो परिवर्तन गर्दा के हुन्छ? के तपाईं यसलाई उल्टो चलाउन सक्नुहुन्छ, काउन्टडाउन सिर्जना गर्दै?

ह्वाइल लूप

while लूप "यो गरिराख्नुहोस् जबसम्म..." भन्ने जस्तै हो - तपाईंलाई थाहा नहुन सक्छ कि यो कति पटक चल्छ, तर तपाईंलाई थाहा छ कहिले रोक्ने। यो जस्तै प्रयोगका लागि उत्तम छ जहाँ तपाईंले प्रयोगकर्ताबाट इनपुट माग्नुपर्छ जबसम्म तपाईंलाई आवश्यक कुरा प्राप्त हुँदैन, वा डेटा खोज्नुपर्छ जबसम्म तपाईंले खोजेको कुरा भेट्नुहुन्न।

ह्वाइल लूप विशेषताहरू:

जारी राख्छ सर्त सत्य रहँदासम्म कार्यान्वयन
आवश्यक छ कुनै पनि काउन्टर भेरिएबलहरूको म्यानुअल व्यवस्थापन
जाँच गर्छ सर्त प्रत्येक पुनरावृत्तिको अघि
जोखिम छ अनन्त लूपहरू यदि सर्त कहिल्यै झुटो हुँदैन भने

// Basic counting example
let i = 0;
while (i < 10) {
  console.log(`While count: ${i}`);
  i++; // Don't forget to increment!
}

// More practical example: processing user input
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 लूपको भित्र म्यानुअल रूपमा
वृद्धि गर्छ काउन्टर अनन्त लूपहरू रोक्न
व्यावहारिक प्रयोग केस देखाउँछ प्रयोगकर्ता इनपुट र प्रयास सीमित गर्दै
सुरक्षा संयन्त्रहरू समावेश गर्छ अन्तहीन कार्यान्वयन रोक्न

आधुनिक लूप विकल्पहरू

जाभास्क्रिप्टले आधुनिक लूप सिन्ट्याक्स प्रदान गर्दछ जसले तपाईंको कोडलाई पढ्न सजिलो र कम त्रुटिपूर्ण बनाउँछ।

फोर...अफ लूप (ES6+):

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

// Modern approach - cleaner and safer
for (const color of colors) {
  console.log(`Color: ${color}`);
}

// Compare with traditional for loop
for (let i = 0; i < colors.length; i++) {
  console.log(`Color: ${colors[i]}`);
}

फोर...अफका मुख्य फाइदाहरू:

इन्डेक्स व्यवस्थापन हटाउँछ र सम्भावित त्रुटिहरू
प्रत्यक्ष पहुँच प्रदान गर्छ एरे तत्वहरूमा
कोड पढ्न सजिलो बनाउँछ र सिन्ट्याक्स जटिलता घटाउँछ

forEach विधि:

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

// Using forEach for functional programming style
prices.forEach((price, index) => {
  console.log(`Item ${index + 1}: $${price.toFixed(2)}`);
});

// forEach with arrow functions for simple operations
prices.forEach(price => console.log(`Price: $${price}`));

forEachको बारेमा जान्नुपर्ने कुरा:

प्रत्येक एरे तत्वको लागि कार्यान्वयन गर्छ एक कार्य
प्रदान गर्छ तत्व मान र इन्डेक्सलाई प्यारामिटरको रूपमा
छोड्न सकिँदैन प्रारम्भिक रूपमा (पारम्परिक लूपहरू जस्तो)
फिर्ता गर्छ undefined (नयाँ एरे सिर्जना गर्दैन)

✅ किन तपाईंले फोर लूप बनाम ह्वाइल लूप छनोट गर्नुहुन्छ? १७ हजार दर्शकहरूले StackOverflow मा यही प्रश्न गरेका थिए, र केही विचारहरू तपाईंलाई रोचक लाग्न सक्छ।

लूपहरू र एरेहरू

एरेहरूलाई लूपहरूसँग मिलाएर शक्तिशाली डेटा प्रशोधन क्षमता सिर्जना हुन्छ। यो जोडी धेरै प्रोग्रामिङ कार्यहरूको लागि आधारभूत हो, सूचीहरू देखाउनेदेखि लिएर तथ्याङ्क गणना गर्नसम्म।

पारम्परिक एरे प्रशोधन:

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

// Classic for loop approach
for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`);
}

// Modern for...of approach
for (const flavor of iceCreamFlavors) {
  console.log(`Available flavor: ${flavor}`);
}

प्रत्येक दृष्टिकोण बुझौं:

प्रयोग गर्छ एरे लम्बाइ गुण लूप सीमा निर्धारण गर्न
पहुंच गर्छ पारम्परिक फोर लूपहरूमा इन्डेक्सद्वारा तत्वहरू
प्रत्यक्ष तत्व पहुँच प्रदान गर्छ फोर...अफ लूपहरूमा
प्रत्येक एरे तत्वलाई ठीक एक पटक प्रक्रिया गर्छ

व्यावहारिक डेटा प्रशोधन उदाहरण:

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

// Process all grades with a single loop
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}`);

यो कोड कसरी काम गर्छ:

सुरु गर्छ ट्र्याकिङ भेरिएबलहरू कुल र चरमहरूको लागि
प्रत्येक ग्रेड प्रक्रिया गर्छ एकल कुशल लूपसँग
कुल जम्मा गर्छ औसत गणनाको लागि
ट्र्याक गर्छ उच्चतम र न्यूनतम मानहरू पुनरावृत्तिको क्रममा
अन्तिम तथ्याङ्क गणना गर्छ लूप पूरा भएपछि

✅ आफ्नो ब्राउजरको कन्सोलमा आफ्नै एरेमा लूप गर्दै प्रयोग गर्नुहोस्।

GitHub Copilot Agent Challenge 🚀

Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:

विवरण: एरेहरू र लूपहरूलाई संयोजन गरेर डेटा सेट विश्लेषण गर्ने र अर्थपूर्ण जानकारी उत्पन्न गर्ने व्यापक डेटा प्रशोधन कार्य सिर्जना गर्नुहोस्।

प्रेरणा: analyzeGrades नामक एक कार्य सिर्जना गर्नुहोस् जसले विद्यार्थी ग्रेड वस्तुहरूको एरे (प्रत्येकमा नाम र स्कोर गुणहरू समावेश छ) लिन्छ र तथ्याङ्कहरू सहितको वस्तु फिर्ता गर्छ जस्तै उच्चतम स्कोर, न्यूनतम स्कोर, औसत स्कोर, पास भएका विद्यार्थीहरूको संख्या (स्कोर >= 70), र औसतभन्दा माथि स्कोर गर्ने विद्यार्थीहरूको नामहरूको एरे। आफ्नो समाधानमा कम्तीमा दुई फरक लूप प्रकार प्रयोग गर्नुहोस्।

Agent मोडको बारेमा यहाँ थप जान्नुहोस्।

🚀 चुनौती

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

तपाईंको चुनौती: विद्यार्थी ग्रेड उदाहरणलाई कम्तीमा तीन फरक एरे विधिहरू प्रयोग गरेर पुनःलेखन गर्नुहोस्। आधुनिक जाभास्क्रिप्ट सिन्ट्याक्सले कोड कति सफा र पढ्न सजिलो बनाउँछ ध्यान दिनुहोस्।

पोस्ट-लेक्चर क्विज

समीक्षा र आत्म अध्ययन

जाभास्क्रिप्टमा एरेहरूमा धेरै विधिहरू संलग्न छन्, जुन डेटा हेरफेरको लागि अत्यन्त उपयोगी छन्। यी विधिहरूको बारेमा पढ्नुहोस् र आफ्नो सिर्जना गरिएको एरेमा केही विधिहरू (जस्तै push, pop, slice र splice) प्रयास गर्नुहोस्।

असाइनमेन्ट

एरे लूप गर्नुहोस्

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

31 KiB Raw Blame History