लूप्स

docs.scrimba.com

मान लीजिए आप 1 से 100 तक संख्याओं को प्रिंट करना चाहते हैं, या एक शब्द में हर वर्ण को अभिवादन करना चाहते हैं, या जब तक उत्तर सही न हो तब तक एक सवाल पूछते रहना चाहते हैं। आप एक ही पंक्ति को सौ बार लिख सकते हैं, लेकिन यह टाइप करने में थकाऊ है और बदलने में बदतर है। एक लूप वह तरीका है जिससे आप JavaScript को एक कोड को बार-बार चलाने के लिए कहते हैं, इसलिए आप काम को एक बार लिखते हैं और भाषा को दोहराने दो। यह अध्याय तीन लूप्स को कवर करता है जिन तक आप सबसे अधिक पहुँचते हैं: for, while, और for...of।

for लूप

for लूप वह है जिसका उपयोग आप तब करते हैं जब आप जानते हैं कि कितनी बार दोहराना है। यह आपके लिए गिनती करता है। यहाँ यह 0 से 4 तक की संख्याओं को प्रिंट कर रहा है:

for (let i = 0; i < 5; i++) {
  console.log(i);
}
// 0
// 1
// 2
// 3
// 4

कोष्ठक में भाग में तीन टुकड़े हैं, जो अर्धविराम से अलग हैं:

• let i = 0 शुरुआत है: यह i नाम का एक काउंटर बनाता है और इसे 0 पर सेट करता है।
• i < 5 शर्त है: लूप जब तक यह सत्य है तब तक चलता रहता है।
• i++ चरण है: हर बार के बाद, यह i में 1 जोड़ता है (i++ i = i + 1 का संक्षिप्त रूप है)।

तो लूप i को 0 पर शुरू करता है, जाँचता है कि i < 5, कोष्ठक में कोड चलाता है, फिर 1 जोड़ता है और फिर से जाँचता है। जब i 5 तक पहुँचता है तो शर्त गलत हो जाती है और लूप रुक जाता है।

for लूप उस मामले के लिए बनाया गया है जहाँ आप दोहराव की संख्या पहले से जानते हैं। यह तीन टुकड़ों को अपने हेडर में पैक करता है, क्रम में चलता है:

for (let i = 0; i < 5; i++) {
  console.log(`pass number ${i}`);
}
// pass number 0
// pass number 1
// pass number 2
// pass number 3
// pass number 4

हेडर को बाएँ से दाएँ पढ़ने पर: let i = 0 आरंभकारी है, जो किसी और चीज़ से पहले एक बार चलता है। i < 5 शर्त है, हर बार से पहले जाँची जाती है, और लूप केवल तब चलता है जब यह सत्य हो। i++ चरण है, हर बार के बाद चलता है। काउंटर i एक सामान्य चर है, इसलिए आप इसे लूप के अंदर पढ़ सकते हैं, जो यह है कि लूप्स और गिनती एक साथ क्यों जाती हैं।

काउंटर सम्मेलन के अनुसार 0 से शुरू होता है, नियम के अनुसार नहीं। 0 से गिनती करना वह है जो आप JavaScript में लगभग हर जगह देखेंगे, और यह arrays के साथ संरेखित है कि वे अपनी items को कैसे संख्या देते हैं, इसलिए इसे जल्दी सहज होना है।

for लूप एक गिनती दोहराव के पूरे आकार को एक हेडर में एनकोड करता है: आरंभकारी, शर्त, और चरण, प्रत्येक को अर्धविराम से अलग किया जाता है।

for (let i = 0; i < 5; i++) {
  console.log(`pass number ${i}`);
}
// pass number 0
// pass number 1
// pass number 2
// pass number 3
// pass number 4

क्रम बिल्कुल सटीक है और आंतरीकरण करने योग्य है: आरंभकारी एक बार चलता है, फिर शर्त का परीक्षण किया जाता है, और केवल अगर यह सत्य है तो शरीर चलता है, उसके बाद चरण, फिर वापस शर्त के लिए। वह क्रम यह है कि शर्त पहली बार से पहले जाँची जाती है, इसलिए एक लूप जिसकी शर्त गलत से शुरू होती है कभी अपना शरीर नहीं चलाती है।

