ECMAScript 6 एरो फ़ंक्शन जो एक ऑब्जेक्ट लौटाता है

Question

किसी एरो फंक्शन से किसी ऑब्जेक्ट को वापस करते समय, ऐसा लगता है कि व्याकरण में अस्पष्टता के कारण अतिरिक्त सेट {}और returnकीवर्ड का उपयोग करना आवश्यक है ।

इसका मतलब है कि मैं लिख नहीं सकता p => {foo: "bar"}, लेकिन लिखना होगा p => { return {foo: "bar"}; }।

यदि एरो फंक्शन किसी वस्तु के अलावा कुछ और देता है, {}और returnअनावश्यक हैं, जैसे p => "foo":।

p => {foo: "bar"}लौटता है undefined।

एक संशोधित p => {"foo": "bar"}थ्रो "" SyntaxError: अप्रत्याशित टोकन: ' :' " ।

क्या ज़ाहिर तौर पर कुछ ऐसा है, जिसका मुझे स्मरण नहीं है?

Answer 1

आपको रिटर्निंग ऑब्जेक्ट शाब्दिक को कोष्ठक में लपेटना होगा। अन्यथा घुंघराले ब्रेसिज़ को फ़ंक्शन के शरीर को निरूपित करने के लिए माना जाएगा। निम्नलिखित कार्य:

p => ({ foo: 'bar' });

आपको किसी अन्य अभिव्यक्ति को कोष्ठक में लपेटने की आवश्यकता नहीं है:

p => 10;
p => 'foo';
p => true;
p => [1,2,3];
p => null;
p => /^foo$/;

और इसी तरह।

संदर्भ: एमडीएन - रिटर्निंग ऑब्जेक्ट शाब्दिक

Comments

मुझे उत्सुकता है कि क्यों पार्न्स में फर्क पड़ता है।

— २28

@wrschneider क्योंकि parens js के बिना पार्सर को लगता है कि इसका फंक्शन बॉडी है, ऑब्जेक्ट नहीं है और फू एक लेबल है

— alexpods

@wrschneider अधिक विशेष रूप से, एएसटी नोड्स के संदर्भ में, कोष्ठक का उपयोग करते हुए एक अभिव्यक्ति कथन को दर्शाता है, जिसमें एक वस्तु अभिव्यक्ति मौजूद हो सकती है, जबकि डिफ़ॉल्ट रूप से, घुंघराले ब्रेसिज़ को एक ब्लॉक स्टेटमेंट के रूप में व्याख्या की जाती है।

— पैट्रिक रॉबर्ट्स

पता नहीं क्यों यह काम करता है, लेकिन आप के मूल्य का उपयोग करना चाहते हैं तो pवस्तु शाब्दिक के लिए के रूप में महत्वपूर्ण है, यह तुम कैसे करते है: p => ({ [p]: 'bar' })। इसके बिना [], यह या तो undefinedअक्षरशः होगा p।

— डैनमैन

@ डनमैन इसे गणनात्मक गुण कहा जाता है और यह वस्तु शाब्दिक गुणों की विशेषता है।

— डी। परदल

Answer 2

आप आश्चर्यचकित हो सकते हैं, कि वाक्यविन्यास वैध क्यों है (लेकिन अपेक्षित रूप से काम नहीं कर रहा है):

var func = p => { foo: "bar" }

इसकी वजह है जावास्क्रिप्ट लेबल सिंटैक्स :

इसलिए यदि आप उपरोक्त कोड को ES5 में ट्रांसपाइल करते हैं, तो यह इस तरह दिखना चाहिए:

var func = function (p) {
  foo:
  "bar"; //obviously no return here!
}

Comments

लेबल इस तरह के शायद ही कभी इस्तेमाल किए गए और गूढ़ विशेषता होते हैं। क्या वास्तव में उनका कोई मूल्य है? मुझे लगता है कि उन्हें पदावनत और अंततः हटा दिया जाना चाहिए।

— केनमोर

@Kenmore stackoverflow.com/questions/55934490/… - पीछे की संगतता देखें । ब्राउजर एक सुविधा को लागू करने से इंकार कर देगा जो मौजूदा साइटों को तोड़ती है

— निश्चितप्ररूपता

@Kenmore आप नेस्टेड छोरों से बाहर निकल सकते हैं यदि वे लेबल हैं। अक्सर उपयोग नहीं किया जाता है लेकिन निश्चित रूप से उपयोगी है।

— पेट्र ओडट

Answer 3

यदि तीर फ़ंक्शन का शरीर घुंघराले ब्रेसिज़ में लिपटे हुए है, तो यह निहित नहीं है। कोष्ठक में वस्तु लपेटें। यह कुछ इस तरह दिखेगा।

p => ({ foo: 'bar' })

शरीर को पैरेंस में लपेटकर, फ़ंक्शन वापस आ जाएगा { foo: 'bar }।

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

Answer 4

सही तरीके

1. सामान्य वापसी वस्तु

const getUser = user => {return { name: user.name, age: user.age };};

const user = { name: "xgqfrms", age: 21 };

console.log(getUser(user));
//  {name: "xgqfrms", age: 21}

2. (जेएस भाव)

const getUser = user => ({ name: user.name, age: user.age });

const user = { name: "xgqfrms", age: 21 };

console.log(getUser(user));
//  {name: "xgqfrms", age: 21}

समझाना

वही उत्तर यहाँ मिल सकता है!

https://github.com/lydiahallie/javascript-questions/issues/220

https://mariusschulz.com/blog/returning-object-literals-from-arrow-functions-in-javascript

Answer 5

मुद्दा:

जब आप कर रहे हैं:

p => {foo: "bar"}

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

समाधान:

यदि आपके एरो फंक्शन एक्सप्रेशन में एक ही स्टेटमेंट है , तो आप निम्न सिंटैक्स का उपयोग कर सकते हैं:

p => ({foo: "bar", attr2: "some value", "attr3": "syntax choices"})

लेकिन अगर आप कई स्टेटमेंट्स रखना चाहते हैं तो आप निम्नलिखित सिंटैक्स का उपयोग कर सकते हैं:

p => {return {foo: "bar", attr2: "some value", "attr3": "syntax choices"}}

उपरोक्त उदाहरण में, घुंघराले ब्रेसिज़ का पहला सेट एक मल्टी-स्टेटमेंट कोड ब्लॉक को खोलता है, और घुंघराले ब्रेसिज़ का दूसरा सेट डायनामिक ऑब्जेक्ट के लिए है। तीर फ़ंक्शन के मल्टी-स्टेटमेंट कोड ब्लॉक में, आपको स्पष्ट रूप से रिटर्न स्टेटमेंट का उपयोग करना होगा

अधिक जानकारी के लिए, जेएस एरो फंक्शन एक्सप्रेशन के लिए मोज़िला डॉक्स की जाँच करें

Answer 6

आप हमेशा अधिक कस्टम समाधान के लिए इसे देख सकते हैं:

x => ({}[x.name] = x);