ECMAScript 6 - 10 बहुत बढ़िया नई सुविधाएँ

क्या आप जानते हैं कि जावास्क्रिप्ट (JScript और ActionScript के साथ) एक सामान्य उद्देश्य क्लाइंट-साइड स्क्रिप्टिंग लैंग्वेज स्पेसिफिकेशन का कार्यान्वयन है जिसे ECMAScript कहा जाता है? इस बुरा परिभाषा को थोड़ा और आकर्षक बनाने के लिए, हम कह सकते हैं कि ECMAScript (या आधिकारिक तौर पर ECMA-262) मानक जो परिभाषित करता है कि हम जावास्क्रिप्ट का उपयोग कैसे करते हैं, और हम क्या पूरा कर सकते हैं इसके साथ.

भाषा का नवीनतम, 6 वां संस्करण, ECMAScript 2015 (या ES6) 1997 में पहले संस्करण के बाद से शायद सबसे महत्वपूर्ण अपडेट है। नवीनतम रिलीज का मुख्य लक्ष्य बड़े अनुप्रयोगों और पुस्तकालयों के निर्माण के लिए बेहतर समर्थन प्रदान करना रहा है। इसका मतलब है अधिक परिपक्व वाक्य रचना, कोडिंग को आसान बनाने के लिए नए शॉर्टकट, और नए तरीके, कीवर्ड, डेटा प्रकार और कई अन्य संवर्द्धन भी.

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

ECMAScript 6 के लिए समर्थन

ब्राउज़र विक्रेता धीरे-धीरे ECMAScript 6 की सुविधाओं के लिए समर्थन जोड़ रहे हैं। आप नई विशेषताओं के लिए ब्राउज़र और कंपाइलर समर्थन के बारे में यहां एक शांत संगतता तालिका पा सकते हैं।.

यदि आप Node.js में ES6 समर्थन में रुचि रखते हैं, तो यहां डॉक्स देखें.

हालाँकि वर्तमान में सभी सुविधाओं का समर्थन नहीं किया गया है, हम अपने ईएस 6 कोड को ईएस 5 में ट्रांसपाइल करने के लिए बैबिल जैसे ट्रांसपैरर्स का उपयोग कर सकते हैं। बैबल के लिए एक शांत ग्रन्ट प्लगइन है, ग्रंट के लिए कई भयानक ईएस 6 प्लगइन्स हैं, और एक अद्भुत गुल-बबेल प्लगइन है, इसलिए सौभाग्य से हमारे पास बहुत सारे विकल्प हैं.

इस तरह हम संवर्धित वाक्यविन्यास और क्षमताओं का उपयोग करना शुरू कर सकते हैं, जबकि हमें संगतता मुद्दों के बारे में चिंता करने की ज़रूरत नहीं है। अब देखते हैं फीचर्स.

1. नया चलो कीवर्ड

ES6 नए का परिचय देता है चलो कीवर्ड जो हमें एक ब्लॉक के दायरे में स्थानीय चर घोषित करने की अनुमति देता है, जैसे कि एक बयान, एक अभिव्यक्ति या (एन इनर) फ़ंक्शन। उदाहरण के लिए हम एक की घोषणा कर सकते हैं के लिये निम्नलिखित तरीके से लूप, फिर उसी चर नाम का पुन: उपयोग करें (जैसा कि इसका दायरा सीमित है के लिये लूप) अगले के अंदर अगर बयान:

 के लिए (आइए = 0; मैं; < myArray.length; i++)  // Do something inside the block  if (x > 0 && x! = Y) // हम पुन: उपयोग करते हैं "i" let i = x * y

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

2. नया स्थिरांक कीवर्ड

नया स्थिरांक कीवर्ड लगातार स्थिरांक घोषित करने को संभव बनाता है, जिसे अपरिवर्तनीय चर के रूप में भी जाना जाता है, जिसे हम बाद में नई सामग्री पुन: सौंप नहीं सकते हैं.

 const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // मौन त्रुटि, क्योंकि हम एक स्थिर मान को नया मान नहीं दे सकते