काउंटर के लिए let का उपयोग करें, const नहीं, क्योंकि चरण हर बार इसे फिर से असाइन करता है। और हेडर में i घोषित करना इसे लूप के लिए स्कोप करता है, इसलिए यह आसपास के कोड में नहीं रिसता है, जो काउंटरों को टकराने से रखता है जब आप लूप्स को नेस्ट करते हैं या एक पंक्ति में कई लिखते हैं। 1 की बजाय 0 से गिनती करना यहाँ लगभग सार्वभौमिक सम्मेलन है, और यह सीधे उस तरीके से मैप करता है जिस तरीके से arrays अपनी elements को इंडेक्स करते हैं, इसलिए आदत तुरंत डेटा पर लूप करने के समय सार्थक होती है।

Junofor लूपfor लूप एक निश्चित संख्या में दोहराता है और आपके लिए गिनती करता है। इसके हेडर में तीन भाग हैं: let i = 0 जैसी शुरुआत, i < 5 जैसी शर्त जो इसे चलते रहती है, और i++ जैसा चरण जो इसे आगे बढ़ाता है। जब शर्त गलत हो जाती है, तो लूप रुक जाता है।

Junofor लूपfor तक पहुँचें जब आप पहले से ही गिनती जानते हैं। हेडर आरंभकारी को एक बार चलाता है, हर बार से पहले शर्त की जाँच करता है, और हर बार के बाद चरण चलाता है। 0 से गिनती करना सम्मेलन है, और यह कि कैसे arrays अपनी items को संख्या देते हैं इसके साथ संरेखित है, इसलिए अभी इसे गले लगाएँ।

Junofor लूप हेडर क्रम निश्चित है: एक बार आरंभ करें, शर्त का परीक्षण करें, शरीर चलाएँ, चरण चलाएँ, दोहराएँ। यह है कि शर्त गलत से शुरू होना क्यों पूरी तरह से शरीर को छोड़ देता है। काउंटर के लिए let का उपयोग करें ताकि चरण इसे फिर से असाइन कर सके, और इसे हेडर में घोषित करें ताकि यह लूप तक स्कोप किया जा सके।

while लूप

कभी-कभी आप नहीं जानते कि कितनी बार दोहराना है, आप केवल एक शर्त जानते हैं जो सत्य रहना चाहिए। यह वही है जो while लूप के लिए है। यह जब तक अपनी शर्त रहती है तब तक चलता रहता है:

let count = 3;
while (count > 0) {
  console.log(count);
  count = count - 1;
}
console.log("Go");
// 3
// 2
// 1
// Go

लूप count > 0 की जाँच करता है, कोड चलाता है, फिर फिर से जाँचता है। ध्यान दें कि लूप के अंदर कुछ count को बदलता है, इसलिए शर्त अंत में गलत हो जाती है और लूप रुक जाता है। अगर अंदर कुछ भी कभी शर्त को गलत नहीं बनाता है, तो लूप हमेशा के लिए चलता है। यह एक अनंत लूप है, और यह आपके प्रोग्राम को फ्रीज़ करेगा, इसलिए हमेशा सुनिश्चित करें कि शर्त बदल सकती है।

while लूप जब तक शर्त सत्य रहती है तब तक दोहराता है, और इसमें कोई बिल्ट-इन काउंटर या चरण नहीं है। यह सही उपकरण बनाता है जब दोहराव की संख्या पहले से ज्ञात नहीं है, और for लूप सही उपकरण है जब यह है।

let attempts = 0;
let password = "";
while (password !== "letmein") {
  password = "letmein"; // वास्तविक प्रॉम्प्ट के लिए स्टैंड-इन
  attempts = attempts + 1;
}
console.log(`Unlocked after ${attempts} attempt(s)`);
// Unlocked after 1 attempt(s)

