Fungsi panah ECMAScript 6 yang mengembalikan objek

619

Saat mengembalikan objek dari fungsi panah, tampaknya perlu menggunakan set {}dan returnkata kunci tambahan karena ambiguitas dalam tata bahasa.

Itu berarti saya tidak bisa menulis p => {foo: "bar"}, tetapi harus menulis p => { return {foo: "bar"}; }.

Jika fungsi panah mengembalikan apa-apa selain objek, {}dan returntidak diperlukan, misalnya: p => "foo".

p => {foo: "bar"}kembali undefined.

p => {"foo": "bar"}Lemparan yang dimodifikasi SyntaxError: token tak terduga: ' :'” .

Apakah ada sesuatu yang jelas saya hilang?

jkschneider
sumber

Jawaban:

1108

Anda harus membungkus objek kembali secara literal menjadi tanda kurung. Kalau tidak, kurung kurawal akan dianggap menandakan tubuh fungsi. Karya-karya berikut:

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

Anda tidak perlu membungkus ekspresi lain ke dalam tanda kurung:

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

dan seterusnya.

Referensi: MDN - Mengembalikan literal objek

alexpods
sumber
7
Saya ingin tahu mengapa orangtua membuat perbedaan.
wrschneider
40
@wrschneider karena tanpa parens js parser berpikir bahwa itu adalah fungsi tubuh, bukan objek, dan foo adalah label
alexpods
21
@wrschneider lebih khusus, dalam hal AST node, menggunakan tanda kurung menunjukkan pernyataan ekspresi, di mana ekspresi objek dapat ada, sedangkan secara default, kurung kurawal ditafsirkan sebagai pernyataan blok.
Patrick Roberts
5
Tidak tahu mengapa karya ini, tetapi jika Anda ingin menggunakan nilai psebagai kunci untuk literal objek, ini adalah bagaimana Anda melakukannya: p => ({ [p]: 'bar' }). Tanpa [], itu akan menjadi undefinedhuruf atau harfiah p.
DanMan
1
@DanMan Ini disebut properti terkomputasi dan ini adalah fitur literal objek.
D. Pardal
62

Anda mungkin bertanya-tanya, mengapa sintaksnya valid (tetapi tidak berfungsi seperti yang diharapkan):

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

Itu karena sintaks label JavaScript :

Jadi jika Anda mengubah kode di atas ke ES5, itu akan terlihat seperti:

var func = function (p) {
  foo:
  "bar"; //obviously no return here!
}
Petr Odut
sumber
5
Label adalah fitur yang jarang digunakan dan esoteris. Apakah mereka BENAR-BENAR memiliki nilai? Saya merasa mereka harus ditinggalkan dan akhirnya dihapus.
Kenmore
@ Kenmore Lihat stackoverflow.com/questions/55934490/… - kompatibilitas mundur. Peramban akan menolak untuk mengimplementasikan fitur yang memecah situs yang ada
Performa Tertentu
@Kenmore Anda bisa keluar dari loop bersarang jika mereka diberi label. Tidak sering digunakan tetapi pasti bermanfaat.
Petr Odut
17

Jika tubuh fungsi panah dibungkus dengan kurung kurawal, itu tidak dikembalikan secara implisit. Bungkus objek dalam tanda kurung. Akan terlihat seperti ini.

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

Dengan membungkus tubuh dalam parens, fungsi akan kembali { foo: 'bar }.

Semoga itu menyelesaikan masalah Anda. Jika tidak, saya baru-baru ini menulis artikel tentang fungsi Panah yang membahasnya secara lebih rinci. Semoga bermanfaat. Fungsi Panah Javascript

Paul McBride
sumber
2

cara yang benar

  1. objek pengembalian normal

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

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

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

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

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

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

menjelaskan

gambar

Jawaban yang sama dapat ditemukan di sini!

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

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

xgqfrms
sumber
1

Isu:

Ketika Anda melakukannya:

p => {foo: "bar"}

Penerjemah JavaScript berpikir Anda sedang membuka blok kode multi-pernyataan, dan di blok itu, Anda harus secara eksplisit menyebutkan pernyataan kembali.

Larutan:

Jika ekspresi fungsi panah Anda memiliki satu pernyataan , maka Anda dapat menggunakan sintaks berikut:

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

Tetapi jika Anda ingin memiliki banyak pernyataan maka Anda dapat menggunakan sintaks berikut:

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

Dalam contoh di atas, set pertama kurung kurawal membuka blok kode multi-pernyataan, dan set kedua kurung kurawal untuk objek dinamis. Dalam blok kode multi-pernyataan fungsi panah, Anda harus secara eksplisit menggunakan pernyataan kembali

Untuk detail lebih lanjut, lihat Mozilla Docs untuk Ekspresi Fungsi JS Arrow

Berkarat
sumber
-2

Anda selalu dapat memeriksa ini untuk solusi kustom lainnya:

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