Rumah > hujung hadapan web > tutorial js > Fungsi Anak Panah dalam ES6: Tanda kurung atau Pendakap Kerinting – Bila hendak menggunakan yang mana?

Fungsi Anak Panah dalam ES6: Tanda kurung atau Pendakap Kerinting – Bila hendak menggunakan yang mana?

Barbara Streisand
Lepaskan: 2024-12-14 00:39:09
asal
532 orang telah melayarinya

Arrow Functions in ES6: Parentheses or Curly Braces – When to Use Which?

Fungsi Anak Panah: Tanda Kurung vs. Pendakap Kerinting

Fungsi anak panah dalam ES6 menawarkan sintaks ringkas untuk mentakrifkan fungsi. Walau bagaimanapun, ia boleh membingungkan apabila anda menemui fungsi anak panah dengan format yang berbeza, sesetengahnya dengan kurungan kerinting dan yang lain dengan kurungan.

Kurungan: Ungkapan Tunggal

Fungsi anak panah dengan kurungan selepas anak panah gemuk kembalikan satu ungkapan. Contoh berikut mengembalikan elemen rentang:

const foo = (params) => (
    <span>
        <p>Content</p>
    </span>
);
Salin selepas log masuk

Kurung Kerinting: Ungkapan Berbilang

Sebaliknya, anak panah berfungsi dengan pendakap kerinting melaksanakan berbilang baris kod. Format ini membenarkan operasi yang lebih kompleks, seperti mengemas kini keadaan atau mengendalikan acara:

const handleBar = (e) => {
    e.preventDefault();
    dispatch('logout');
};
Salin selepas log masuk

JSX dan Pelbagai Talian

Contoh dengan foo mungkin kelihatan mengelirukan kerana ia menggunakan JSX (JavaScript XML), yang mewakili elemen HTML. Kod tersebut nampaknya merangkumi berbilang baris, tetapi ia sebenarnya disusun menjadi satu elemen.

Contoh Tambahan

Berikut ialah beberapa lagi contoh yang menggambarkan perbezaan:

const a = (who) => `hello ${who}!`; // Parentheses: Single expression
const b = (who) => (`hello ${who}!`); // Parentheses: Equivalent to (a)
const c = (who) => (...
  `hello ${who}!`...); // Curly braces: Multiple lines
const d = (who) => (
  `hello \
    ${who}!` // Curly braces: Multiple lines
);
const e = (who) => {
  return `hello ${who}!`; // Curly braces: Multiple lines with explicit return
};
Salin selepas log masuk

Kurungan Di Sekitar Objek Huruf

Anda juga mungkin menemui kurungan di sekeliling literal objek. Amalan ini mengelak daripada mengelirukan penghurai, yang sebaliknya mungkin menganggap objek literal sebagai blok kod:

const x = () => {} // Does nothing
const y = () => ({}) // Returns an object
Salin selepas log masuk

Ringkasnya, fungsi anak panah dengan kurungan mengembalikan ungkapan tunggal, manakala yang mempunyai kurungan kerinting melaksanakan berbilang baris kod . Memahami perbezaan ini adalah penting untuk menulis kod ES6 yang berkesan dan boleh dibaca.

Atas ialah kandungan terperinci Fungsi Anak Panah dalam ES6: Tanda kurung atau Pendakap Kerinting – Bila hendak menggunakan yang mana?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan