जावास्क्रिप्ट ईएस 6 में वस्तु शाब्दिकों के नवाचार

सामग्री, जिसका अनुवाद हम आपके ध्यान में प्रस्तुत करते हैं, विशेष रूप से जावास्क्रिप्ट में वस्तु शाब्दिक की विशेषताओं के अध्ययन के लिए समर्पित है, विशेष रूप से, जो नवाचार ECMAScript मानक के हाल के संस्करणों में दिखाई दिए।

जावास्क्रिप्ट में ऑब्जेक्ट शाब्दिक का उपयोग करके ऑब्जेक्ट बनाने की एक शक्तिशाली और सुविधाजनक क्षमता है। ES2015 (ES6) मानक आधुनिक ब्राउज़रों (IE को छोड़कर) और Node.ss प्लेटफ़ॉर्म के लिए एप्लिकेशन बनाते समय ऑब्जेक्ट के साथ काम करना सरल करता है।

मूल बातें

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

 // ES5 var myObject = { prop1: 'hello', prop2: 'world', output: function() {   console.log(this.prop1 + ' ' + this.prop2); } }; myObject.output(); // hello world 

प्रोग्रामिंग में, "डिस्पोजेबल" वस्तुओं का अक्सर उपयोग किया जाता है। वे सेटिंग्स और अन्य डेटा संग्रहीत करते हैं, उन्हें फ़ंक्शंस के मापदंडों के रूप में उपयोग किया जाता है, क्योंकि फ़ंक्शंस द्वारा लौटाए गए मान और अन्य स्थितियों में। ऐसे मामलों में जावास्क्रिप्ट ऑब्जेक्ट शाब्दिक रूप से बहुत उपयोगी होते हैं, और ES6 उनकी क्षमताओं का विस्तार करता है।

चरों से वस्तुओं का आरंभ

वस्तुओं के गुण अक्सर चर से बनाये जाते हैं जो उन्हें पहले से ही नाम दिया जाता है जो इन चरों को सौंपा गया है। उदाहरण के लिए:

 // ES5 var a = 1, b = 2, c = 3; obj = {   a: a,   b: b,   c: c }; // obj.a = 1, obj.b = 2, obj.c = 3 

ES6 में, आपको अब चर नाम दोहराने की आवश्यकता नहीं है:

 // ES6 const a = 1, b = 2, c = 3; obj = {   a,   b,   c }; // obj.a = 1, obj.b = 2, obj.c = 3 

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

 // ES6 const lib = (() => { function sum(a, b)  { return a + b; } function mult(a, b) { return a * b; } return {   sum,   mult }; }()); console.log( lib.sum(2, 3) );  // 5 console.log( lib.mult(2, 3) ); // 6 

आपने देखा होगा कि इस तकनीक का उपयोग ES6 मॉड्यूल में कैसे किया जाता है:

 // lib.js function sum(a, b)  { return a + b; } function mult(a, b) { return a * b; } export { sum, mult }; 

ऑब्जेक्ट विधि घोषित करने के लिए शॉर्टहैंड सिंटैक्स

ES5 में ऑब्जेक्ट विधियों की घोषणा करते समय, आपको function कीवर्ड का उपयोग करना चाहिए:

 // ES5 var lib = { sum:  function(a, b) { return a + b; }, mult: function(a, b) { return a * b; } }; console.log( lib.sum(2, 3) );  // 5 console.log( lib.mult(2, 3) ); // 6 

अब, ES6 में, आप अब ऐसा नहीं कर सकते। यहाँ, निम्नलिखित आशुलिपि विधि घोषणा विधि अनुमेय है:

 // ES6 const lib = { sum(a, b)  { return a + b; }, mult(a, b) { return a * b; } }; console.log( lib.sum(2, 3) );  // 5 console.log( lib.mult(2, 3) ); // 6 

यह ध्यान दिया जाना चाहिए कि ES6 तीर फ़ंक्शन ( => ) का उपयोग यहां नहीं किया जा सकता है, क्योंकि विधियों के नाम होने चाहिए। हालाँकि, तीर फ़ंक्शन का उपयोग किया जा सकता है यदि आप स्पष्ट रूप से (ईएस 5 में) तरीकों को नाम असाइन करते हैं। उदाहरण के लिए:

 // ES6 const lib = { sum:  (a, b) => a + b, mult: (a, b) => a * b }; console.log( lib.sum(2, 3) );  // 5 console.log( lib.mult(2, 3) ); // 6 

गतिशील चाबियाँ

ES5 में, आप कुंजी नामों के रूप में चर का उपयोग नहीं कर सकते हैं, हालांकि कुंजी जिसका नाम चर को दिया गया है वह ऑब्जेक्ट बनाने के बाद जोड़ा जा सकता है। उदाहरण के लिए:

 // ES5 var key1 = 'one', obj = {   two: 2,   three: 3 }; obj[key1] = 1; // obj.one = 1, obj.two = 2, obj.three = 3 

ईएस 6 में, स्क्वायर ब्रैकेट ( [] ) में एक नाम अभिव्यक्ति रखकर गतिशील रूप से चाबियाँ सौंपी जा सकती हैं। उदाहरण के लिए:

 // ES6 const key1 = 'one', obj = {   [key1]: 1,   two: 2,   three: 3 }; // obj.one = 1, obj.two = 2, obj.three = 3 

एक कुंजी बनाने के लिए, आप किसी भी अभिव्यक्ति का उपयोग कर सकते हैं:

 // ES6 const i = 1, obj = {   ['i' + i]: i }; console.log(obj.i1); // 1 

डायनामिक कुंजियों का उपयोग विधियों और गुणों दोनों के लिए किया जा सकता है:

 // ES6 const i = 2, obj = {   ['mult' + i]: x => x * i }; console.log( obj.mult2(5) ); // 10 

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

destructuring

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

 // ES5 var myObject = { one:   'a', two:   'b', three: 'c' }; var one   = myObject.one, // 'a' two   = myObject.two, // 'b' three = myObject.three; // 'c' 

ES6 विनाशकारी का समर्थन करता है। आप उसी नाम से एक वैरिएबल बना सकते हैं जो ऑब्जेक्ट की संबंधित संपत्ति को सहन करता है और निम्नलिखित कार्य करता है:

 // ES6 const myObject = { one:   'a', two:   'b', three: 'c' }; const { one, two, three } = myObject; // one = 'a', two = 'b', three = 'c' 

वेरीएबल्स जो ऑब्जेक्ट प्रॉपर्टी वैल्यू प्राप्त करते हैं, उनके पास वास्तव में कोई भी नाम हो सकता है, लेकिन यदि वे प्रॉपर्टी के नामों से अलग हैं, तो आपको { propertyName: newVariable } उपयोग करना होगा:

 // ES6 const myObject = { one:   'a', two:   'b', three: 'c' }; const { one: first, two: second, three: third } = myObject; // first = 'a', second = 'b', third = 'c' 

एक जटिल संरचना वाली वस्तुएँ, जिसमें सरणियाँ और अन्य वस्तुएँ सन्निहित हैं, का उपयोग विनाशकारी कार्य संचालन में भी किया जा सकता है:

 // ES6 const meta = { title: 'Enhanced Object Literals', pageinfo: {   url: 'https://www.sitepoint.com/',   description: 'How to use object literals in ES2015 (ES6).',   keywords: 'javascript, object, literal' } }; const { title   : doc, pageinfo: { keywords: topic } } = meta; /* doc   = 'Enhanced Object Literals' topic = 'javascript, object, literal' */ 

सबसे पहले, यह सब जटिल लग सकता है, हालांकि, यह पता लगाना इतना मुश्किल नहीं है, मुख्य बात यह है कि निम्नलिखित को याद रखें:

• अभिव्यक्ति का दाईं ओर डेटा स्रोत है - एक सरणी या ऑब्जेक्ट जो डेटा को पुनर्प्राप्त करने के लिए संग्रहीत करता है।
• अभिव्यक्ति के बाईं ओर विनाशकारी असाइनमेंट का लक्ष्य है - एक संरचना जो चर का वर्णन करती है जिसे सरणी या ऑब्जेक्ट से निकाले गए मूल्यों को सौंपा जाएगा।

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

 { a, b, c } = myObject; //  

यह डिज़ाइन आमतौर पर चर घोषित करते समय सिस्टम द्वारा माना जाता है:

 const { a, b, c } = myObject; //  

यदि चर पहले से ही घोषित हैं, तो आपको कोष्ठकों में अभिव्यक्ति को जोड़ना होगा:

 let a, b, c; ({ a, b, c } = myObject); //  

नतीजतन, विनाशकारी से निपटने के दौरान, आपको कोड के बारे में सावधान रहना चाहिए और घोषित और अघोषित चर का मिश्रण नहीं करना चाहिए।

विनाशकारी एक ऐसी तकनीक है जो कई स्थितियों में काम आ सकती है।

डिफ़ॉल्ट फ़ंक्शन पैरामीटर

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

 prettyPrint( { title: 'Enhanced Object Literals', publisher: {   name: 'SitePoint',   url: 'https://www.sitepoint.com/' } } ); 

ES5 में, वस्तुओं को पैरामीटर्स के साथ पार्स करना आवश्यक था, यदि इन ऑब्जेक्ट्स में वे नहीं हैं, जिनकी आवश्यकता है, इसी मापदंडों के लिए डिफ़ॉल्ट मान असाइन करें:

 // ES5,     function prettyPrint(param) { param = param || {}; var   pubTitle = param.title || 'No title',   pubName = (param.publisher && param.publisher.name) || 'No publisher'; return pubTitle + ', ' + pubName; } 

