5 जावास्क्रिप्ट सुविधाएँ जिसके बिना मैं कोड नहीं लिख सकता था

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

मैं आपके लिए केंट डोड्स के लेख "5 जावास्क्रिप्ट सुविधाएँ जिन्हें मैं बिना कोड नहीं कर सका" का अनुवाद प्रस्तुत करता हूँ ।

यह मेरा पहला अनुवाद है, इसलिए मुझे किसी भी टिप्पणी पर खुशी होगी।

5 जावास्क्रिप्ट सुविधाएँ जिसके बिना मैं कोड नहीं लिख सकता था

इससे पहले कि हम शुरू करें, मुझे कोड लिखने के बारे में थोड़ी बात करनी चाहिए। मेरे लगभग सभी कोड जावास्क्रिप्ट के होते हैं, साथ ही कुछ HTML और सीएसएस भी। मैं क्लाइंट और सर्वर दोनों जेएस लिखता हूं। मैं अपने कोड का परीक्षण कर रहा हूं। मैं ओपन सोर्स लाइब्रेरी बनाता और वितरित करता हूं जो दुनिया भर के हजारों डेवलपर्स द्वारा उपयोग की जाती हैं। फ्रंटएंड के लिए, मैं प्रतिक्रिया का उपयोग करता हूं, बैकएंड के लिए - एक्सप्रेस या सर्वर रहित कंप्यूटिंग।

यहां 5 जेएस विशेषताएं हैं जिनके बिना मैं कोड नहीं लिख सकता था। यादृच्छिक क्रम में। बेशक, "जिसके बिना मैं कोड नहीं लिख सकता था" एक अतिशयोक्ति है। ये ऐसी विशेषताएं हैं जो मुझे वास्तव में पसंद हैं और हर समय मेरे द्वारा उपयोग की जाती हैं।

1. पुनर्गठन

मैं लगभग सभी फाइलों में इस सुविधा का उपयोग करता हूं। इससे कोई फर्क नहीं पड़ता कि क्या यह एक रिएक्ट घटक है या एक फ़ंक्शन है जो तर्क लेता है; पुनर्गठन एक अच्छी बात है।

यहाँ कुछ उदाहरण हैं:

const address = { city: 'Salt Lake City', state: 'UT', zip: 84115, coords: { lat: 40.776608, long: -111.920485, }, } // ,    : const city = address.city const state = address.state const zip = address.zip //  ,    : const {city, state, zip} = address 

यहाँ यह प्रतिक्रिया में कैसा दिखता है:

 //  : function UserName(props) { return ( <div> </div> ) } //   : function UserName() { return ( <div> </div> ) } //    : function UserName({name: {first, last}}) { return ( <div> </div> ) } 

यह सुविधा आपको कुछ दिलचस्प चीजें करने की अनुमति देती है:

 const info = { title: 'Once Upon a Time', protagonist: { name: 'Emma Swan', enemies: [ {name: 'Regina Mills', title: 'Evil Queen'}, {name: 'Cora Mills', title: 'Queen of Hearts'}, {name: 'Peter Pan', title: `The boy who wouldn't grow up`}, {name: 'Zelena', title: 'The Wicked Witch'}, ], }, } //       , //          const { title, protagonist: { name: name, enemies: [, , , {title: enemyTitle, name: enemyName}], }, } = info console.log(`${enemyTitle} (${enemyName}) is an enemy to ${name} in "$5 JavaScript Features I Couldn't Code Without"`) 

2. मॉड्यूल

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

यहाँ कुछ उदाहरण हैं:

 // a.js //  function add(a, b) { return a + b } const foo = 'bar' const theAnswer = 42 const theQuestion = 'who knows' //        ,  //     ""    export default add export {foo, theAnswer, theQuestion} // b.js //  // 1.   import './a' // 2.    import add from './a' // 3.  `theAnswer`  `theQuestion`  './a' import {theAnswer, theQuestion} from './a' // 4.  `theAnswer`     `fortyTwo` import {theAnswer as fourtyTwo} from './a' // 5.  `add` ( )  `theQuestion` import {default as add, theQuestion} from './a' // 6.  `add`  `theQuestion`      import add, {theQuestion} from './a' // 7.     " "   `allTheThings` import * as allTheThings from './a' 

यदि आप मॉड्यूल के बारे में अधिक जानना चाहते हैं, तो आप मेरा यूट्यूब वीडियो देख सकते हैं - "जितना आप ईएस 6 मॉड्यूल के बारे में जानना चाहते हैं उससे अधिक"।

3. डिफ़ॉल्ट सेटिंग्स

मैं हर समय इस सुविधा से प्यार करता हूं और इसका उपयोग करता हूं। यह फ़ंक्शन तर्क और विनाशकारी दोनों पर लागू होता है। यहां बताया गया है कि किसी वस्तु का पुनर्गठन कैसे किया जाता है:

 const bench = {type: 'Piano', adjustable: false} const {legs = 4} = bench // `The bench has ${legs} legs` // -> The bench has 4 legs // bench - , leg -  

ध्यान दें कि बेंच ऑब्जेक्ट में पैरों की संपत्ति नहीं है। डिफ़ॉल्ट पैरामीटर सिंटैक्स के बिना, पैर का मूल्य अपरिभाषित होगा।

आप इस सुविधा के साथ विनाशकारी असाइनमेंट का उपयोग कर सकते हैं:

 const bench = {type: 'Piano', adjustable: false} const {legs: legCount = 4} = bench // `The bench has ${legCount} legs` // -> The bench has 4 legs 

पैरामीटर सूची में यह कैसा दिखता है:

 function getDisplayName(firstName = 'Unknown', lastName = 'Unknown') { return `${firstName} ${lastName}` } // getDisplayName() // -> Unknown Unknown // getDisplayName('Andrew') // -> Andrew Unknown // getDisplayName(undefined, 'Yang') // -> Unknown Yang // getDisplayName('Andrew', 'Yang') // -> Andrew Yang 

यह सुविधा आपको कुछ बहुत ही रोचक चीजें करने की अनुमति देती है, क्योंकि "=" चिह्न के दाईं ओर के मूल्य की गणना केवल आवश्यक होने पर की जाती है। इसका मतलब है कि आप इसका उपयोग आवश्यक मापदंडों की जांच करने के लिए कर सकते हैं:

 function getCandy( kind = requiredParam('kind'), size = requiredParam('size'), upperKind = kind.toUpperCase(), callback = function noop() {}, ) { const result = {kind, size, upperKind} callback(result) return result } function requiredParam(argName) { throw new Error(`${requiredParam} is required`) } // getCandy('twix', 'king') // -> {kind: 'twix', size: 'king', upperKind: 'TWIX'} // getCandy('twix') // -> : 'size is required' 

कुछ लोगों को यह कोड बहुत जटिल लगता है। शायद वे सही हैं। लेकिन यह कैसे काम करता है, यह समझना बहुत अच्छा है!

ओह, और आपने देखा कि हम पिछले तर्कों का उपयोग निम्न तर्कों के लिए डिफ़ॉल्ट मापदंडों के भाग के रूप में कर सकते हैं (जैसा कि ऊपरी बिंदु के साथ होता है)? महान, सही?

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

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

तीर कार्यों का उपयोग करने के कुछ उदाहरण यहां दिए गए हैं:

 const divide = (a, b) => a / b const getFive = () => 5 const identity = i => i const asArray = (...args) => args // ,         // (       ), //     ,  : const tryInvoke = (obj, fn, ...args) => { try { return obj[fn](...args) } catch (e) { return undefined } } //  ,   ,       const getObject = favoriteCandy => () //  JSX ( JS  React)        const MyComponent = () => ( <div> Hello world! I am a function and I return <strong>JSX!</strong> </div> ) 