शर्त (password !== "letmein") conditionals से तुलना ऑपरेटरों पर निर्भर करता है, और लूप तब तक चलता है जब तक यह गलत न हो जाए। पकड़ यह है कि कुछ भी इसे गलत बनाने के लिए बाध्य नहीं करता है: आपको लूप के अंदर कुछ बदलना है कि शर्त इस पर निर्भर करती है। एक while लूप जिसकी शर्त कभी गलत नहीं होती है हमेशा के लिए चलता है। यह एक अनंत लूप है, और यह प्रोग्राम को हैंग कर देता है।

while लूप सामान्य रूप है: यह जब तक शर्त सत्य है तब तक दोहराता है और गिनती को, अगर कोई है, पूरी तरह से आप पर छोड़ देता है। इसे तब तक पहुँचें जब तक पुनरावृत्ति की संख्या निश्चित न हो, उदाहरण के लिए दोहराव जब तक input सत्यापन न करे या कोई मान सीमा पार न करे। जब गिनती ज्ञात हो, तो for लूप उस इरादे को अधिक स्पष्ट रूप से बताता है।

let remaining = 100;
let steps = 0;
while (remaining > 0) {
  remaining = remaining - 15;
  steps = steps + 1;
}
console.log(`Emptied in ${steps} steps`);
// Emptied in 7 steps

सम्मान करने के लिए विफलता मोड अनंत लूप है: while आपको समाप्ति की कोई संरचनात्मक गारंटी नहीं देता है, इसलिए शरीर को शर्त को गलत की ओर ले जाना चाहिए। लूप को हैंग करने के तीन कारण हैं: एक शर्त जो कभी अपडेट नहीं होती, एक अपडेट जो गलत दिशा में चलता है, और एक शर्त जो पूरी होने के बजाय कदम पर चली जाती है (ऊपर remaining === 0 का उपयोग करना मिस हो जाएगा, क्योंकि remaining एक नकारात्मक संख्या पर उतरता है, बिल्कुल 0 नहीं)। हर while लूप को एक पंक्ति की आवश्यकता है जो अपनी शर्त को गलत की ओर धकेलती है। सटीक === 0 पर एक रेंज परीक्षण जैसे > 0 पसंद करें ताकि एक चरण जो ओवरशूट करता है फिर भी लूप को समाप्त करता है।

Junowhile लूपwhile लूप जब तक शर्त सत्य है तब तक दोहराता है, बिल्ट-इन काउंटर के साथ नहीं। इसे तब उपयोग करें जब आप दोहराव की संख्या पहले से नहीं जानते हैं। हमेशा लूप के अंदर कुछ बदलें ताकि शर्त गलत हो सकती है, या आप एक अनंत लूप प्राप्त करते हैं जो प्रोग्राम को फ्रीज़ करता है।

Junowhile लूपwhile चुनें जब दोहराव की संख्या अज्ञात हो, और for जब यह निश्चित हो। शरीर को जो भी शर्त परीक्षण करता है उसे बदलना होगा, या यह कभी गलत नहीं होता है। यह अनंत लूप है, और हर बार जब आप while लिखते हैं तो यह गलती है जिसे देखना है।

Junowhile लूपwhile कोई गारंटी नहीं देता कि यह कभी रुकता है, इसलिए शरीर को शर्त को गलत की ओर धकेलना चाहिए। यह तीन तरीकों से हैंग करता है: शर्त कभी अपडेट नहीं होती, यह गलत दिशा में चलती है, या यह कदम पर चली जाती है। सटीक === 0 पर > 0 जैसे रेंज परीक्षण को प्राथमिकता दें ताकि एक ओवरशूटिंग चरण फिर भी लूप को समाप्त करता है।

for...of के साथ एक स्ट्रिंग पर लूपिंग

for और while लूप्स एक संख्या के साथ गिनती करते हैं, लेकिन अक्सर आप किसी चीज़ में हर item को सीधे देखना चाहते हैं। for...of वह करता है। यहाँ यह एक शब्द के प्रत्येक वर्ण को चलता है:

for (const char of "hello") {
  console.log(char);
}
// h
// e
// l
// l
// o

इसे "शब्द के प्रत्येक वर्ण के लिए" पढ़ें। हर बार पर, char अगला वर्ण रखता है, और आप कभी काउंटर या शर्त को नहीं छूते हैं। यह for लूप से स्वच्छ है जब आप केवल बारी-बारी से हर item को देखना चाहते हैं।

