कुछ नई जावास्क्रिप्ट सुविधाओं का उपयोग करने के उदाहरण

सामग्री का लेखक, जिसका अनुवाद हम आज प्रकाशित करते हैं, का कहना है कि ES2019 मानक में आई नई जावास्क्रिप्ट सुविधाएँ क्रोम, फ़ायरफ़ॉक्स और सफारी ब्राउज़रों में आधिकारिक तौर पर उपलब्ध हैं, साथ ही साथ Node.js मंच पर भी। यदि आपको पुराने ब्राउज़रों का समर्थन करने की आवश्यकता है, तो आप बेबल का उपयोग करके जेएस कोड को ट्रांसप्लान्ट करके नवाचारों का लाभ उठा सकते हैं। यहां हम कुछ नई जेएस विशेषताओं के उदाहरणों को देखते हैं।

Object.fromEntries विधि

ES2017 में, Object.entries विधि Object.entries । यह ऑब्जेक्ट को एक अरै में परिवर्तित करता है। उदाहरण के लिए, यह इस तरह दिख सकता है:

 let students = {  amelia: 20,  beatrice: 22,  cece: 20,  deirdre: 19,  eloise: 21 } Object.entries(students) // [ // [ 'amelia', 20 ], // [ 'beatrice', 22 ], // [ 'cece', 20 ], // [ 'deirdre', 19 ], // [ 'eloise', 21 ] // ] 

यह पद्धति भाषा की क्षमताओं के लिए एक अद्भुत जोड़ बन गई है। तथ्य यह है कि यह Array प्रोटोटाइप में निर्मित कई विधियों का उपयोग करके ऑब्जेक्ट डेटा को आसानी से संसाधित करना संभव बनाता है। इन विधियों में, उदाहरण के लिए, map , filter , reduce नोट किए जा सकते हैं। लेकिन सरणी को एक वस्तु में बदलने के लिए, दुर्भाग्य से, कोई सुविधाजनक उपकरण नहीं थे। एक लूप का उपयोग करके सब कुछ मैन्युअल रूप से किया जाना था:

 let students = {  amelia: 20,  beatrice: 22,  cece: 20,  deirdre: 19,  eloise: 21 } //          .filter() let overTwentyOne = Object.entries(students).filter(([name, age]) => {  return age >= 21 }) // [ [ 'beatrice', 22 ], [ 'eloise', 21 ] ] //       let drinkingAgeStudents = {} for (let [name, age] of overTwentyOne) {    drinkingAgeStudents[name] = age; } // { beatrice: 22, eloise: 21 } 

Object.fromEntries विधि ऐसे छोरों से छुटकारा पाने के लिए डिज़ाइन की गई है। यह आपको कोड की बहुत कम मात्रा के साथ एक ही समस्या को हल करने की अनुमति देता है। यह अच्छी तरह से डेवलेपर्स को ऐरे मे कनवर्ट की गई ऑब्जेक्ट्स को प्रोसेस करने के लिए अधिक बार ऐरे तरीकों का उपयोग करने में मदद कर सकता है।

 let students = {  amelia: 20,  beatrice: 22,  cece: 20,  deirdre: 19,  eloise: 21 } //          .filter() let overTwentyOne = Object.entries(students).filter(([name, age]) => {  return age >= 21 }) // [ [ 'beatrice', 22 ], [ 'eloise', 21 ] ] //       let drinkingAgeStudents = Object.fromEntries(overTwentyOne); // { beatrice: 22, eloise: 21 } 

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

 let students = [  [ 'amelia', 22 ],  [ 'beatrice', 22 ],  [ 'eloise', 21],  [ 'beatrice', 20 ] ] let studentObj = Object.fromEntries(students); // { amelia: 22, beatrice: 20, eloise: 21 } //    beatrice! 

▍Podderzhka

• क्रोम 75
• फ़ायरफ़ॉक्स 67
• सफारी 12.1

Array.prototype.flat विधि

