for...of और for...in
for और while में काउंटर आप खुद चलाते थे। अक्सर डेटा पहले से सूची या ऑब्जेक्ट होता है — आपको हर मान या हर कुंजी चाहिए, घर का बना इंडेक्स नहीं। for...of iterable से अगला मान देता है। for...in ऑब्जेक्ट पर अगली कुंजी देता है। दोहराने का वही परिवार; लूप वेरिएबल में अलग चीज़।
for...of क्या करता है?
iterable के हर मान पर बॉडी एक बार चलती है। शुरुआती के लिए ऐरे और स्ट्रिंग रोजमर्रा के केस हैं। लिखें for (const item of list) — हर राउंड में item अगला मान है। जानबूझकर इंडेक्स लूप न चाहिए तो i < list.length न लिखें।
for...of, for...in और क्लासिक लूप
📊 रोजमर्रा की चलने की शक्लें
| शक्ल | लूप वेरिएबल क्या रखता है | कब फिट |
|---|---|---|
for...of |
iterable से एक मान | ऐरे का हर फल; स्ट्रिंग का हर अक्षर |
for...in |
ऑब्जेक्ट पर एक कुंजी (प्रॉपर्टी नाम) | सादे ऑब्जेक्ट का हर फ़ील्ड नाम |
क्लासिक for |
आपका नियंत्रित इंडेक्स | जब संख्या 0, 1, 2… चाहिए |
while |
बॉडी में जो अपडेट करें | जब तक एक नियम लागू रहे |
for...of के लिए ऐरे से शुरू करें। कहानी «इस ऑब्जेक्ट पर हर प्रॉपर्टी नाम» हो तो for...in लें। खुद इंडेक्स मायने रखे तो क्लासिक for रखें।
const colors = ["red", "green", "blue"];
for (const color of colors) {
console.log(color);
}
ऐरे के मानों पर चलें
हर राउंड एक स्ट्रिंग छापता है: red, फिर green, फिर blue। लूप वेरिएबल खुद मान है — 0, 1, 2 नहीं। सिर्फ आइटम चाहिए हों तो इंडेक्स संभालने से for...of छोटा रहता है।
const word = "hi";
for (const ch of word) {
console.log(ch);
}
स्ट्रिंग के अक्षरों पर चलें
स्ट्रिंग भी iterable हैं। पहले h, फिर i छपता है। हर अक्षर को एक मान समझें — भारी स्ट्रिंग API से पहले सरल अक्षर-दर-अक्षर काम के लिए उपयोगी।
const user = { name: "Ada", role: "dev" };
for (const key in user) {
console.log(key + "=" + user[key]);
}
for...in से कुंजियाँ देखें
यहाँ key पहले "name", फिर "role" बनता है। मान user[key] से पढ़ें। सादे ऑब्जेक्ट की enumerable कुंजियों के लिए for...in चुनें। ऐरे मान पढ़ने का पहला औज़ार न बनाएँ — वह for...of का काम है।
छोटा नियम याद रखें: of → मान, in → कुंजी। इन्हें मिलाना शुरुआती की क्लासिक गलती है।
const parts = ["A", "B", "C"];
let msg = "";
for (const p of parts) {
msg = msg + p + "-";
}
console.log(msg.slice(0, -1));
मानों से संदेश बनाएँ
हर राउंड एक अक्षर और डैश जोड़ता है। लूप के बाद slice आखिरी डैश हटाता है — A-B-C दिखता है। पिछली लूप पाठों जैसा जोड़ने का विचार — अब चलना सीधे मानों पर है।
const nums = [10, 20, 30];
for (let i = 0; i < nums.length; i++) {
console.log("i=" + i + " value=" + nums[i]);
}
for (const n of nums) {
console.log("value=" + n);
}
कब इंडेक्स लूप अभी भी मदद करता है
क्लासिक for इंडेक्स और मान दोनों छापता है। for...of सिर्फ मान। पोज़िशन नंबर चाहिए? इंडेक्स वाला for रखें। सिर्फ आइटम? for...of चुनें।
पेज पर for...of दिखाएँ
for...of से ऐरे पर चलें, छोटी लाइन बनाएँ, पेज में लिखें।
<!DOCTYPE html>
<html>
<head>
<title>for...of — page list</title>
</head>
<body>
<p id="out">…</p>
<script>
const items = ["tea", "milk", "honey"];
let line = "";
for (const item of items) {
line = line + item + " ";
}
let box = document.getElementById("out");
box.textContent = "list=" + line.trim();
</script>
</body>
</html>
पेज list=tea milk honey दिखाता है। ऐरे की एक एंट्री बदलें, रिफ्रेश करें, नई लाइन पढ़ें। मानों के लिए for...of, ऑब्जेक्ट कुंजियों के लिए for...in, और जब इंडेक्स मायने रखे तो क्लासिक for। अगला पाठ: बीच रास्ते लूप चलाने के लिए break और continue।
खुद आज़माएँ
for...ofसे["a", "b", "c"]का हर मान लॉग करें।for...ofसे"ok"का हर अक्षर लॉग करें।{ x: 1, y: 2 }परfor...inसेkey=valueलिखें।for...ofसे["1", "2", "3"]को1-2-3जोड़ें।- एक इंडेक्स वाला
forलिखें जो इंडेक्स और मान साथ छापे। - HTML डेमो में सिर्फ ऐरे बदलें, रिफ्रेश करें,
list=पढ़ें।
आम गलतियाँ
- ऐरे मान चाहिए हों तो
for...inलिखना (for...ofचाहिए) - सादे ऑब्जेक्ट पर
for...of(शुरुआती के लिए वह वैसे iterable नहीं) for...ofसे0,1,2इंडेक्स की उम्मीद — मान देता है, इंडेक्स नहींfor...inके बादuser[key]भूलकर सिर्फ कुंजी लॉग करना जब मान भी चाहिए हों- लंबा इंडेक्स लूप जब साफ़
for...ofपढ़ने में आसान हो
सार
for...ofiterable के मानों पर चलता है (ऐरे, स्ट्रिंग)for...inऑब्जेक्ट की कुंजियों पर चलता है- इंडेक्स नंबर चाहिए तो क्लासिक
forअभी भी फिट - एक जारी शर्त के लिए
whileअभी भी फिट - बॉडी में मान जोड़कर संदेश बनाएँ
- अगला: break और continue — राउंड रोकना या छोड़ना
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी