जावास्क्रिप्ट में ऐरे को कैसे ट्रैवर्स करें: forEach, for...of और अन्य विधियाँ

"ऐरे को ट्रैवर्स करना" क्यों एक बुनियादी बात है जिसे आपको कंठस्थ करना चाहिए

कल्पना करें: आपके पास छात्रों की एक सूची, एक शॉपिंग कार्ट या संख्याओं का एक सेट है। आपको प्रत्येक तत्व के साथ कुछ करना है: नाम प्रिंट करना, योग निकालना, केवल वयस्कों को फ़िल्टर करना। जावास्क्रिप्ट में इसके लिए कई तरीके हैं, और उनमें से सबसे लोकप्रिय है forEach लूप।

Stack Overflow पर "Loop (for each) over an array in JavaScript" प्रश्न ने हज़ारों व्यूज़ प्राप्त किए हैं। इसका मतलब है कि अनुभवी डेवलपर्स भी कभी-कभी बारीकियों में भ्रमित हो जाते हैं। हम सब कुछ स्पष्ट रूप से समझाएंगे: क्लासिक for से लेकर आधुनिक for...of और शक्तिशाली forEach तक। आप जानेंगे कि कब किस विधि का उपयोग करना है, और ऐरे से डरना छोड़ देंगे।

विधि #1: क्लासिक for लूप — सभी ट्रैवर्सल का दादा

सबसे पुराना और समझने में आसान तरीका। आप स्वयं काउंटर और एग्ज़िट कंडीशन को नियंत्रित करते हैं। यह तब आदर्श होता है जब आपको लूप को जल्दी रोकना हो या कुछ तत्वों को छोड़ना हो।

const fruits = ['सेब', 'केला', 'संतरा'];
for (let i = 0; i < fruits.length; i++) {
    console.log(`फल #${i + 1}: ${fruits[i]}`);
}

लाभ: पूर्ण नियंत्रण, break और continue का उपयोग कर सकते हैं।
\nनुकसान: वर्बोज़, इंडेक्स में गलती करना आसान।

क्लासिक for का उपयोग कब करें

\n
• ट्रैवर्सल को जल्दी रोकने की आवश्यकता है (जैसे, किसी तत्व की खोज करते समय)।
\n
• इंडेक्स तक पहुँच आवश्यक है (केवल मान तक नहीं)।
\n
• आप मल्टीडायमेंशनल ऐरे के साथ काम कर रहे हैं।
\n

विधि #2: forEach — जावास्क्रिप्ट में ट्रैवर्सल का राजा

यह विधि 90% मामलों में "Loop (for each) over an array in JavaScript" प्रश्न का उत्तर है। इसे सीधे ऐरे पर कॉल किया जाता है और यह एक कॉलबैक फ़ंक्शन लेता है, जो प्रत्येक तत्व के लिए निष्पादित होता है।

const fruits = ['सेब', 'केला', 'संतरा'];
fruits.forEach(function(fruit, index) {
    console.log(`फल #${index + 1}: ${fruit}`);
});

// एरो फ़ंक्शन के साथ भी ऐसा ही (आधुनिक शैली):
fruits.forEach((fruit, index) => {
    console.log(`फल #${index + 1}: ${fruit}`);
});

महत्वपूर्ण: forEach एक नया ऐरे नहीं लौटाता (map के विपरीत)। यह केवल प्रत्येक तत्व के लिए क्रिया करता है। और हाँ, break और continue यहाँ काम नहीं करते — यदि लूप को रोकना है, तो for...of या क्लासिक for का उपयोग करें।

forEach कॉलबैक फ़ंक्शन के पैरामीटर

\n
• पहला पैरामीटर — ऐरे का वर्तमान तत्व (आवश्यक)।
\n
• दूसरा पैरामीटर — तत्व का इंडेक्स (वैकल्पिक)।
\n
• तीसरा पैरामीटर — स्वयं ऐरे (शायद ही कभी आवश्यक)।

[10, 20, 30].forEach((value, index, array) => {
    console.log(`ऐरे [${array}] में पोज़ीशन ${index} पर तत्व ${value}`);
});

विधि #3: for...of — आधुनिक और सुरुचिपूर्ण

यह ES6 (2015) में आया और तुरंत डेवलपर्स को पसंद आया। यह न केवल ऐरे के साथ, बल्कि किसी भी इटरेबल ऑब्जेक्ट (स्ट्रिंग, Set, Map) के साथ काम करता है।

const fruits = ['सेब', 'केला', 'संतरा'];
for (const fruit of fruits) {
    console.log(`फल: ${fruit}`);
}

मुख्य लाभ: break और continue का उपयोग कर सकते हैं। और कोड साफ और पढ़ने योग्य दिखता है।

for...of में इंडेक्स कैसे प्राप्त करें

यदि इंडेक्स चाहिए, तो entries() विधि का उपयोग करें:

for (const [index, fruit] of fruits.entries()) {
    console.log(`फल #${index + 1}: ${fruit}`);
}

विधि #4: map — जब एक नया ऐरे बनाना हो

यदि आप केवल ट्रैवर्स नहीं करना चाहते, बल्कि प्रत्येक तत्व को रूपांतरित करना चाहते हैं और समान लंबाई का एक नया ऐरे प्राप्त करना चाहते हैं, तो m