Khi trả về một đối tượng từ hàm mũi tên, có vẻ như cần phải sử dụng thêm một bộ {}và một returntừ khóa vì sự mơ hồ trong ngữ pháp.

Điều đó có nghĩa là tôi không thể viết p => {foo: "bar"}, nhưng phải viết p => { return {foo: "bar"}; }.

Nếu hàm mũi tên trả về bất cứ thứ gì ngoài một đối tượng, {}và returnkhông cần thiết, ví dụ : p => "foo".

p => {foo: "bar"}trả lại undefined.

Một sửa đổi p => {"foo": "bar"}ném “ SyntaxError: dấu hiệu bất ngờ: ' :'” .

Có một cái gì đó rõ ràng tôi đang thiếu?

Bạn phải bọc đối tượng trả lại theo nghĩa đen vào dấu ngoặc đơn. Nếu không, dấu ngoặc nhọn sẽ được coi là biểu thị cơ thể của chức năng. Các công việc sau đây:

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

Bạn không cần phải bọc bất kỳ biểu thức nào khác vào dấu ngoặc đơn:

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

và như thế.

Tham khảo: MDN - Trả lại đối tượng bằng chữ

Bạn có thể tự hỏi, tại sao cú pháp hợp lệ (nhưng không hoạt động như mong đợi):

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

Đó là do cú pháp nhãn của JavaScript :

Vì vậy, nếu bạn chuyển mã ở trên sang ES5, nó sẽ trông như sau:

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

Nếu phần thân của hàm mũi tên được bọc trong các dấu ngoặc nhọn, nó không hoàn toàn được trả về. Bọc đối tượng trong ngoặc đơn. Nó sẽ trông giống như thế này.

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

Bằng cách bọc cơ thể trong parens, chức năng sẽ trở lại { foo: 'bar }.

Hy vọng rằng, điều đó giải quyết vấn đề của bạn. Nếu không, gần đây tôi đã viết một bài viết về các chức năng Mũi tên bao gồm nó chi tiết hơn. Tôi hy vọng bạn thấy nó hữu dụng. Chức năng mũi tên Javascript

đúng cách

1. đối tượng trở lại bình thường

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. (biểu thức js)

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

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

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

giải thích

Câu trả lời tương tự có thể được tìm thấy ở đây!

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

https://mariusschulz.com/blog/retinating-object-literals-from-arrow-fifts-in-javascript

Vấn đề:

Khi bạn đang làm:

p => {foo: "bar"}

Trình thông dịch JavaScript nghĩ rằng bạn đang mở một khối mã nhiều câu lệnh và trong khối đó, bạn phải đề cập rõ ràng đến một câu lệnh return.

Giải pháp:

Nếu biểu thức hàm mũi tên của bạn có một câu lệnh , thì bạn có thể sử dụng cú pháp sau:

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

Nhưng nếu bạn muốn có nhiều câu lệnh thì bạn có thể sử dụng cú pháp sau:

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

Trong ví dụ trên, bộ dấu ngoặc nhọn đầu tiên mở một khối mã đa câu lệnh và bộ dấu ngoặc nhọn thứ hai dành cho các đối tượng động. Trong khối mã đa câu lệnh của hàm mũi tên, bạn phải sử dụng rõ ràng các câu lệnh return

Để biết thêm chi tiết, hãy kiểm tra Mozilla Docs cho biểu thức hàm mũi tên JS

Bạn luôn có thể kiểm tra điều này để biết thêm các giải pháp tùy chỉnh:

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