🙋 👉🏽 😿 जावास्क्रिप्ट की 10 विषमताएं और रहस्य ⭐️ 👴🏻 🙁

जावास्क्रिप्ट। उसी समय भयावह और आकर्षक। मुझे यकीन है कि अगर पाब्लो पिकासो एक प्रोग्रामर थे, तो उन्होंने यह भाषा बनाई। यहां नल एक वस्तु है, एक खाली सरणी है, यह गलत है, और फ़ंक्शंस टेनिस गेंदों की तरह इसके बगल में उड़ते हैं।

लेख के लक्षित दर्शक उन्नत डेवलपर्स हैं जो जावास्क्रिप्ट के बारे में अधिक जानना चाहते हैं। यह अजीब और अच्छी तरह से रखे गए रहस्यों का एक संग्रह है। अपने स्वयं के सॉफ़्टवेयर उत्पादों को विकसित करते समय कुछ अध्यायों के रहस्य काम में आ सकते हैं, अन्य केवल हंसी और निंदा के विषय हैं। वैसे भी, हम शुरू कर रहे हैं!

डेटा प्रकार और विज्ञापन

1. नल एक वस्तु है

आइए सभी के लिए ज्ञात विचित्रता से शुरू करें। नल एक वस्तु है, और उनमें से सबसे अधिक है। अशक्त? वस्तु? "यह नहीं हो सकता है, क्योंकि अशक्त किसी भी मूल्य की पूर्ण अनुपस्थिति है, " आप कहते हैं। और आप निस्संदेह सही हैं। हालाँकि, ऐसा हो कि जैसा भी हो, मेरे पास सबूत हो। यहाँ यह है:

alert (typeof null); // 'object'

इसके बावजूद, नल वस्तु का उदाहरण नहीं है। (यदि आप नहीं जानते हैं, तो जावास्क्रिप्ट में मान अंतर्निहित वस्तु के उदाहरण हैं। प्रत्येक संख्या संख्या ऑब्जेक्ट की एक आवृत्ति है, प्रत्येक ऑब्जेक्ट ऑब्जेक्ट का एक उदाहरण है, और इसी तरह।) यह हमें कारण देता है, क्योंकि अशक्त एक मूल्य की अनुपस्थिति है , जिसका अर्थ है कि यह एक उदाहरण नहीं हो सकता है। -या। तो निम्न पंक्ति गलत साबित होती है:

 alert (null instanceof Object); //false

2. NaN एक संख्या है

क्या आप हैरान हैं कि अशक्त वस्तु है? फिर इस बारे में सोचें - NaN ("Not a Number" एक संख्या नहीं है) एक संख्या है! दूर, बदतर! NaN खुद के बराबर भी नहीं है। (क्या आपके सिर में अभी भी चोट लगी है?)

 alert (typeof NaN); // 'Number' alert (NaN === NaN); // false

वास्तव में, NaN किसी भी चीज़ के बराबर नहीं है। NaN के साथ कुछ भी तुलना करने का एकमात्र तरीका isNaN () है।

3. बिना चाबी के सरणी == झूठी (या सच्चाई और झूठ के बारे में)

यहाँ एक और अजीब जावास्क्रिप्ट है:

 alert (new Array() == false); // true

यह समझने के लिए कि यहाँ क्या हो रहा है, आपको सत्य और मिथ्या की अवधारणा को स्वीकार करना चाहिए। सच्चे और झूठे "प्रकार" होते हैं, जो आपको तर्क और दर्शन में उलझा देते हैं।

मैंने सत्य और असत्य क्या हैं की कई परिभाषाएं पढ़ी हैं, और सबसे सरल, मेरी राय में, इस तरह से लगता है: जावास्क्रिप्ट में, प्रत्येक ऑब्जेक्ट में एक अंतर्निहित बूलियन मूल्य होता है जिसे तब कहा जाता है जब ऑब्जेक्ट को बूलियन की तरह व्यवहार करना चाहिए; उदाहरण के लिए, जब आप इसकी तुलना झूठ से करते हैं।

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

 var someVar = 0; alert (someVar == false); // true

यहां हम संख्या 0 और झूठ की तुलना करने का अनुरोध करते हैं। चूंकि डेटा एक ही प्रकार का नहीं है, जावास्क्रिप्ट अंतर्निहित मानों को अपने बूलियन झंडे के मूल्यों में परिवर्तित करता है, जो (शून्य के मामले में) एक कुटिल के बराबर है।

