अपेक्षित नई जावास्क्रिप्ट विशेषताएँ जिनके बारे में आपको पता होना चाहिए

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



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

सुविधाएँ ECMAScript 2019 (ES10)

ES10 मानक में कई नई विशेषताएं हैं। यहां हम उनमें से केवल कुछ पर विचार करेंगे। अर्थात्, नए सरणी तरीकों की एक जोड़ी।

▍ विधि Array.prototyp.flat

यह विधि आपको एरे बनाने की अनुमति देती है, जिसमें अन्य एरे, अधिक "फ्लैट", एक दिए गए गहराई स्तर तक उन्हें "संपीड़ित" करना शामिल है।

const array = [1, 2, [3, 4]]; array.flat(); // [1, 2, 3, 4]; 

यह एक बहुत ही उपयोगी विशेषता है, खासकर ऐसे मामलों में जहां आपको नेस्टेड सरणियों के साथ काम करने की आवश्यकता होती है। यदि डेटा संरचना में सरणियों की घोंसले की गहराई 1 से अधिक है, तो flat विधि के लिए एक एकल कॉल सरणी को पूरी तरह से "फ्लैट" नहीं बना सकता है। यह विधि एक वैकल्पिक पैरामीटर depth स्वीकार करती है, जो आपको यह निर्दिष्ट करने की अनुमति देती है कि संसाधित सरणी के आयाम को कितने घोंसले के स्तर को कम करना चाहिए।

 //   const crazyArray = [1, 2, [3, 4], [[5], [6, [7,8]]]]; crazyArray.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8]; // ,  flat,     

यह प्रक्रिया जितनी गहरी होगी, उतनी अधिक कंप्यूटिंग संसाधनों की आवश्यकता होगी। कृपया ध्यान दें कि IE और Edge इस सुविधा का समर्थन नहीं करते हैं।

Method Array.prototype.flatMap विधि

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

 const arr = ["it's Sunny in", "", "California"]; arr.flatMap(x => x.split(" ")); // ["it's","Sunny","in", "", "California"] 

flat और flatMap बीच का अंतर यह है कि आप flatMap विधि से अपना स्वयं का फ़ंक्शन पास कर सकते हैं जो मूल सरणी के तत्वों को परिवर्तित करता है। इसके अलावा, flat विपरीत, flatMap , केवल 1 स्तर के सरणियों के तत्वों को "उठाता है"। यह विधि एक नई सरणी लौटाती है। यह उन मामलों में उपयोगी हो सकता है जब आप एक निश्चित सरणी "फ्लैट" बनाने से पहले, आपको किसी तरह इसके तत्वों को संसाधित करने की आवश्यकता होती है।

स्टेज 3 अनुमोदन में नई जेएस सुविधाएँ

समन्वय के तीसरे चरण में भाषा के विस्तार और सुधार के लिए कई दिलचस्प नए प्रस्ताव हैं। आइए उनमें से कुछ पर विचार करें।

▍ संख्या अंक विभाजक

यह आपके साथ हुआ: एक चर में एक लंबी संख्या लिखें और इसकी सही वर्तनी पर संदेह करें? विचाराधीन वाक्य हमें संख्याओं के बिट्स को अंडरस्कोर के साथ अलग करने की अनुमति देता है। इससे संख्याओं के साथ काम करना आसान हो जाता है।

 1_000_000_000      // ,   101_475_938.38     //     -     let fee = 123_00;    // $123 (, , 12300 ) let fee = 12_300;    // $12,300 (  !) let amount = 12345_00; // 12,345 (,  , 1234500 ) let amount = 123_45.00; // 12345 (, -  ) let amount = 1_234_500; // 1,234,500 let budget = 1_000_000_000_000; //   `budget`?  - 1 ! // // : console.log(budget === 10 ** 12); // true 

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

.Using कोड के शीर्ष स्तर पर प्रतीक्षा कर रहा है

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

इस सुविधा का कारण यह है कि जब एक मॉड्यूल आयात किया जाता है जिसमें एक फ़ंक्शन होता है जिसे async साथ घोषित किया जाता है, तो इस फ़ंक्शन का आउटपुट undefined हो जाएगा।

निम्न उदाहरण दो फ़ाइलों को दिखाता है। यदि वादे पूरे किए गए कार्यों को पूरा करने से पहले फ़ंक्शन को कॉल किया जाता है, तो यह output में undefined हो सकता है।

 // awaiting.mjs import { process } from "./some-module.mjs"; const dynamic = import(computedModuleSpecifier); const data = fetch(url); export const output = process((await dynamic).default, await data); // usage.mjs import { output } from "./awaiting.mjs"; export function outputPlusValue(value) { return output + value } console.log(outputPlusValue(100)); setTimeout(() => console.log(outputPlusValue(100), 1000); 

