वैकल्पिक चेनिंग, अशक्त के साथ मिलन, और वे कोड लिखने के लिए हमारे दृष्टिकोण को कैसे बदलते हैं

मिगेल द्वारा फोटो Á पडरियन ।

शुभ दिन, दोस्तों!

मैं आपके लिए सैम सेदिगियन के लेख "वैकल्पिक चैनिंग, अशक्त तालमेल और कैसे वे आपके द्वारा लिखी गई विधि को बदलेंगे " का अनुवाद प्रस्तुत करते हैं।

वैकल्पिक श्रृंखलन, अशक्त के साथ संघ, और वे लेखन कोड के लिए दृष्टिकोण कैसे बदलते हैं

ऑब्जेक्ट तक पहुँचने के लिए एक सुरक्षित और एर्गोनोमिक तरीका।

यदि आप टाइपस्क्रिप्ट रिलीज़ का अनुसरण करते हैं, तो आप जानते हैं कि टाइपस्क्रिप्ट 3.7 में वैकल्पिक चेनिंग और नल कोलेसिंग को पेश किया गया था। इसके अलावा, ये सुविधाएँ बाबेल 7.8.0 में डिफ़ॉल्ट रूप से शामिल हैं। यह जावास्क्रिप्ट सुविधाओं की भूमिका के लिए मुख्य दावेदारों में से एक है। वर्तमान में, वे क्रमशः 4 और 3 चरणों में हैं, (23 जनवरी को, ECMAScript 2020 मानक को अपनाया गया था, जहां एक वैकल्पिक श्रृंखला, अशक्तता के साथ एकीकरण, और कुछ दिलचस्प बातें हैं; मुझे पता है कि हाल ही में Habré पर एक लेख प्रकाशित हुआ है) जेएस ईएस 2020 में पेश की गई सुविधाओं के बारे में एक अनुवाद , हालांकि, मुझे लगता है कि कुछ अतिरिक्त उदाहरण चोट नहीं करेंगे - लगभग।

वैकल्पिक चेनिंग

अक्सर, हमें किसी वस्तु की गहराई से एम्बेडेड संपत्ति तक पहुंचना पड़ता है। यदि आपने बहुत उच्च-गुणवत्ता वाले कोड की 100 पंक्तियां नहीं लिखी हैं, तो यह अनकैप्ड टाइपर्र हो सकता है।

const data = {} data.user.id // Uncaught TypeError: Cannot read property 'id' of undefined //           -   

आगे के उदाहरणों के लिए, हम इस छद्म कोड (गलत सर्वर प्रतिक्रिया) का उपयोग करेंगे:

 { 'url': 'https://api.github.com/repos/sedighian/Hello-World/pulls/12', 'number': 12, 'state': 'open', 'title': 'Amazing new feature', 'user': { 'login': 'sedighian', 'id': 123234 }, 'labels': [{ 'id': 208045946, 'name': 'bug', }] } 

अनक्रेड टाइप टाइप से बचने और आईडी वैल्यू प्राप्त करने की कोशिश करते हुए, हमें "कुछ डांस करना है"। हम पहले जिस दृष्टिकोण का उपयोग करते थे, वह प्रत्येक घोंसले के स्तर पर वस्तु की सच्चाई को सत्यापित करने के लिए था। यह टेम्पलेट एक सशर्त विवरण की तरह है जो एक संपत्ति तक पहुंचने के लिए एक बूलियन की तरह लौटता है, लेकिन यह सबसे साफ और सबसे सुरक्षित तरीका है जिसे हमने अब तक स्थित किया है:

 const userId = data && data.user && data.user.id //     const label = data && data.labels && data.labels[0] const someFuncRes = navigator && navigator.serviceWorker && window.serviceWorker() 

या, यदि आप विनाशकारी पसंद करते हैं:

 const { user: { id } = {} } = data || {} //        const { user } = data || {} const { id } = user || {} 

लॉडश या एम्बर का उपयोग करने के लिए एक अधिक एर्गोनोमिक तरीका है:

 // lodash import _ from 'lodash' _.get(data, 'user.id') // ember import { get } from '@ember/object' get(data, 'user.id') 

हम वैकल्पिक श्रृंखला के साथ कैसे करते हैं?

 const userId = data?.user?.id //     const label = data?.labels?.[0] const someFuncRes = someFunc?.() 

अशक्त (अशक्त coalescing) के साथ संयोजन

जब हम जिस वस्तु का संपत्ति मूल्य प्राप्त कर रहे हैं, वह शून्य या अपरिभाषित है, तो हम डिफ़ॉल्ट मान का उपयोग करते हैं। पहले, ऑपरेटर || (तार्किक या)।

यदि हम डिफ़ॉल्ट रूप से लॉगिन प्रॉपर्टी के मान के लिए सेडियन लिखना चाहते हैं, तो हम निम्न कार्य करते हैं:

 //      data && data.user && data.user.login || 'sedighian' //     data?.user?.login || 'sedighian' //        null data?.user?.login ?? 'sedighian' 

दूसरे और तीसरे उदाहरण समान हैं। अशक्त के साथ संयोजन का क्या लाभ है? अशक्त के साथ संयोजन केवल दाईं ओर मूल्यांकन करता है यदि बाईं ओर अपरिभाषित या अशक्त है। जब हम वास्तविक (वैध), लेकिन गलत मूल्यों के साथ काम करते हैं, तो यह हमें यादृच्छिक परिणामों से कुछ सुरक्षा प्रदान करता है।

मान लें कि हम '' (खाली स्ट्रिंग), गलत या 0. के साथ लौटना चाहते हैं यह काम नहीं करेगा, क्योंकि वह सही पक्ष लौटाएगा। इस मामले में, अशक्त के साथ संयोजन हमारे लिए उपयोगी है:

 //  data.user.alias   ,     data?.user?.alias ?? 'code ninja' // '' data?.user?.alias || 'code ninja' // code ninja //  data.user.volumePreference = 0 data?.user?.volumePreference ?? 7 // 0 data?.user?.volumePreference || 7 // 7 //  data.user.likesCats = false data?.user?.likesCats ?? true // false data?.user?.likesCats || true // true 

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

 // lodash import _ from 'lodash' _.get(data, 'user.likesCats', true) // ember import { getWithDefault } from '@ember/object' getWithDefault(data, 'user.likesCats', true) 

याद रखें कि अशक्त के साथ संयोजन एक चर के डिफ़ॉल्ट मूल्य से अधिक है। यदि कोई संबंधित मान नहीं है, तो कोड ब्लॉक निष्पादित करने का यह एक वैकल्पिक तरीका है:

 const temp = { celsius: 0 } temp?.fahrenheit ?? setFahrenheit(temp) 

क्या याद किया जाना चाहिए?

वैकल्पिक स्ट्रिंग में वर्णों का क्रम याद रखें (पहले एक प्रश्न चिह्न, फिर एक अवधि):

 data.?user // Uncaught SyntaxError: Unexpected token '?' data?.user // ok 

वैकल्पिक श्रृंखला एक गैर-फ़ंक्शन को कॉल करने से सुरक्षा नहीं करती है:

 data?.user() // Ungaught TypeError: user is not a function 

अशक्त के साथ संयोजन दर्जना.गेट या EmberObject.getWithDefault के समान नहीं है। मुख्य अंतर यह है कि c null का संयोजन "null" मान को कैसे संभालता है:

 const data = { user: { interests: null } } // lodash import _ from 'lodash' _.get(data, 'user.interests', 'knitting') // null // ember import { get } from '@ember/object' getWithDefault(data, 'user.interests', 'knitting') // null //   null data?.user?.interests ?? 'knitting' // knitting 

आपका ध्यान के लिए धन्यवाद। ऑल द बेस्ट।