आधुनिक जावास्क्रिप्ट की विशेषताएं जिनके बारे में आप नहीं जानते होंगे

इस तथ्य के बावजूद कि पिछले सात वर्षों में मैं लगभग हर कार्य दिवस में जावास्क्रिप्ट में लिखता हूं, मुझे यह स्वीकार करना चाहिए कि मैं ES से नवाचारों के बारे में समाचारों पर बहुत कम ध्यान देता हूं। Async / wait और proxies जैसी मुख्य विशेषताएं एक बात हैं, लेकिन हर साल छोटे चरणबद्ध परिवर्तनों की एक धारा होती है जो मेरी दृष्टि के क्षेत्र में नहीं आती हैं, क्योंकि अध्ययन करने के लिए हमेशा कुछ अधिक महत्वपूर्ण होता है।

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

ES2015

द्विआधारी और अष्टक शाब्दिक

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

यह सब बाइनरी नंबर को छिपाने / संयोजन पर बहुत काम की आवश्यकता हो सकती है; यह हमेशा मुझे लगता है कि वे दशमलव स्थानों में छिपे हुए व्यर्थ थे। ऐसे मामलों के लिए, द्विआधारी शाब्दिक प्रारूप 0b : 0 0b में जोड़ा गया था।

 const binaryZero = 0b0; const binaryOne = 0b1; const binary255 = 0b11111111; const binaryLong = 0b111101011101101; 

यह बाइनरी फ्लैग के साथ काम करने को बहुत सरल बनाता है:

 // Pizza toppings const olives = 0b0001; const ham = 0b0010; const pineapple = 0b0100; const artechoke = 0b1000; const pizza_ham_pineapple = pineapple | ham; const pizza_four_seasons = olives | ham | artechoke; 

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

नंबर.आईएसएनएन ()

window.isNaN() साथ भ्रमित नहीं होना, यह एक नई विधि है जिसमें बहुत अधिक सहज व्यवहार है।

क्लासिक isNaN कुछ दिलचस्प चाल है:

 isNaN(NaN) === true isNaN(null) === false isNaN(undefined) === true isNaN({}) === true isNaN('0/0') === true isNaN('hello') === true 

यह हमें क्या देता है? सबसे पहले, इन मापदंडों में से कोई भी वास्तव में NaN । हमेशा की तरह, समस्या सभी "पसंदीदा" जावास्क्रिप्ट गुणों के साथ है: टाइपिंग कास्टिंग। window.isNaN तर्क Number फ़ंक्शन का उपयोग करके संख्याओं में डाले window.isNaN हैं।

नई स्थैतिक संख्या Number.isNaN() विधि इस समस्या को हल करती है। उन्होंने एक बार और सभी के लिए तर्कों की समानता उनके और NaN को दी। यह बिल्कुल स्पष्ट है:

 Number.isNaN(NaN) === true Number.isNaN(null) === false Number.isNaN(undefined) === false Number.isNaN({}) === false Number.isNaN('0/0') === false Number.isNaN('hello') === false 

हस्ताक्षर: Number.isNaN : (value: any) => boolean

ES2016

यययय ययय ययय ययययय

यह समय-समय पर होता है, इसलिए घातांक के लिए हाथ पर शाब्दिक सिंटैक्स होना अच्छा है:

 2**2 === 4 3**2 === 9 3**3 === 27 

अजीब बात है, लेकिन मुझे यकीन था कि यह पहले से ही जावास्क्रिप्ट में मौजूद है। शायद पायथन के साथ भ्रमित।

Array.prototype.includes ()

यह याद array.indexOf(x) !== -1 मुश्किल था, लेकिन अगर आपने पिछले तीन वर्षों में array.indexOf(x) !== -1 लिखा है, तो नए तरीके से खुशी मनाएं:

 [1, 2, 3].includes(2) === true [1, 2, 3].includes(true) === false 

includes समान मूल्य शून्य एल्गोरिथ्म का उपयोग includes है , जो कि सख्त समानता जाँच ( === ) के लगभग समान है, सिवाय इसके कि यह NaN मूल्यों को संभाल सकता है। यह एल्गोरिथ्म सामग्री के बजाय लिंक द्वारा वस्तुओं की तुलना करता है:

 const object1 = {}; const object2 = {}; const array = [object1, 78, NaN]; array.includes(object1) === true array.includes(object2) === false array.includes(NaN) === true 

includes दूसरा पैरामीटर लिया जा सकता है, fromIndex , जो आपको एक शिफ्ट मान प्रदान करने की अनुमति देता है:

 // positions 0 1 2 3 4 const array = [1, 1, 1, 2, 2]; array.includes(1, 2) === true array.includes(1, 3) === false 

सहायक।

हस्ताक्षर: Array.prototype.includes : (match: any, offset?: Int) => boolean

ES2017

साझा स्मृति और परमाणु संचालन