आप सबसे अधिक for...of को arrays पर उपयोग करेंगे, जो मान हैं कि आप अगले अध्यायों में मिलते हैं की सूचियाँ हैं। एक स्ट्रिंग लूप करने के लिए अच्छी पहली चीज़ है क्योंकि यह पहले से ही वर्णों का एक अनुक्रम है, और for...of इसे बिल्कुल उसी तरह मानता है।

for...of एक अनुक्रम की items को सीधे दोहराता है, आपको बारी-बारी से प्रत्येक मान देता है बिना काउंटर या शर्त को प्रबंधित किए:

let vowels = 0;
for (const char of "javascript") {
  if (char === "a" || char === "i") {
    vowels = vowels + 1;
  }
}
console.log(`Found ${vowels} of those vowels`);
// Found 3 of those vowels

यहाँ const char का उपयोग करना जानबूझकर है: हर बार एक ताज़ा char बनाता है कि आप केवल पढ़ते हैं, कभी फिर से असाइन नहीं करते हैं, तो const फिट बैठता है और उस इरादे का संकेत देता है। for...of लूप एक काउंटर लूप की मैनुअल बुकीपिंग के लिए पठनीयता का व्यापार करता है, और यह off-by-one mistakes की एक पूरी श्रेणी को हटा देता है क्योंकि आप कभी हाथ से अनुक्रमित नहीं करते हैं।

स्ट्रिंग लूप करने के लिए एक प्राकृतिक पहली अनुक्रम है, लेकिन वास्तविक कार्यकर्ता array है। एक बार arrays को पूरा करने के बाद, for...of उनकी सामग्री को पार करने का स्वच्छ, सीधा तरीका है।

for...of किसी भी अनुक्रम को element-by-element पर दोहराता है, बिना इंडेक्स को प्रकट किए प्रत्येक मान को एक नाम से जोड़ता है। एक स्ट्रिंग पर यह वर्णों को उत्पन्न करता है:

let shout = "";
for (const char of "loops") {
  shout = shout + char.toUpperCase();
}
console.log(shout);
// LOOPS

लूप चर को const के साथ बाँधें: for...of हर बार एक नया बाइंडिंग बनाता है, इसलिए किसी को फिर से असाइन करने की आवश्यकता नहीं है, और const दस्तावेज़ करता है कि मान शरीर के अंदर केवल-पढ़ने योग्य है। काउंटर लूप पर भुगतान वह है कि आप कभी अनुक्रमणिका नहीं लिखते हैं, जो निर्माण के अनुसार off-by-one त्रुटियों को रोकता है।

जहाँ यह सबसे महत्वपूर्ण है वह arrays है। हर element पर देखने के लिए, for...of एक गिनती for लूप से स्वच्छ पढ़ता है और इरादे को सीधे बताता है। लेकिन जब आप एक संग्रह को एक नए में परिवर्तित कर रहे हैं, तो array iteration methods आमतौर पर मैनुअल लूप को पूरी तरह से प्रतिस्थापित करते हैं, और उन्हें अपने स्वयं के अध्याय में कवर किया जाता है।

break और continue

दो कीवर्ड आपको किसी भी लूप के अंदर बेहतर नियंत्रण देते हैं। break लूप को तुरंत रोकता है और इसके बाद कोड पर चला जाता है। continue वर्तमान बार के बाकी को छोड़ देता है और सीधे अगले पर कूद जाता है।

for (let i = 0; i < 10; i++) {
  if (i === 3) {
    continue; // 3 को छोड़ें, लूपिंग जारी रखें
  }
  if (i === 6) {
    break; // पूरी तरह से लूप बंद करें
  }
  console.log(i);
}
// 0
// 1
// 2
// 4
// 5

break यह है कि आप जल्दी कैसे रुकते हैं जब आप को खोज लिया है जो आपको चाहिए, तो आप बेमतलब स्कैनिंग जारी नहीं रखते हैं। continue यह है कि आप ऐसे मामलों को कैसे छोड़ते हैं जिन्हें आप परवाह नहीं करते हैं बिना शरीर के बाकी को if के अंदर नेस्ट किए।

