जावास्क्रिप्ट में for...of लूप समझाएं

परिचय

for...of लूप (ES2015) इटरेबल ऑब्जेक्ट्स (ऐरे, स्ट्रिंग, मैप, सेट, नोडलिस्ट, आर्गुमेंट्स ऑब्जेक्ट, आदि) पर पुनरावृति करने का एक साफ तरीका प्रदान करता है। यह for...in के विपरीत, प्रॉपर्टी नामों के बजाय मानों पर पुनरावृति करता है।

उदाहरण

निम्न कोड जावास्क्रिप्ट में for...of लूप के लिए है:

<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>for...of लूप</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result, .sample { font-size: 20px; font-weight: 500; } </style> </head> <body> <h1>for...of लूप जावास्क्रिप्ट</h1> <div class="sample"></div> <div style="color: green;" class="result"></div> <button class="Btn">यहाँ क्लिक करें</button> <h3> for...of लूप का उपयोग करके उपरोक्त स्ट्रिंग पर पुनरावृति करने के लिए ऊपर दिए गए बटन पर क्लिक करें </h3> <script> const resEle = document.querySelector(".result"); const sampleEle = document.querySelector(".sample"); const str = 'नमस्ते'; sampleEle.innerHTML = str; document.querySelector(".Btn").addEventListener("click", () => { for (const char of str) { resEle.innerHTML += char + '<br>'; } }); </script> </body> </html>

आउटपुट

उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा:

'यहाँ क्लिक करें' बटन पर क्लिक करने पर:

for...of vs for...in vs forEach

ऑब्जेक्ट्स पर पुनरावृति के लिए

// Object.entries() के साथ for...of
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

// Map पर पुनरावृति
for (const [key, value] of myMap) { ... }