ये कुछ महान विशेषताएं हैं जो बस अमूल्य हैं यदि आपको वेब कर्मचारियों के साथ बहुत काम करने की आवश्यकता है। आप कई स्थितियों के साथ सीधे मेमोरी साझा कर सकते हैं और दौड़ की स्थिति से बचने के लिए ताले सेट कर सकते हैं।

ये काफी जटिल एपीआई के साथ दो शानदार विशेषताएं हैं, इसलिए मैंने यहां उनका वर्णन नहीं किया है। विवरण के लिए, आपको इस लेख पर भेजें: https://www.sitepen.com/blog/the-return-of-saredarraybuffers-and-atomics/ । सभी ब्राउज़र अभी तक इन सुविधाओं का समर्थन नहीं करते हैं, लेकिन मुझे उम्मीद है कि अगले कुछ वर्षों में स्थिति में सुधार होगा।

ES2018

नियमित भावों की सोने की खान

ES2018 में नई नियमित अभिव्यक्ति सुविधाओं का एक पूरा समूह है:

लुकबाइंड मैच (पिछले पात्रों के साथ मिलान)

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

 const regex = /(?<=\$)\d+/; const text = 'This cost $400'; text.match(regex) === ['400'] 

यह सभी नए लुकअप ग्रुप के बारे में है, ट्विन लुकहेड समूह:

 Look ahead: (?=abc) Look behind: (?<=abc) Look ahead negative: (?!abc) Look behind negative: (?<!abc) 

दुर्भाग्य से, आज आप पुराने ब्राउज़रों के लिए नए रूप-रंग वाक्यविन्यास का अनुवाद नहीं कर सकते हैं, इसलिए यह बहुत संभव है कि आप इसे केवल कुछ समय के लिए नोड में उपयोग कर सकते हैं।

जिसका नाम कैप्चर ग्रुप रखा गया

नियमित अभिव्यक्तियाँ अब सरल बनाने के लिए उपसमूह का चयन कर सकती हैं और उपयोग कर सकती हैं। हाल तक, हम केवल संख्याओं के आधार पर ऐसे अंशों का उल्लेख कर सकते हैं, उदाहरण के लिए:

 const getNameParts = /(\w+)\s+(\w+)/g; const name = "Weyland Smithers"; const subMatches = getNameParts.exec(name); subMatches[1] === 'Weyland' subMatches[2] === 'Smithers' 

और अब इन उपसमूहों (या रिकॉर्ड समूहों) का नामकरण करने के लिए वाक्यविन्यास है: शुरुआत में हम कोष्ठक के अंदर ?<titl> , यदि हम समूह को एक नाम देना चाहते हैं:

 const getNameParts = /(?<first>\w+)\s(?<last>\w+)/g; const name = "Weyland Smithers"; const subMatches = getNameParts.exec(name); const {first, last} = subMatches.groups first === 'Weyland' last === 'Smithers' 

दुर्भाग्य से, यह अब केवल क्रोम और नोड पर काम करता है।

अब डॉट्स नई लाइनों को चिह्नित कर सकते हैं

यह केवल /s ध्वज को उदाहरण के लिए, /someRegex./s , /anotherRegex./sg ।

ES2019

Array.prototyp.flat () और फ्लैटपाइप ()

एमडीएन पर यह देखकर मुझे बहुत खुशी हुई।

सीधे शब्दों में, flat() एक बहुआयामी सरणी को एक दी गई अधिकतम गहराई पर एक आयामी सरणी में परिवर्तित करता है:

 const multiDimensional = [ [1, 2, 3], [4, 5, 6], [7,[8,9]] ]; multiDimensional.flat(2) === [1, 2, 3, 4, 5, 6, 7, 8, 9] 

flatMap एक map है जिसका flat 1. की गहराई के साथ है। यह उपयोगी है यदि आपको किसी फ़ंक्शन को मैप करने की आवश्यकता है जो एक सरणी देता है, लेकिन आपको नेस्टेड डेटा संरचना होने के लिए परिणाम की आवश्यकता नहीं है:

 const texts = ["Hello,", "today I", "will", "use FlatMap"]; // with a plain map const mapped = texts.map(text => text.split(' ')); mapped === ['Hello', ['today', 'I'], 'will', ['use', 'FlatMap']]; // with flatmap const flatMapped = texts.flatMap(text => text.split(' ')); flatMapped === ['Hello', 'today', 'I', 'will', 'use', 'FlatMap']; 

अनलिमिटेड कैच

अब आप त्रुटियां फेंकने के संदर्भ के बिना प्रयास / कैच एक्सप्रेशन लिख सकते हैं:

 try { // something throws } catch { // don't have to do catch(e) } 

वैसे, हुक जिसमें आप e के मूल्य को ध्यान में नहीं रखते हैं, कभी-कभी पोकेमॉन अपवादों को संभालने के रूप में संदर्भित किया जाता है । क्योंकि आपको उन सभी को पकड़ना है!

स्ट्रिंग मूल्य ट्रिमिंग विधि

थोड़ा, लेकिन अच्छा:

 const padded = ' Hello world '; padded.trimStart() === 'Hello world '; padded.trimEnd() === ' Hello world';