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

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>
);

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');
};

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
};

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

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!