ईसीएमएस्क्रिप्ट 6 में अपरिवर्तनीय चर हमेशा पूरी तरह से अपरिवर्तनीय नहीं होते हैं, जैसे कि यदि कोई स्थिर वस्तु रखता है, तो हम बाद में इसके गुणों और विधियों के मूल्य को बदल सकते हैं। एक सरणी के तत्वों के लिए भी यही सच है.

 const MY_CONSTANT = myProperty: 6; console.log (MY_CONSTANT.myProperty); // 6 MY_CONSTANT.myProperty = 18; console.log (MY_CONSTANT.myProperty); // 18 कास्ट OTHER_CONSTANT = [12, 14, 16]; console.log (OTHER_CONSTANT [0]); // 12 OTHER_CONSTANT [0] = 22; console.log (OTHER_CONSTANT [0]); // 22

हम अभी भी उपरोक्त कोड स्निपेट में सीधे MY_CONSTANT ऑब्जेक्ट के लिए एक नया मान पुन: असाइन नहीं कर सकते हैं, जिसका अर्थ है कि हम गुणों और विधियों के नाम नहीं बदल सकते हैं, एक नया भी नहीं जोड़ सकते हैं या किसी मौजूदा को हटा नहीं सकते हैं, इसलिए हम ऐसा नहीं कर सकते निम्नलिखित बात:

 MY_CONSTANT = newProperty: 18; console.log (MY_CONSTANT.newProperty); // त्रुटि

3. तीर के कार्य

ECMAScript 6 की सुविधा है कि हम कैसे लिखते हैं अनाम फ़ंक्शन, जैसा कि हम पूरी तरह से छोड़ सकते हैं समारोह कीवर्ड। हमें केवल नए सिंटैक्स का उपयोग करने की आवश्यकता है तीर कार्य करता है, => एरो साइन (वसा तीर) के नाम पर, जो हमें एक शानदार शॉर्टकट प्रदान करता है.

 // 1. ईएस 6 में एक पैरामीटर दो योग = (ए, बी) => ए + बी; // ES5 में वर योग = फ़ंक्शन (ए, बी) रिटर्न ए + बी; ; // 2. ES6 में मापदंडों के बिना randomNum = () => Math.random (); // ईएस 5 में रैंडम नॉनम = फंक्शन () रिटर्न मैथ.ग्रैंडम (); ; // 3. ES6 में वापसी के बिना संदेश = (नाम) => चेतावनी ("हाय" + नाम + "!)); // ईएस 5 संस्करण संदेश में = फ़ंक्शन (आपका नाम) चेतावनी ("हाय" + आपका नाम + "!"); ;

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

 // ES5 एक आंतरिक फ़ंक्शन में "इस" कीवर्ड का उपयोग करने के लिए हैक … AddAll: फ़ंक्शन addAll (टुकड़े) var = यह; _.चेक (टुकड़े, कार्य (टुकड़ा) स्व। टुकड़ा (टुकड़ा);); ,… // ES6 एक ही आंतरिक फ़ंक्शन अब अपने स्वयं के "यह" addAll: function addAll (टुकड़े) _.चेक (टुकड़े, टुकड़ा => this.add (टुकड़ा)) का उपयोग कर सकता है; ,…

उपरोक्त कोड मोज़िला हैक्स से है

4. नया फैलाना ऑपरेटर