आपने देखा हो सकता है कि मैंने झूठी चीज़ों को लिस्ट में शामिल करने के लिए खाली सरणियों को शामिल नहीं किया था। वे बहुत दिलचस्प व्यवहार करते हैं - उनकी गणना एक सच्चाई के रूप में की जाती है, लेकिन, जब बूलियन मूल्य के साथ तुलना की जाती है, तो वे एक झूठ के रूप में व्यवहार करते हैं। क्या आप अभी भी जीवित हैं? अच्छा है, क्योंकि मैंने आपके लिए एक और उदाहरण तैयार किया है:

 var someVar = []; //  alert (someVar == false); // true if (someVar) alert ('hello'); // 'hello',  someVar  true

कास्टिंग से बचने के लिए, आप ऑपरेटर का उपयोग प्रकार और मान === (== के बजाय, जो केवल मानों की तुलना करता है) की तुलना करने के लिए कर सकते हैं।

 var someVar = 0; alert (someVar == 0); //  true, 0 -  alert (someVar === false); //  false, 0 - ,

ओह। जैसा कि आप पहले से ही समझते हैं, जावास्क्रिप्ट में टाइप रूपांतरण एक जटिल विषय है, इसलिए आपको इस विषय का अध्ययन करने के लिए कुछ और रातें समर्पित करनी चाहिए।

आप मेरे साथ इस मुद्दे पर चर्चा कर सकते हैं (संलग्न) या, यदि आप पर्याप्त रूप से तैयार हैं, तो आप कटौती की सटीक प्रक्रिया पढ़ सकते हैं, यह प्रलेखन में वर्णित है।

नियमित अभिव्यक्ति

4. बदलें () विधि एक कॉलबैक फ़ंक्शन ले सकती है

यह जावास्क्रिप्ट के सबसे गुप्त रहस्यों में से एक है, यह संस्करण 1.3 में हमारे पास आया था। प्रतिस्थापन के अधिकांश उपयोग कुछ इस तरह दिखते हैं:

 alert('10 13 21 48 52'.replace(/d+/g, '*')); //    *

यह एक सरल प्रतिस्थापन है, संख्या एक तारांकन है। लेकिन क्या होगा अगर हम खुद को बदलने के लिए जगह चुनने में सक्षम होना चाहते हैं? क्या होगा यदि हम केवल उन संख्याओं को बदलना चाहते हैं जो 30 से कम हैं? यह उसी प्रतिस्थापित विधि का उपयोग करके प्राप्त किया जा सकता है। हमें हर मैच में कॉलबैक फ़ंक्शन को कॉल करना होगा:

 alert('10 13 21 48 52'.replace(/d+/g, function(match) { return parseInt(match) < 30 ? '*' : match; }));

प्रत्येक मैच के लिए, जावास्क्रिप्ट हमारे फ़ंक्शन को एक पैरामीटर के रूप में हमारे मैच को पास करेगा। फिर, हम एक तारांकन (यदि संख्या 30 से कम है) या परिवर्तन के बिना एक पैरामीटर लौटाएंगे।

5. नियमित अभिव्यक्ति - खोजने और बदलने से अधिक

कई उन्नत जावास्क्रिप्ट डेवलपर्स केवल मैच का उपयोग करते हैं और नियमित अभिव्यक्ति के साथ काम करते समय प्रतिस्थापित करते हैं। लेकिन जावास्क्रिप्ट हमें सिर्फ 2 तरीकों की तुलना में अधिक विकल्प देता है।

सबसे बड़ी रुचि का परीक्षण () है, जो एक मैच की तरह काम करता है, लेकिन एक मैच वापस नहीं करता है, यह सिर्फ यह जांचता है कि क्या पैटर्न स्ट्रिंग में है।

 alert (/\w{3,}/.test('Hello')); // 'true'

उपरोक्त कोड स्ट्रिंग में 3 या अधिक अल्फ़ान्यूमेरिक वर्णों के लिए दिखता है और, चूंकि स्ट्रिंग हैलो इन आवश्यकताओं को पूरा करती है, इसलिए हम सच हो जाते हैं। हमें केवल संयोग की आवश्यकता नहीं है, केवल परिणाम।

