नवोदित सॉफ़्टवेयर इंजीनियरों और वेब डेवलपर्स के रूप में हल करने के लिए हमने जो पहली कोड/एल्गोरिदम चुनौतियों का समाधान किया है, उनमें से एक यह देखना है कि क्या हम यह पता लगा सकते हैं कि स्ट्रिंग को कैसे उलटना है। याद रखें कि एक स्ट्रिंग केवल वर्णों और रिक्त स्थान का एक संग्रह है। हमें जो करने की आवश्यकता है, वह है रिवर्स करने का प्रयास करना, उदाहरण के लिए, स्ट्रिंग "हैलो वर्ल्ड!" और "!dlroW olleH" वापस करें। इस समस्या को हल करने के कई तरीके हैं और हम इस लेख में उनमें से कुछ को यहां शामिल करेंगे।
द प्रॉम्प्ट
एक फ़ंक्शन लिखें, reverseString
, जो एक स्ट्रिंग को उलट देता है और उसे वापस कर देता है। रिवर्स करने के लिए स्ट्रिंग को फ़ंक्शन में तर्क के रूप में दिया जाता है।
समाधान # 1:लूप के लिए
पहला, और शायद सबसे सरल समाधानों में से एक लूप के लिए उपयोग करना और स्ट्रिंग के माध्यम से पीछे की ओर जाना है। जैसे ही हम स्ट्रिंग में प्रत्येक वर्ण को पास करते हैं, हमें एक वेरिएबल को इंस्टेंट करना या बनाना होगा, जिसमें नई उलटी हुई स्ट्रिंग होती है:
फ़ंक्शन रिवर्सस्ट्रिंग (str) {चलो newStr =''; के लिए (चलो i =str.length - 1; i>=0; i--) { newStr +=str[i]; } newStr वापस; }पूर्व>हम असाइन करते हैं i अंतिम अनुक्रमणिका तक (जिसका पता तब चलता है जब हम स्ट्रिंग की लंबाई से 1 लेते हैं) ⇒ यह हमारा आरंभीकरण है और हम पहली अनुक्रमणिका के रूप में काम करेंगे जिसके माध्यम से हम लूप करते हैं। लूप के लिए दूसरा भाग हमारी स्थिति . है ⇒ यह लूप को बताता है कि कब रुकना है। लूप के लिए तीसरा और अंतिम भाग यह है कि हम कितना वृद्धि . करेंगे लूप के पूरा होने के बाद और स्थिति अभी भी सही है:i– अनिवार्य रूप से हमारे i को लेता है और इसे i – 1 को पुन:असाइन करता है;
जैसा कि हम प्रत्येक पुनरावृत्ति के माध्यम से लूप करते हैं, हम प्रत्येक वर्ण को str [i] पर लेते हैं और इसे newStr में जोड़ते हैं। फिर हम अपने लूप के बाहर newStr लौटाते हैं और फ़ंक्शन को समाप्त करते हैं।
कोड संपादक में इसे स्वयं आज़माएं:
शीर्षक> <मेटा नाम ="विवरण" सामग्री ="" /> <मेटा नाम ="व्यूपोर्ट" सामग्री ="चौड़ाई =डिवाइस-चौड़ाई, प्रारंभिक-पैमाना =1" /> <लिंक rel ="स्टाइलशीट" href ="" /> <स्क्रिप्ट> फ़ंक्शन रिवर्सस्ट्रिंग (str) {चलो newStr =''; के लिए (चलो i =str.length - 1; i>=0; i--) { newStr +=str[i]; } newStr वापस; } फंक्शन शोइनपुट (ई) { ई. प्रिवेंटडिफॉल्ट (); const inputStr =document.getElementById('user_input').value; if(inputStr.length <1) {चेतावनी ("रिवर्स करने के लिए एक स्ट्रिंग दर्ज करनी होगी। फिर से प्रयास करें।") } उल्टा होने दें =रिवर्सस्ट्रिंग (inputStr); document.getElementById ('डिस्प्ले')। आंतरिक HTML =उलट; document.getElementById('user_input').value =''; } <शैली> * { बॉक्स-साइज़िंग:बॉर्डर-बॉक्स;; } शरीर {चौड़ाई:100%; अधिकतम-चौड़ाई:500px; ऊंचाई:100 वीएच; पृष्ठभूमि:हल्का नीला; मार्जिन:0 ऑटो; प्रदर्शन:फ्लेक्स; फ्लेक्स-फ्लो:कॉलम रैप; संरेखित-आइटम:केंद्र; औचित्य-सामग्री:केंद्र; } डिव {डिस्प्ले:फ्लेक्स; फ्लेक्स-फ्लो:कॉलम रैप; संरेखित-आइटम:फ्लेक्स-स्टार्ट; चौड़ाई:100%; } फॉर्म {डिस्प्ले:फ्लेक्स; फ्लेक्स-फ्लो:कॉलम रैप; चौड़ाई:100%; पृष्ठभूमि:हल्का भूरा; पैडिंग:20px; सीमा:5px डबल स्लेटग्रे; } #user_input {चौड़ाई:100%; } #submit_button {चौड़ाई:25%; अलाइन-सेल्फ:फ्लेक्स-एंड; मार्जिन-टॉप:10px; } #डिस्प्ले {फ़ॉन्ट-आकार:1.4rem; ऊंचाई:50 पीएक्स; } शरीर>पूर्व>समाधान # 2:JavaScript की ES6 मानचित्र विधि
जावास्क्रिप्ट में एक अंतर्निहित सरणी विधि है जो ES6 के लिए नई थी जिसे मानचित्र . कहा जाता है . यह क्या करता है यह निर्दिष्ट मानों के साथ एक नई सरणी देता है। मानचित्र विधि में तीन पैरामीटर होते हैं:वर्तमान आइटम, आइटम की अनुक्रमणिका, और उस सरणी की एक प्रति जिससे यह आ रहा है। हम समाधान में अंतिम दो मापदंडों का उपयोग करेंगे।
पहली चीज़ जो हमें करने की ज़रूरत है वह है
split()
. का उपयोग करके स्ट्रिंग को एक सरणी में विभाजित करना तरीका। यदि हम एक खाली स्ट्रिंग पर विभाजित करते हैं, तो विधि हमें प्रत्येक व्यक्तिगत चरित्र के साथ एक सरणी देगी। फिर हम उस नई सरणी का उपयोग मैप करने के लिए करते हैं।81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
फ़ंक्शन रिवर्सस्ट्रिंग (str) { चलो newArr =str.split (''); रेव =newArr.map ((अक्षर, अनुक्रमणिका, सरणी) => { चलो स्वैपइंडेक्स =सरणी। लंबाई - सूचकांक - 1; वापसी सरणी [स्वैपइंडेक्स];}); वापसी rev.join('') }चूंकि हम इंडेक्स को अनिवार्य रूप से स्वैप करना चाहते हैं, इसलिए हमें उस कैरेक्टर के इंडेक्स का पता लगाने की जरूरत है जिसे हम वर्तमान इंडेक्स के स्थान पर रखना चाहते हैं। यही वह चरित्र होगा जिसकी हम वापसी करेंगे।
ऐसा करने के लिए, हम सरणी की लंबाई पाते हैं, शून्य से एक क्योंकि हम शून्य-आधारित सरणी हैं, और फिर वर्तमान अनुक्रमणिका की स्थिति को हटा देते हैं। सरणी [स्वैपइंडेक्स] हम अनिवार्य रूप से वर्तमान सूचकांक की जगह लेते हैं। यह हमें एक स्ट्रिंग में उल्टे वर्णों की एक सरणी देता है।
अंतिम चीज़ जो हमें करने की ज़रूरत है वह है सरणी को एक साथ एक स्ट्रिंग में जोड़ना और उसे वापस करना।
कोड संपादक में समाधान का परीक्षण करें!
शीर्षक> <मेटा नाम ="विवरण" सामग्री ="" /> <मेटा नाम ="व्यूपोर्ट" सामग्री ="चौड़ाई =डिवाइस-चौड़ाई, प्रारंभिक-पैमाना =1" /> <लिंक rel ="स्टाइलशीट" href ="" /> <स्क्रिप्ट> फ़ंक्शन रिवर्सस्ट्रिंग (str) { चलो newArr =str.split (''); रेव =newArr.map ((अक्षर, अनुक्रमणिका, सरणी) => {चलो newIndex =array.length - अनुक्रमणिका -1; वापसी सरणी [newIndex];}); वापसी rev.join('') } function showInput(e) { e.preventDefault(); const inputStr =document.getElementById('user_input').value; if(inputStr.length <1) {चेतावनी ("रिवर्स करने के लिए एक स्ट्रिंग दर्ज करनी होगी। फिर से प्रयास करें।") } उल्टा होने दें =रिवर्सस्ट्रिंग (inputStr); document.getElementById ('डिस्प्ले')। आंतरिक HTML =उलट; document.getElementById('user_input').value =''; } <शैली> * { बॉक्स-साइज़िंग:बॉर्डर-बॉक्स;; } शरीर {चौड़ाई:100%; अधिकतम-चौड़ाई:500px; ऊंचाई:100 वीएच; पृष्ठभूमि:हल्का नीला; मार्जिन:0 ऑटो; प्रदर्शन:फ्लेक्स; फ्लेक्स-फ्लो:कॉलम रैप; संरेखित-आइटम:केंद्र; औचित्य-सामग्री:केंद्र; } डिव {डिस्प्ले:फ्लेक्स; फ्लेक्स-फ्लो:कॉलम रैप; संरेखित-आइटम:फ्लेक्स-स्टार्ट; चौड़ाई:100%; } फॉर्म {डिस्प्ले:फ्लेक्स; फ्लेक्स-फ्लो:कॉलम रैप; चौड़ाई:100%; पृष्ठभूमि:हल्का भूरा; पैडिंग:20px; सीमा:5px डबल स्लेटग्रे; } #user_input {चौड़ाई:100%; } #submit_button {चौड़ाई:25%; अलाइन-सेल्फ:फ्लेक्स-एंड; मार्जिन-टॉप:10px; } #डिस्प्ले {फ़ॉन्ट-आकार:1.4rem; ऊंचाई:50 पीएक्स; } शरीर>पूर्व>याद रखने वाली बड़ी बात यह है कि नक्शा एक नई सरणी देता है - इसलिए हम पास किए गए मूल स्ट्र/सरणी को संशोधित नहीं कर रहे हैं।
समाधान #3:अंतर्निहित JavaScript विधि
इस कोड चुनौती को हल करने की यह विधि अंतर्निहित कार्यों/विधियों का उपयोग करती है
split()
,reverse()
, औरjoin()
इसे इस एक-लाइनर में हल करने के लिए:फ़ंक्शन रिवर्सस्ट्रिंग (str) {वापसी str.split ('')। रिवर्स ()। शामिल हों (''); }पूर्व>नीचे दिए गए कोड को चलाने का प्रयास करें और इसे काम करते हुए देखने के लिए स्वयं इसका परीक्षण करें!
शीर्षक> <मेटा नाम ="विवरण" सामग्री ="" /> <मेटा नाम ="व्यूपोर्ट" सामग्री ="चौड़ाई =डिवाइस-चौड़ाई, प्रारंभिक-पैमाना =1" /> <लिंक rel ="स्टाइलशीट" href ="" /> <स्क्रिप्ट> फ़ंक्शन रिवर्सस्ट्रिंग (str) {वापसी str.split ('')। रिवर्स ()। शामिल हों (''); } फंक्शन शोइनपुट (ई) { ई. प्रिवेंटडिफॉल्ट (); const inputStr =document.getElementById('user_input').value; if(inputStr.length <1) {चेतावनी ("रिवर्स करने के लिए एक स्ट्रिंग दर्ज करनी होगी। फिर से प्रयास करें।") } उल्टा होने दें =रिवर्सस्ट्रिंग (inputStr); document.getElementById ('डिस्प्ले')। आंतरिक HTML =उलट; document.getElementById('user_input').value =''; } <शैली> * { बॉक्स-साइज़िंग:बॉर्डर-बॉक्स;; } शरीर {चौड़ाई:100%; अधिकतम-चौड़ाई:500px; ऊंचाई:100 वीएच; पृष्ठभूमि:हल्का नीला; मार्जिन:0 ऑटो; प्रदर्शन:फ्लेक्स; फ्लेक्स-फ्लो:कॉलम रैप; संरेखित-आइटम:केंद्र; औचित्य-सामग्री:केंद्र; } डिव {डिस्प्ले:फ्लेक्स; फ्लेक्स-फ्लो:कॉलम रैप; संरेखित-आइटम:फ्लेक्स-स्टार्ट; चौड़ाई:100%; } फॉर्म {डिस्प्ले:फ्लेक्स; फ्लेक्स-फ्लो:कॉलम रैप; चौड़ाई:100%; पृष्ठभूमि:हल्का भूरा; पैडिंग:20px; सीमा:5px डबल स्लेटग्रे; } #user_input {चौड़ाई:100%; } #submit_button {चौड़ाई:25%; अलाइन-सेल्फ:फ्लेक्स-एंड; मार्जिन-टॉप:10px; } #डिस्प्ले {फ़ॉन्ट-आकार:1.4rem; ऊंचाई:50 पीएक्स; } शरीर>पूर्व>अनिवार्य रूप से क्या बिल्ट-इन
reverse()
विधि करता हैmap()
विधि (जिस विधि को हमने अपने पिछले समाधान में उल्लिखित किया था) हुड के नीचे; हालांकि , यह एक नया लौटने के बजाय मूल सरणी को बदल देता है क्योंकि यह स्थान पर . उलट जाता है . यदि आप एक बड़ी समस्या को हल कर रहे हैं, तो आपको मूल सरणी की एक प्रति बनाने की आवश्यकता हो सकती है ताकि यदि आवश्यक हो तो भी आप मूल तक पहुंच सकें।
इस समस्या को हल करने के लिए ये एकमात्र निश्चित तरीके नहीं हैं - ये इसे हल करने के कुछ अधिक लोकप्रिय तरीके हैं। प्रयोग करें और देखें कि क्या आप उपरोक्त कोड संपादक में अपने लिए अन्य समाधान ढूंढ सकते हैं। बस
reverseString()
संपादित करें फ़ंक्शन और कुछ नहीं यदि आप इसे स्क्रीन पर देखना चाहते हैं।