नया फैलाना ऑपरेटर को 3 डॉट्स (…) के साथ चिह्नित किया गया है, और हम इसका उपयोग कई अपेक्षित वस्तुओं के स्थान पर हस्ताक्षर करने के लिए कर सकते हैं। प्रसार ऑपरेटर के सबसे आम उपयोग मामलों में से एक सरणी के तत्वों को दूसरे सरणी में सम्मिलित करना है:

 let myArray = [1, 2, 3]; let newArray = [… myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6 

हम इसका लाभ भी उठा सकते हैं फैलाना फ़ंक्शन कॉल में ऑपरेटर जिसमें हम एक सरणी से तर्क में पास करना चाहते हैं:

 let myArray = [1, 2, 3]; function sum (ए, बी, सी) रिटर्न ए + बी + सी;  कंसोल.लॉग (राशि (… myArray)); // 6

फैलाना ऑपरेटर काफी लचीला है, क्योंकि इसे एक ही सरणी या फ़ंक्शन कॉल में कई बार उपयोग किया जा सकता है.

5. पैरामीटर्स और नए रेस्ट पैरामीटर्स के लिए डिफ़ॉल्ट मान

अच्छी खबर है, कि ECMAScript 6 में हम किसी फ़ंक्शन के मापदंडों में डिफ़ॉल्ट मान जोड़ सकते हैं। इसका मतलब यह है कि यदि हम फ़ंक्शन कॉल में बाद में तर्कों में पास नहीं होते हैं, तो डिफ़ॉल्ट पैरामीटर का उपयोग किया जाएगा। ES5 में मापदंडों के डिफ़ॉल्ट मान हमेशा निर्धारित होते हैं अपरिभाषित, इसलिए जो कुछ भी हम चाहते हैं, उन्हें निश्चित रूप से भाषा को बढ़ाने के लिए उन्हें स्थापित करने की नई संभावना.

 फ़ंक्शन राशि (a = 2, b = 4) a + b वापस करें;  कंसोल.लॉग (राशि ()); // 6 कंसोल.लॉग (राशि (3, 6)); // 9

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

 function putInAlphabet (… args) चलो सॉर्ट किया गया = args.sort (); वापस छांटा गया;  कंसोल.लॉग (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); // ए, सी, सी, ई, आई, एम, पी, आर, एस, टी

6. नया के लिए बयान

नए की मदद से के लिए पाश हम आसानी से सरणियों या अन्य चलने योग्य वस्तुओं पर पुनरावृति कर सकते हैं। नए के साथ के लिए स्टेटमेंट, ECMAScript 6 में दो नई पुनरावृत्ति योग्य वस्तुओं का भी परिचय दिया गया है, कुंजी / मान मानचित्रों के लिए मानचित्र और अनूठे मूल्यों के संग्रह के लिए सेट करें जो कि आदिम मूल्य और वस्तु संदर्भ भी हो सकते हैं। जब हम उपयोग करते हैं के लिए कथन, ब्लॉक के अंदर कोड को चलने योग्य वस्तु के प्रत्येक तत्व के लिए निष्पादित किया जाता है.

 let myArray = [1, 2, 3, 4, 5]; चलो योग = 0; for (let i of myArray) sum + = i;  कंसोल.लॉग (राशि); // 15 (= 1 + 2 + 3 + 4 + 5)

7. साँचा साहित्य

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

 ग्राहक = शीर्षक: 'सुश्री', पहला नाम: 'जेन', उपनाम: 'डो', आयु: '34'; टेम्पलेट = 'प्रिय $ customer.title $ customer.firstname $ customer.surname दें! हैप्पी $ customer.age वें जन्मदिन! ’; console.log (टेम्पलेट); // प्रिय सुश्री जेन डो! 34 वाँ जन्मदिन मुबारक हो!

8. कक्षाएं

ईएस 6 जावास्क्रिप्ट कक्षाओं को प्रस्तुत करता है जो मौजूदा प्रोटोटाइप-आधारित विरासत पर निर्मित होते हैं। नया वाक्य-विन्यास वस्तुओं को बनाने, वंशानुक्रम का लाभ उठाने और कोड का पुन: उपयोग करने के लिए इसे और अधिक सरल बनाता है। जावास्क्रिप्ट को कैसे काम करता है यह समझने के लिए अन्य प्रोग्रामिंग भाषाओं से आने वाले शुरुआती लोगों के लिए भी यह आसान बना देगा.

ईएस 6 में कक्षाएं नए के साथ घोषित की जाती हैं कक्षा कीवर्ड, और एक की जरूरत है निर्माता () वह विधि जिसे तब प्रयोग किया जाता है, जब किसी नई वस्तु का उपयोग करके त्वरित किया जाता है नया myClass () वाक्य - विन्यास। इसके साथ नई कक्षाओं का विस्तार करना भी संभव है क्लास चाइल्ड पेरेंट का विस्तार करता है वाक्यविन्यास जो अन्य वस्तु-उन्मुख भाषाओं जैसे कि PHP से परिचित हो सकता है। यह जानना भी महत्वपूर्ण है कि फ़ंक्शन और चर घोषणाओं के विपरीत, वर्ग घोषणाएं ECMAScript 6 में नहीं फहराई जाती हैं.

 वर्ग बहुभुज कंस्ट्रक्टर (ऊंचाई, चौड़ाई) // क्लास कंस्ट्रक्टर this.name = 'बहुभुज'; this.height = height; this. उपलब्धता = चौड़ाई;  sayName () // क्लास मेथड कंसोल.लॉग ('हाय, आई एम ए, दिस.नाम +!'));  myPolygon = new बहुभुज (5, 6); console.log (myPolygon.sayName ()); // हाय, मैं एक बहुभुज हूं.

ES6 फिडेल उदाहरणों से ऊपर कोड, .

9. मॉड्यूल

क्या आपने कभी सोचा है कि अगर जावास्क्रिप्ट मॉड्यूलर होता तो कितना ठंडा होता? बेशक, पहले भी ऐसा करने के लिए कॉमनरज (एनओडी.जेएस में प्रयुक्त) या एएमडी (एसिंक्रोनस मॉड्यूल परिभाषा) जैसे एएमजेएस जैसे वर्कअराउंड हुए हैं, लेकिन ईएस 6 एक देशी विशेषता के रूप में मॉड्यूल का परिचय देता है.

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

 // functions.js फंक्शन क्यूब (a) a * return a * a a;  फ़ंक्शन cubeRoot (a) रिटर्न Math.cbrt (a);  निर्यात cube, cubeRoot // या: निर्यात cb as cb, cubeRoot as cr // app.js आयात cube, cubeRoot 'कार्य' से; console.log (घन (4)); // 64 कंसोल.लॉग (क्यूबट्रूट (125)); // 5

यह समाधान शानदार है, क्योंकि एक मॉड्यूल में संग्रहीत कोड बाहर से अदृश्य है, और हमें केवल उस हिस्से को निर्यात करने की आवश्यकता है जिसे हम अन्य फ़ाइलों द्वारा एक्सेस करना चाहते हैं। हम ES6 मॉड्यूल के साथ और अधिक आश्चर्यजनक चीजें कर सकते हैं, यहां आप उनके बारे में एक महान और विस्तृत विवरण पा सकते हैं.

10. नए तरीकों का भार

ECMAScript 6 में मौजूदा स्ट्रिंग प्रोटोटाइप, एरे ऑब्जेक्ट, एरे प्रोटोटाइप और मैथ ऑब्जेक्ट के लिए कई नए तरीके हैं। नए तरीके महत्वपूर्ण तरीके से सुधार कर सकते हैं कि हम इन संस्थाओं में कैसे हेरफेर कर सकते हैं। मोज़िला देव के पास नए परिवर्धन के महान कोड उदाहरण हैं, यह समय लेने और उन्हें अच्छी तरह से जांचने के लायक है.

बस यह दिखाने के लिए कि वे वास्तव में कितने शांत हैं, यहां मेरा पसंदीदा है: ऐरे प्रोटोटाइप की खोज विधि, जो हमें प्रत्येक तत्व पर कॉलबैक फ़ंक्शन को निष्पादित करके एक सरणी के तत्वों पर एक निश्चित मानदंड का परीक्षण करने में सक्षम बनाती है, फिर पहला तत्व लौटाता है रिटर्न सच.

 फ़ंक्शनप्राइम (तत्व, सूचकांक, सरणी) var start = 2; जबकि (शुरू <= Math.sqrt(element))  if (element % start++ < 1)  return false;   return element > 1;  कंसोल.लॉग ([4, 6, 8, 12] .find (isPrime)); // अपरिभाषित, नहीं पाया गया कंसोल .log ([4, 5, 8, 12] .find (isPrime)); // 5

ऊपर से कोड: मोज़िला देव