इसके अलावा, एक RegExp ऑब्जेक्ट जिसके साथ आप गतिशील नियमित अभिव्यक्ति बना सकते हैं वह स्थैतिक के विपरीत है। यह एक छोटे रिकॉर्ड का लाभ देता है (हम सिर्फ स्लैश के साथ पैटर्न को घेरते हैं)। लेकिन, इस मामले में, आप चर को इंगित नहीं कर सकते हैं, इसलिए गतिशील पैटर्न बनाना संभव नहीं है। RegExp () के साथ आप इसे कर सकते हैं

 function findWord(word, string) { var instancesOfWord = string.match(new RegExp('\b'+word+'\b', 'ig')); alert(instancesOfWord); } findWord('car', 'Carl went to buy a car but had forgotten his credit card.');

यहां हम एक गतिशील पैटर्न बनाते हैं जो शब्द तर्क के मूल्य पर आधारित होता है। फ़ंक्शन स्ट्रिंग में शब्द शब्द की घटनाओं की संख्या को एक पूरे के रूप में लौटाता है (दूसरे शब्द का हिस्सा नहीं)। इसलिए, हमारा उदाहरण कार और कार्ड में दिखाई देने वाले शब्द को अनदेखा करते हुए, एक दिन कार लौटाएगा। हम फ्लैग बी के साथ ऐसा करते हैं।

चूंकि RegExp को शॉर्ट सिंटैक्स का उपयोग करने के बजाय एक स्ट्रिंग के रूप में परिभाषित किया गया है, इसलिए हम पैटर्न का निर्माण करते समय चर का उपयोग कर सकते हैं। इसका मतलब यह है कि हमें किसी विशेष वर्ण को डबल-स्क्रीन करना चाहिए, जैसा कि हमने शब्द सीमा चरित्र के साथ किया था।

कार्य और संबंध

6. आप नकली संदर्भ दे सकते हैं

संदर्भ जिसमें कुछ निष्पादित होता है, यह निर्धारित करता है कि कौन से चर उपलब्ध हैं। नि: शुल्क जावास्क्रिप्ट (एक फ़ंक्शन से नहीं चलाया जाता है) विंडो ऑब्जेक्ट के वैश्विक संदर्भ से संचालित होता है, जिसमें सब कुछ एक्सेस होता है, और फ़ंक्शन के अंदर घोषित किए गए स्थानीय चर केवल इस फ़ंक्शन के अंदर पहुंचते हैं, बाहर नहीं।

 var animal = 'dog'; function getAnimal(adjective) { alert(adjective+' '+this.animal); } getAnimal('lovely'); // 'lovely dog';

इस उदाहरण में, हमारे चर और फ़ंक्शन को वैश्विक संदर्भ में घोषित किया गया है। चूंकि यह हमेशा वर्तमान संदर्भ को इंगित करता है, इस उदाहरण में यह विंडो को इंगित करता है। इसलिए, जब कोई फ़ंक्शन window.animal को खोजता है, तो वह इसे ढूंढता है। अब तक, इतना अच्छा। लेकिन, हम अपने कार्य को देशी संदर्भ के बावजूद एक अलग संदर्भ में सोच सकते हैं। हम किसी फ़ंक्शन का उपयोग करने के बजाय कॉल () विधि का उपयोग करके ऐसा कर सकते हैं।

 var animal = 'dog'; function getAnimal(adjective) { alert(adjective+' '+this.animal); }; var myObj = {animal: 'camel'}; getAnimal.call(myObj, 'lovely'); // 'lovely camel'

यहां हमारे फ़ंक्शन को विंडो के संदर्भ में नहीं, बल्कि कॉल () विधि के तर्क के रूप में myObj के संदर्भ में कहा जाता है। कॉल () का दावा है कि फ़ंक्शन एक myObj विधि है। ध्यान दें कि किसी भी तर्क को हम कॉल करने के लिए पास करते हैं () पहले फ़ंक्शन को पास किया जाएगा।

मैंने सुना है डेवलपर्स कहते हैं कि वे कई वर्षों से प्रोग्रामिंग कर रहे हैं और इसका उपयोग कभी नहीं किया क्योंकि यह असामान्य कोड व्यवहार है। हालांकि, यह काफी दिलचस्प है।

वैसे, लागू () कॉल () के रूप में एक ही काम करता है, सिवाय इसके कि तर्कों को एक सरणी के रूप में पारित किया जाता है। यहाँ एक उदाहरण है:

 getAnimal.apply(myObj, ['lovely']); //

7. कार्य स्वयं कह सकते हैं

कुछ भी इसका निषेध नहीं करता है:

 (function() { alert('hello'); })(); // 'hello'

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

स्व-निष्पादित निर्देशों (एसआईआई) के लाभों में से एक आस्थगित कोड के अंदर चर के वर्तमान मूल्यों का उपयोग है। यहाँ समस्या है:

 var someVar = 'hello'; setTimeout(function() { alert(someVar); }, 1000); var someVar = 'goodbye';