Off-by-one त्रुटियाँ और index bounds

क्लासिक लूप बग off-by-one त्रुटि है: एक बार बहुत अधिक या एक बार बहुत कम चलना। यह काउंटर के bounds से आता है। लंबाई 5 की एक स्ट्रिंग में वर्ण हैं positions 0, 1, 2, 3, और 4 पर, इसलिए अंतिम मान्य position length - 1 है, length नहीं। यह है कि गिनती इसके positions पर लूप क्यों i < text.length का उपयोग करता है, i <= text.length नहीं:

const text = "hello";
for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// h
// e
// l
// l
// o

i <= text.length लिखें और अंतिम बार position 5 तक पहुँचता है, जो मौजूद नहीं है, तो यह undefined उत्पन्न करता है। 0 से लंबाई तक के साथ < से गिनती वह pattern है जो बिल्कुल हर position पर और अधिक नहीं उतरता है। जब आपको केवल हर item की आवश्यकता होती है और इसकी position नहीं, तो for...of bounds के सवाल को पूरी तरह से टालता है, जो इसे प्राथमिकता देने का एक कारण है।

Junofor...of के साथ एक स्ट्रिंग पर लूपिंगfor...of हर item को सीधे देखता है, कोई काउंटर और कोई शर्त नहीं प्रबंधित करने के लिए। एक स्ट्रिंग पर, हर बार आपको अगला वर्ण देता है। आप इसे अधिकांश arrays पर उपयोग करेंगे बाद में, लेकिन एक स्ट्रिंग लूप करने के लिए एक स्वच्छ पहली चीज़ है क्योंकि यह पहले से ही वर्णों का एक अनुक्रम है।

Junofor...of के साथ एक स्ट्रिंग पर लूपिंगfor...of आपको बारी-बारी से प्रत्येक मान देता है, इसलिए आप काउंटर को छोड़ देते हैं और off-by-one जोखिम जो हाथ से अनुक्रमित करने से आता है। const के साथ बाँधें क्योंकि हर बार केवल-पढ़ने योग्य है। स्ट्रिंग एक अच्छी शुरुआत है, लेकिन arrays वह है जहाँ आप एक बार इसे पूरा करने के बाद इसे झुकेंगे।

Junofor...of के साथ एक स्ट्रिंग पर लूपिंगfor...of हर element को एक ताज़े const से बाँधता है और कभी एक index को प्रकट नहीं करता है, जो निर्माण से off-by-one bugs को हटा देता है। break जल्दी बंद कर देता है, continue एक बार को छोड़ देता है। एक संग्रह को परिवर्तित करने के बजाय केवल इसे चलने के बजाय, array iteration methods आमतौर पर मैनुअल लूप को प्रतिस्थापित करते हैं, और वे अपने स्वयं के अध्याय को पाते हैं।

लूप्स यहाँ से कहाँ जाता है

लूप्स वह तरीका हैं जिससे आप अपने आप को दोहराने से रोकते हैं और भाषा को दोहराने देते हैं। for लूप एक ज्ञात संख्या में गिनती करता है, while जब तक एक शर्त रहती है तब तक दोहराता है, और for...of एक अनुक्रम की items को सीधे चलता है। एक आदत जो यहाँ से निकालने लायक है: सुनिश्चित करें कि हर लूप समाप्त हो सकता है, और जब आप केवल हर item की आवश्यकता हो तो for...of को प्राथमिकता दें।

वास्तविक कारण लूप्स महत्वपूर्ण हैं क्योंकि अधिकांश डेटा जो आप काम करते हैं वह संग्रह में आता है। अगले अध्याय arrays का परिचय देते हैं, सूचियाँ कि आप लगातार लूप करेंगे, और बाद में array methods जो अक्सर एक हाथ-लिखित लूप को प्रतिस्थापित करते हैं जब आप डेटा को बदल रहे हैं। यदि आप शर्तों को तीव्र करना चाहते हैं कि आपके लूप्स पर निर्भर हैं, conditionals तुलनाएँ कवर करता है जो यह तय करती हैं कि लूप कब चलता रहता है और कब रुकता है।