เมื่อส่งคืนวัตถุจากฟังก์ชันลูกศรดูเหมือนว่าจำเป็นต้องใช้ชุดพิเศษ{}และreturnคำหลักเนื่องจากความกำกวมในไวยากรณ์

ซึ่งหมายความว่าฉันไม่สามารถเขียนแต่ต้องเขียนp => {foo: "bar"}p => { return {foo: "bar"}; }

ถ้าฟังก์ชันลูกศรผลตอบแทนอื่นใดนอกเหนือจากวัตถุที่{}และไม่จำเป็นเช่น:returnp => "foo"

p => {foo: "bar"}undefinedผลตอบแทน

แก้ไขp => {"foo": "bar"}โยน“ SyntaxError: โทเค็นไม่คาดคิด: ': '”

มีบางสิ่งที่ชัดเจนว่าฉันหายไปหรือไม่?

คุณต้องล้อมวัตถุตัวอักษรที่คืนกลับมาไว้ในวงเล็บ มิฉะนั้นวงเล็บปีกกาจะถูกพิจารณาเพื่อแสดงถึงร่างกายของฟังก์ชั่น ผลงานดังต่อไปนี้:

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

คุณไม่จำเป็นต้องห่อนิพจน์อื่น ๆ ไว้ในวงเล็บ:

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

และอื่น ๆ

การอ้างอิง: MDN - การคืนค่าตัวอักษรของวัตถุ

คุณอาจสงสัยว่าทำไมไวยากรณ์จึงใช้ได้ (แต่ไม่ทำงานอย่างที่คาดไว้):

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

เป็นเพราะไวยากรณ์ฉลากของ JavaScript :

ดังนั้นหากคุณส่งรหัสข้างต้นไปยัง ES5 ควรมีลักษณะดังนี้:

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

หากฟังก์ชั่นลูกศรห่อด้วยเครื่องหมายปีกกาจะไม่ถูกส่งกลับโดยปริยาย ล้อมวัตถุในวงเล็บ มันจะมีลักษณะเช่นนี้

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

โดยการตัดร่างกายใน parens { foo: 'bar }ฟังก์ชั่นจะกลับมา

หวังว่านั่นจะช่วยแก้ปัญหาของคุณ ถ้าไม่ฉันเพิ่งเขียนบทความเกี่ยวกับฟังก์ชั่นลูกศรซึ่งครอบคลุมในรายละเอียดเพิ่มเติม ฉันหวังว่าคุณพบว่ามีประโยชน์. ฟังก์ชั่นลูกศร Javascript

วิธีการที่เหมาะสม

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. (นิพจน์ js)

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

ปัญหา:

เมื่อคุณทำ:

p => {foo: "bar"}

ล่าม JavaScript คิดว่าคุณกำลังเปิดบล็อกรหัสหลายข้อความและในบล็อกนั้นคุณต้องระบุข้อความสั่งคืนอย่างชัดเจน

สารละลาย:

หากนิพจน์ฟังก์ชันลูกศรของคุณมีคำสั่งเดียวคุณสามารถใช้ไวยากรณ์ต่อไปนี้:

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

แต่ถ้าคุณต้องการมีหลายคำสั่งคุณสามารถใช้ไวยากรณ์ต่อไปนี้:

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

ในตัวอย่างด้านบนชุดวงเล็บปีกกาแรกจะเปิดบล็อกรหัสหลายข้อความและชุดวงเล็บปีกกาสองชุดสำหรับวัตถุแบบไดนามิก ในฟังก์ชันโค้ดลูกศรหลายคำสั่งของลูกศรคุณต้องใช้ข้อความสั่งคืนอย่างชัดเจน

สำหรับรายละเอียดเพิ่มเติมให้ตรวจสอบMozilla Docs สำหรับ JS Arrow Function Expressions

คุณสามารถลองดูวิธีแก้ปัญหาที่กำหนดเองเพิ่มเติมได้ที่นี่:

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