बहुआयामी सरणियाँ डेटा संरचनाएं हैं जो प्रोग्रामर काफी बार मुठभेड़ करते हैं। विशेष रूप से - कुछ डेटा लोड करते समय। इसी समय, सरणी के आयाम को कम करना हमेशा एक महत्वपूर्ण कार्य रहा है। इस समस्या को हल करना हमेशा संभव था, लेकिन इसके समाधान के लिए कोड को बहुत आकर्षक नहीं कहा जा सकता था।

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

 let courses = [  {    subject: "math",    numberOfStudents: 3,    waitlistStudents: 2,    students: ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']]  },  {    subject: "english",    numberOfStudents: 2,    students: ['Wilson', 'Taylor']  },  {    subject: "history",    numberOfStudents: 4,    students: ['Edith', 'Jacob', 'Peter', 'Betty']  } ] let courseStudents = courses.map(course => course.students) // [ //  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ], //  [ 'Wilson', 'Taylor' ], //  [ 'Edith', 'Jacob', 'Peter', 'Betty' ] // ] //       -  [].concat.apply([], courseStudents) 

अब हमारे पास Array.prototype.flat विधि है, जो एक वैकल्पिक तर्क लेता है जो इंगित करता है कि किस स्तर पर सरणी के तत्वों को "उठाया" जाना चाहिए।

 let courseStudents = [  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],  [ 'Wilson', 'Taylor' ],  [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let flattenOneLevel = courseStudents.flat(1) console.log(flattenOneLevel) // [ //  'Janet', //  'Martha', //  'Bob', //  [ 'Phil', 'Candace' ], //  'Wilson', //  'Taylor', //  'Edith', //  'Jacob', //  'Peter', //  'Betty' // ] let flattenTwoLevels = courseStudents.flat(2) console.log(flattenTwoLevels) // [ //  'Janet',  'Martha', //  'Bob',   'Phil', //  'Candace', 'Wilson', //  'Taylor', 'Edith', //  'Jacob',  'Peter', //  'Betty' // ] 

कृपया ध्यान दें कि यदि आप इस पद्धति से तर्क पारित नहीं करते हैं, तो यह ऐरे के तत्वों को एक स्तर तक बढ़ा देगा। यह बहुत महत्वपूर्ण है, क्योंकि हमारे मामले में हमें सरणी को पूरी तरह से फ्लैट डेटा संरचना में बदलने की आवश्यकता है। बिना पैरामीटर के इस पद्धति का उपयोग करने पर यहां क्या होता है:

 let courseStudents = [  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],  [ 'Wilson', 'Taylor' ],  [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let defaultFlattened = courseStudents.flat() console.log(defaultFlattened) // [ //  'Janet', //  'Martha', //  'Bob', //  [ 'Phil', 'Candace' ], //  'Wilson', //  'Taylor', //  'Edith', //  'Jacob', //  'Peter', //  'Betty' // ] 

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

 let courseStudents = [  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],  [ 'Wilson', 'Taylor' ],  [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let alwaysFlattened = courseStudents.flat(Infinity) console.log(alwaysFlattened) // [ //  'Janet',  'Martha', //  'Bob',   'Phil', //  'Candace', 'Wilson', //  'Taylor', 'Edith', //  'Jacob',  'Peter', //  'Betty' // ] 

हमेशा की तरह, इस तरह के संचालन का उपयोग सावधानी के साथ किया जाना चाहिए। यह दृष्टिकोण, शायद, उन मामलों के लिए एक अच्छा विकल्प नहीं कहा जा सकता है जब संसाधित सरणी की गहराई वास्तव में अज्ञात है।

▍Podderzhka

• क्रोम 75
• फ़ायरफ़ॉक्स 67
• सफ़ारी १२

Array.prototype.flatMap विधि

flat विधि के साथ, अब हमारे पास एक नई संयुक्त विधि है - Array.prototype.flatMap । ऊपर, हमने वास्तव में पहले से ही ऐसी स्थिति का एक उदाहरण देखा था जिसमें यह तरीका काम आ सकता है, लेकिन आइए एक और उदाहरण देखें।

मान लीजिए कि हमें कुछ तत्वों को एक सरणी में सम्मिलित करने के कार्य का सामना करना पड़ रहा है। नई JS विशेषताओं के आगमन से पहले हम इसे कैसे हल करेंगे? उदाहरण के लिए, इस तरह:

 let grades = [78, 62, 80, 64] let curved = grades.map(grade => [grade, grade + 7]) // [ [ 78, 85 ], [ 62, 69 ], [ 80, 87 ], [ 64, 71 ] ] let flatMapped = [].concat.apply([], curved) //    .       flat,      JS   // [ // 78, 85, 62, 69, // 80, 87, 64, 71 // ] 

अब हमारे पास Array.prototype.flat विधि है, इस कोड को बेहतर बनाया जा सकता है:

 let grades = [78, 62, 80, 64] let flatMapped = grades.map(grade => [grade, grade + 7]).flat() // [ // 78, 85, 62, 69, // 80, 87, 64, 71 // ] 

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

 let grades = [78, 62, 80, 64] let flatMapped = grades.flatMap(grade => [grade, grade + 7]); // [ // 78, 85, 62, 69, // 80, 87, 64, 71 // ] 

याद रखें कि, डिफ़ॉल्ट रूप से, Array.prototype.flat विधि एक इकाई के रूप में पारित की जाती है। flatMap विधि बिल्कुल उसी तरह से व्यवहार करती है, अर्थात यह सरणी के तत्वों को केवल 1 स्तर पर "उठाती" है। यह map और flat तरीकों के संयोजन का परिणाम है।

 let grades = [78, 62, 80, 64] let flatMapped = grades.flatMap(grade => [grade, [grade + 7]]); // [ //  78, [ 85 ], //  62, [ 69 ], //  80, [ 87 ], //  64, [ 71 ] // ] 

▍Podderzhka

• क्रोम 75
• फ़ायरफ़ॉक्स 67
• सफ़ारी १२

String.prototype.trimStart और String.prototype.trimEnd विधियाँ

ES2019 की एक और अच्छी नई विशेषता उपनाम है जो कुछ स्ट्रिंग विधियों को अधिक सार्थक नाम देती है। पहले, हमारे पास String.prototype.trimRight और String.prototype.trimLeft विधियाँ हमारे विवरण में String.prototype.trimLeft :

 let message = "  Welcome to CS 101  " message.trimRight() // '  Welcome to CS 101' message.trimLeft() // 'Welcome to CS 101  ' message.trimRight().trimLeft() // 'Welcome to CS 101' 

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

 let message = "  Welcome to CS 101  " message.trimEnd() // '  Welcome to CS 101' message.trimStart() // 'Welcome to CS 101  ' message.trimEnd().trimStart() // 'Welcome to CS 101' 

▍Podderzhka

• क्रोम 75
• फ़ायरफ़ॉक्स 67
• सफ़ारी १२

वैकल्पिक पकड़ ब्लॉक तर्क

ES2019 की एक और अच्छी विशेषता यह है कि ट्राइ try-catch ब्लॉकों में तर्क अब वैकल्पिक हो गया है। पहले, सभी catch ब्लॉकों को एक पैरामीटर के रूप में एक अपवाद ऑब्जेक्ट को पास करना था। इसका उपयोग न करने पर भी इसे catch लिए तर्क पारित किया जाना था।

 try {  let parsed = JSON.parse(obj) } catch(e) {  // e      console.log("error") } 

अब ऐसा नहीं है। यदि अपवाद ऑब्जेक्ट को catch में उपयोग नहीं किया जाता है, तो इस ब्लॉक में कुछ भी स्थानांतरित करने की आवश्यकता नहीं है।

 try {  let parsed = JSON.parse(obj) } catch {  console.log("error") } 

यह एक महान अवसर है, जो उन मामलों में काम आएगा जहां प्रोग्रामर को पहले से पता होता है कि किस प्रकार की आपातकालीन स्थिति के कारण संबंधित catch ।

▍Podderzhka

• क्रोम 75
• फ़ायरफ़ॉक्स 67
• सफ़ारी १२

फंक्शन में बदलाव ।prototyp.toString विधि

ES2019 मानक में परिवर्तन लाया गया है कि कैसे काम करने की विधि विधि काम करती है। पहले, उन्होंने आउटपुट कोड की उपस्थिति को थोड़ा विकृत किया:

 function greeting() {  const name = 'CSS Tricks'  console.log(`hello from ${name}`) } greeting.toString() //'function greeting() {\nconst name = \'CSS Tricks\'\nconsole.log(`hello from ${name} //`)\n} 

अब यह विधि फ़ंक्शन के स्रोत कोड के वास्तविक प्रतिनिधित्व को दर्शाती है।

 function greeting() {  const name = 'CSS Tricks'  console.log(`hello from ${name}`) } greeting.toString() // 'function greeting() {\n' + // " const name = 'CSS Tricks'\n" + // ' console.log(`hello from ${name}`)\n' + // '}' 

▍Podderzhka

• क्रोम 75
• फ़ायरफ़ॉक्स 60
• सफारी 12 ( आंशिक रूप से )

परिणाम

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

प्रिय पाठकों! क्या आपने ऐसी परिस्थितियों का सामना किया है जिसमें जेएस की नई विशेषताएं किसी भी समस्या के समाधान को सरल बनाती हैं?