5. वादा करता है और async / प्रतीक्षा करें

JS सिंगल-थ्रेडेड है और एक इवेंट सिस्टम (कॉल स्टैक) पर बनाया गया है। मैं इस बात का बहुत बड़ा प्रशंसक हूं कि इवेंट लूप क्या है? (रूसी उपशीर्षक के साथ)। वादे और async / इंतजार यह प्रबंधन करने के लिए महान उपकरण हैं। मेरा अधिकांश कोड अतुल्यकालिक है, और ये उपकरण मेरे काम को बहुत सरल करते हैं। ईमानदारी से, वादे एक गंभीर विषय हैं और कुछ का उपयोग करने की आवश्यकता होती है, लेकिन वे महान हैं।

मैं अक्सर परीक्षण और बैकएंड में async / प्रतीक्षा का उपयोग करता हूं। यहाँ एक अतुल्यकालिक परीक्षण का एक उदाहरण दिया गया है:

 test('Can fill out a form across multiple pages', async () => { mockSubmitForm.mockResolvedValueOnce({success: true}) const testData = {food: 'test food', drink: 'test drink'} const {findByLabelText, findByText} = render(<App />) user.click(await findByText(/fill.*form/i)) user.type(await findByLabelText(/food/i), testData.food) user.click(await findByText(/next/i)) user.type(await findByLabelText(/drink/i), testData.drink) user.click(await findByText(/review/i)) expect(await findByLabelText(/food/i)).toHaveTextContent(testData.food) expect(await findByLabelText(/drink/i)).toHaveTextContent(testData.drink) user.click(await findByText(/confirm/i, {selector: 'button'})) expect(mockSubmitForm).toHaveBeenCalledWith(testData) expect(mockSubmitForm).toHaveBeenCalledTimes(1) user.click(await findByText(/home/i)) expect(await findByText(/welcome home/i)).toBeInTheDocument() }) 

यहाँ एक्सप्रेस में async \ प्रतीक्षा का उपयोग करने का एक उदाहरण है:

 async function getListItems(req, res) { const listItems = await listItemsDB.query({ownerId: req.user.id}) res.json({listItems: await expandBookDataMultiple(listItems)}) } 

उत्सुकता से, मैं अक्सर अपने रिएक्ट कोड (कम से कम सीधे) में async / प्रतीक्षा का उपयोग नहीं करता। ऐसा इसलिए है क्योंकि मैं अपने घटकों के बाहर अधिकांश "अतुल्यकालिक तर्क" करने की कोशिश करता हूं। इसलिए, यदि मैं, उदाहरण के लिए, प्रतिक्रिया में कॉल का उपयोग करते समय कुछ अतुल्यकालिक करता हूं, तो मैं खुद को एक कॉल को अतुल्यकालिक फ़ंक्शन तक सीमित करता हूं, क्योंकि मुझे वादों के साथ काम करना आसान लगता है:

 React.useEffect(() => { getUser().then( user => setState({status: 'success', error: null, user}), error => setState({status: 'error', error, user: null}), ) }, []) 

मैं आपको सलाह देता हूं कि आप एंथनी चू "असोड / इंतजार में नोड" लेख को पढ़ें ।

निष्कर्ष

कई अन्य विशेषताएं हैं जिनका मैं नियमित रूप से उपयोग करता हूं और जिन्हें इस सूची में शामिल किया जा सकता है। ये विशेषताएं मेरी पसंदीदा हैं, मैं हमेशा उनकी ओर मुड़ता हूं। भाषा में कुछ नए जोड़ भी हैं जो अभी तक मेरी मांसपेशी स्मृति में प्रवेश नहीं कर पाए हैं। अब JS डेवलपर बनने का समय है! मुझे उम्मीद है कि यह लेख आपके लिए उपयोगी था! सौभाग्य है