ES6 में, किसी भी पैरामीटर को डिफ़ॉल्ट मान सौंपा जा सकता है:

 // ES6 -     function prettyPrint(param = {}) { ... } 

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

 // ES6     function prettyPrint( {   title: pubTitle = 'No title',   publisher: { name: pubName = 'No publisher' } } = {} ) { return `${pubTitle}, ${pubName}`; } 

यह ध्यान देने योग्य है कि इस तरह के कोड को अधिक पारंपरिक से अधिक पढ़ना मुश्किल हो सकता है, हालांकि यह प्रोग्रामर की व्यक्तिगत प्राथमिकताओं का मामला है।

पार्सिंग ऑब्जेक्ट फ़ंक्शंस द्वारा लौटाए गए

फ़ंक्शंस केवल एक मान वापस कर सकते हैं, लेकिन यह मान सैकड़ों गुणों या विधियों के साथ एक वस्तु हो सकता है। ES5 में, आपको पहले लौटी हुई वस्तु प्राप्त करनी थी, और उसके बाद आप इसमें से मान निकाल सकते थे:

 // ES5 var obj = getObject(), one = obj.one, two = obj.two, three = obj.three; 

पुनर्गठन इस प्रक्रिया को सरल करता है। अब यह सब एक अलग चर में वस्तु को बचाने के बिना किया जा सकता है और फिर इसे पार्स करें:

 // ES6 const { one, two, three } = getObject(); 

आपने Node.js. में कुछ ऐसा ही देखा होगा उदाहरण के लिए, यदि आपको केवल fs मॉड्यूल की readFile() और readFile() writeFile() विधियों की आवश्यकता है, तो आप उनसे इस तरह लिंक प्राप्त कर सकते हैं:

 // ES6 Node.js const { readFile, writeFile } = require('fs'); readFile('file.txt', (err, data) => { console.log(err || data); }); writeFile('new.txt', 'new content', err => { console.log(err || 'file written'); }); 

शेष पैरामीटर सिंटैक्स और एक्सटेंशन ऑपरेटर ES2018 (ES9)

= ES2015 में, शेष मापदंडों और विस्तार ऑपरेटर के सिंटैक्स (दोनों तीन डॉट्स की तरह दिखते हैं, … ) केवल सरणियों के साथ काम करते समय उपयोग किए गए थे। ES2018 में, वस्तुओं के साथ काम करने के लिए समान कार्यक्षमता का उपयोग किया जा सकता है:

 const myObject = { a: 1, b: 2, c: 3 }; const { a, ...x } = myObject; // a = 1 // x = { b: 2, c: 3 } 

फ़ंक्शन के लिए कुछ मानों को स्थानांतरित करने के लिए एक समान दृष्टिकोण का उपयोग किया जा सकता है:

 function restParam({ a, ...x }) { // a = 1 // x = { b: 2, c: 3 } } restParam({ a: 1, b: 2, c: 3 }); 

कृपया ध्यान दें कि ऐसी स्थितियों में, आप सूची के अंत में तीन बिंदुओं के साथ केवल एक अभिव्यक्ति का उपयोग कर सकते हैं। इसके अलावा, अन्य वस्तुओं में निहित वस्तुओं के लिए, यह काम नहीं करता है।

एक्सटेंशन ऑपरेटर का उपयोग ऑब्जेक्ट के अंदर किया जा सकता है:

 const obj1 = { a: 1, b: 2, c: 3 }, obj2 = { ...obj1, z: 26 }; // obj2 is { a: 1, b: 2, c: 3, z: 26 } 

एक्सटेंशन ऑपरेटर का उपयोग ऑब्जेक्ट्स को क्लोन करने के लिए किया जा सकता है ( obj2 = { ...obj1 }; ), लेकिन यहां यह ध्यान में रखना होगा कि इस दृष्टिकोण के साथ, ऑब्जेक्ट की एक उथली प्रति निष्पादित की जाती है। यदि ऑब्जेक्ट के गुण अन्य ऑब्जेक्ट हैं, तो ऑब्जेक्ट का क्लोन समान नेस्टेड ऑब्जेक्ट को संदर्भित करेगा।

शेष मापदंडों और विस्तार ऑपरेटर के वाक्यविन्यास अभी तक व्यापक रूप से समर्थित नहीं हैं। वर्तमान में, उन्हें अतिरिक्त प्रयासों के बिना क्रोम और फ़ायरफ़ॉक्स ब्राउज़र में उपयोग किया जा सकता है, और जब Node.js प्लेटफ़ॉर्म संस्करण 8.6 और उच्चतर के लिए विकसित किया जा रहा है।

परिणाम

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

प्रिय पाठकों! जेएस ऑब्जेक्ट बनाने के कौन से तरीके आप सबसे अधिक बार उपयोग करते हैं?