मंचों के लिए नए लोग पूछते हैं कि क्यों अलविदा प्रदर्शित करता है और नमस्ते नहीं। इसका उत्तर यह है कि someVar वैरिएबल के मान की गणना कोड चलने से पहले नहीं की जाती है। और तब तक, चर पहले ही मूल्य अलविदा के साथ ओवरराइट कर दिया गया है।

SRI इस समस्या को हल करने का अवसर प्रदान करता है। टाइमआउट कॉलबैक का उपयोग करने के बजाय, हम इसे SRI से लौटाते हैं, जिससे हम तर्क के रूप में चर के वर्तमान मूल्य को पास करते हैं। इसका मतलब यह है कि हम चर के वर्तमान मूल्य को पास और अलग करते हैं, इसे असली someVar चर के साथ क्या हो रहा है, से बचाते हैं। यह है कि पुनरावृत्ति से पहले कार की फोटो कैसे लेनी है, फोटो को अपडेट नहीं किया जाएगा, यह फोटो लेने के समय हमेशा कार का रंग दिखाएगा।

 var someVar = 'hello'; setTimeout((function(someVar) { return function() { alert(someVar); } })(someVar), 1000); var someVar = 'goodbye';

अब, हम नमस्ते को देखते हैं, जैसा कि हम चाहते थे, क्योंकि फ़ंक्शन चर का एक अलग संस्करण दिखाता है।

ब्राउज़र

8. फ़ायरफ़ॉक्स आरजीबी में रंगों को पढ़ता है और लौटाता है, एचईएक्स में नहीं

मैं कभी नहीं समझ सका कि मोज़िला ऐसा क्यों करता है। बेशक, मुझे एक उदाहरण दिखाना होगा:

 Hello, world! <script> var ie = navigator.appVersion.indexOf('MSIE') != -1; var p = document.getElementById('somePara'); alert(ie ? p.currentStyle.color : getComputedStyle(p, null).color); </script>

जब अधिकांश ब्राउज़र ff9900 लौटाते हैं, फ़ायरफ़ॉक्स आरजीबी (255, 153, 0) के बराबर वापस आ जाएगा। ऐसे कार्य हैं जो RGB को HEX में बदलते हैं।

जैसा कि आपने देखा होगा, IE में गणना की गई शैलियों को परिभाषित करने के अन्य तरीके हैं।

इसके साथ ही

9.1.1 + 0.2! == 0.3

यह विषमता न केवल जावास्क्रिप्ट में पाई जाती है, यह सभी कंप्यूटर विज्ञान की समस्या है। निष्कर्ष इस तरह होगा - 0.30000000000000004।

इस समस्या को कंप्यूटर की अशुद्धि कहा जाता है। जब जावास्क्रिप्ट एक स्ट्रिंग निष्पादित करता है, तो यह मूल्यों को उनके बाइनरी समकक्ष में अनुवाद करता है।

यहीं से समस्या शुरू होती है - बाइनरी समकक्ष में 0.1 0.1 नहीं है, लेकिन उसके करीब है। यह है कि रूसी से बेलारूसी तक पाठ का अनुवाद कैसे किया जाता है। ऐसा लगता है, लेकिन ऐसा नहीं है।

बाकी इस लेख के दायरे से परे है (हमारे यहाँ गणित का वृत्त नहीं है)

कंप्यूटर विज्ञान और विकास पर मंचों में इस विषय पर व्यापक रूप से चर्चा की जाती है। आप इस समस्या के लिए अपने स्वयं के समाधान प्रस्तुत कर सकते हैं।

10. अनिश्चितता को परिभाषित किया जा सकता है

ठीक है, चलो मूर्खता के साथ समाप्त होता है। यह अजीब लगता है, लेकिन अपरिभाषित जावास्क्रिप्ट में एक अनारक्षित शब्द है, हालांकि इसका एक विशेष अर्थ है - यह दिखाने के लिए कि एक चर परिभाषित नहीं है।

 var someVar; alert(someVar == undefined); // true

अभी तक तो अच्छा है। लेकिन:

 undefined = "I'm not undefined!"; var someVar; alert(someVar == undefined); // false!

आप सभी आरक्षित जावास्क्रिप्ट शब्दों की सूची का उल्लेख कर सकते हैं।

जावास्क्रिप्ट की 10 विषमताएं और रहस्य