जावास्क्रिप्ट में ऐरे पर इटरेशन: 5 घातक गलतियाँ और उनसे कैसे बचें

जावास्क्रिप्ट में ऐरे को कैसे इटरेट करें: शीर्ष गलतियाँ और उनसे कैसे बचें

क्या आपने कभी ऐसा कोड लिखा है जो केवल कार्यों की सूची या कार्ट में आइटम्स पर जाना चाहिए था, लेकिन इसके बजाय undefined, अनंत लूप दिखाया, या इससे भी बदतर, चुपचाप डेटा खराब कर दिया? परिचित दर्द है। सवाल "How to loop through the items of an array in JavaScript?" Stack Overflow पर सबसे लोकप्रिय प्रश्नों में से एक है। लगता है इससे आसान क्या हो सकता है? लेकिन शैतान, हमेशा की तरह, विवरणों में छिपा है।

आज हम केवल यह नहीं समझेंगे कि जावास्क्रिप्ट में ऐरे को कैसे इटरेट करें। हम उन सबसे सामान्य गड्ढों के अंदर झाँकेंगे जिनमें शुरुआती (और केवल वे ही नहीं) गिरते हैं। आप जानेंगे कि for...in आपको कैसे धोखा दे सकता है, forEach, map से कैसे अलग है, और for में अनंत लूप से कैसे बचें।

तैयार हैं? चलिए बग्स को ठीक करें और सुंदर कोड लिखें।

गलती #1: ऐरे के लिए for...in का उपयोग करना

यह शायद सबसे कपटी शुरुआती गलती है। डेवलपर for और in शब्द देखता है और सोचता है: "ओह, यह तो सब कुछ इटरेट करने के लिए है!"। तकनीकी रूप से यह सच है। लेकिन ऐरे के लिए यह आपदा है।

लूप for...in ऑब्जेक्ट के गुणों को इटरेट करने के लिए बनाया गया है, न कि ऐरे के एलिमेंट्स को। हाँ, JS में ऐरे भी एक ऑब्जेक्ट है, लेकिन इसके इंडेक्स केवल स्ट्रिंग की ("0", "1", "2") हैं।

यहाँ समस्या है:

\n
• क्रम की गारंटी नहीं है। हालाँकि आमतौर पर ब्राउज़र क्रम का पालन करते हैं, लेकिन इस पर भरोसा नहीं किया जा सकता।
\n
• यह सभी प्रोटोटाइप इनहेरिटेंस को इटरेट करता है। यदि आपने या किसी लाइब्रेरी ने Array.prototype में एक मेथड जोड़ा है (जैसे, Array.prototype.myCustomMethod = function() {}), तो for...in उसे भी ले लेगा।
\n

कोड उदाहरण (कैसे न करें):

const arr = [10, 20, 30];\nArray.prototype.customMethod = () => {};\n\nfor (let index in arr) {\n  console.log(arr[index]); // आउटपुट: 10, 20, 30, ƒ () => {}\n}\n

देखा? अंत में हमारा कस्टम फंक्शन निकल आया। कोड टूट गया।

सही तरीका:

for...of (मानों के लिए) या क्लासिक for (इंडेक्स के लिए) का उपयोग करें। for...of केवल मानों को इटरेट करता है और प्रोटोटाइप को अनदेखा करता है।

// सही और सुरक्षित\nfor (let value of arr) {\n  console.log(value); // 10, 20, 30\n}\n

गलती #2: forEach में कॉलबैक के बारे में भूलना

arr.forEach(callback) — जावास्क्रिप्ट में ऐरे को इटरेट करने का एक सुरुचिपूर्ण तरीका है। लेकिन कई लोग इसे map या filter के साथ भ्रमित करते हैं। मुख्य गलती यह सोचना है कि forEach कुछ लौटाता है। यह undefined लौटाता है।

दूसरी सामान्य गलती कॉलबैक के दूसरे और तीसरे आर्गुमेंट (इंडेक्स और ऐरे ही) के बारे में भूलना है। कभी-कभी यह महत्वपूर्ण होता है।

गलती का उदाहरण:

const numbers = [1, 2, 3];\nconst doubled = numbers.forEach(num => num * 2);\nconsole.log(doubled); // undefined! गलती।\n

सही तरीका:

यदि आपको पुराने ऐरे के आधार पर नया ऐरे बनाना है — map() का उपयोग करें। यदि केवल कोई क्रिया करनी है (जैसे, कंसोल में प्रिंट करना या डेटा भेजना) — forEach() का उपयोग करें।

// नया ऐरे बनाने के लिए\nconst doubled = numbers.map(num => num * 2); // [2, 4, 6]\n\n// साइड इफेक्ट के लिए\nnumbers.forEach((num, index) => {\n  console.log(`एलिमेंट ${index}: ${num}`);\n});\n

गलती #3: for में अनंत लूप

यह क्लासिक है। आप for (let i = 0; i < arr.length; i++) लिखते हैं, लेकिन इन्क्रीमेंट i++ भूल जाते हैं या, इससे भी बदतर, लूप के अंदर ऐरे को बदल देते हैं।

मान लीजिए, आप चलते-फिरते ऐरे को फ़िल्टर कर रहे हैं, splice() का उपयोग करके एलिमेंट्स हटा रहे हैं। यदि आप सही नहीं करते