जब तक awaiting.js को हल करने में हल नहीं किया जाता है तब तक सब कुछ awaiting.js में बंद हो जाएगा।

▍Operator ?? और केवल अशक्त और अपरिभाषित पर मूल्यों की जाँच

शायद, सभी स्टेज 3 ऑफ़र के बीच, यह सबसे उपयोगी है। हमें अक्सर कुछ इस तरह लिखना पड़ता है:

 const obj = {  name: 'James' }; const name = obj.name || 'Jane'; // James 

यदि obj.name को कुछ झूठे मूल्य द्वारा obj.name जाता है, तो स्ट्रिंग Jane name में हो जाता है। नतीजतन, name undefined तरह कुछ नहीं होगा। लेकिन समस्या यह है कि इस मामले में एक खाली स्ट्रिंग को गलत मान के रूप में माना जाएगा। यदि इसे ध्यान में रखा जाता है, तो इस कोड को फिर से लिखना चाहिए:

 const name = (obj.name && obj.name !== '') || 'Jane'; 

लगातार ऐसा लिखना असुविधाजनक है। संचालक ?? (दो प्रश्न चिह्न) केवल null और undefined मूल्यों की जाँच करने की अनुमति देता है:

 const response = {  settings: {    nullValue: null,    height: 400,    animationDuration: 0,    headerText: '',    showSplashScreen: false  } }; const undefinedValue = response.settings.undefinedValue ?? 'some other default'; // : 'some other default' const nullValue = response.settings.nullValue ?? 'some other default'; // : 'some other default' const headerText = response.settings.headerText ?? 'Hello, world!'; // : '' const animationDuration = response.settings.animationDuration ?? 300; // : 0 const showSplashScreen = response.settings.showSplashScreen ?? true; // : false 

▍Operator ?. और वैकल्पिक चेन

यह सुझाव केवल समीक्षा की गई, null और undefined चेक के संयोजन के करीब है। यह ज्ञात है कि टाइपस्क्रिप्ट के उपयोगकर्ता इस सुविधा में रुचि रखते हैं ।
एक उदाहरण पर विचार करें:

 const city = country && country.city; // undefined  city   

किसी country वस्तु की city संपत्ति को प्राप्त करने के लिए, आपको country वस्तु के अस्तित्व और उसमें city संपत्ति के अस्तित्व की जांच करने की आवश्यकता है।

ऑपरेटर का उपयोग करके ?. (प्रश्न चिह्न और अवधि) इस कोड को इस तरह परिवर्तित किया जा सकता है:

 const city = country?.city; // undefined  city   

ऐसी स्थितियों में यह सुविधा उपयोगी लगती है:

 import { fetch } from '../yourFetch.js'; (async () => {  const res = await fetch();  // res && res.data && res.data.cities || undefined  const cities = res?.data?.cities; })(); 

▍ विधि वादा

Promise.any विधि वादा वस्तुओं से युक्त एक Promise.any वस्तु को स्वीकार करता है, और एक वादा करता है जो सफलतापूर्वक हल हो जाता है जब कम से कम एक वादा वस्तुओं को सफलतापूर्वक हल किया जाता है। यदि सभी वादे-ऑब्जेक्ट खारिज कर दिए जाते हैं, तो यह एक सरणी देता है जिसमें उनके अस्वीकृति के कारणों के बारे में जानकारी होती है।

यह है कि कैसे Async / प्रतीक्षा निर्माण के साथ Promise.any का उपयोग कर ऐसा लगता है:

 try {  const first = await Promise.any(promises);  //      . } catch (error) {  //    . } 

यहां वादों का उपयोग करते हुए एक ही बात लागू की गई है:

 Promise.any(promises).then(  (first) => {    //      .  },  (error) => {    //    .  } ); 

जावास्क्रिप्ट में पहले से ही .allSettled , .allSettled , .race , लेकिन एक समान विधि है। any , नहीं था। नतीजतन, हमारे पास एक नया अवसर है जो मौजूदा लोगों को पूरक करता है और कुछ स्थितियों में उपयोगी साबित हो सकता है। इस तथ्य के बावजूद कि यह प्रस्ताव पहले से ही अनुमोदन के तीसरे चरण में है, यह ECMAScript मानक के अगले संस्करण में शामिल नहीं हो सकता है क्योंकि इसे अतिरिक्त परीक्षण की आवश्यकता है।

परिणाम

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

प्रिय पाठकों! क्या आप पहले से ही किसी भी जावास्क्रिप्ट सुविधाओं का उपयोग कर रहे हैं जो मानक के अगले संस्करण में शामिल होने के लिए लगभग तैयार हैं?