Bilakah Saya Harus Menggunakan Tanda Kurung vs. Kurung Keriting dalam Fungsi Anak Panah JavaScript?

Fungsi Anak Panah Secara Terperinci

Fungsi Anak Panah, yang diperkenalkan dalam ES6, ialah sintaks ringkas untuk mentakrifkan fungsi. Ia sering muncul dengan tatatanda yang berbeza, menggunakan pendakap kerinting atau kurungan. Artikel ini menyelidiki perbezaan antara dua varian ini.

Menentukan Fungsi Anak Panah

Fungsi anak panah bermula dengan set parameter dan anak panah gemuk (=>). Nilai pulangan kemudiannya ditentukan oleh badan, disertakan sama ada dengan:

• Kurungan: Apabila badan terdiri daripada satu ungkapan, kurungan digunakan, mis.:

  const foo = (params) => (
  <span>
    <p>Content</p>
  </span>
  );

• Kerinting pendakap: Jika badan merentangi berbilang baris atau mengandungi berbilang pernyataan, pendakap kerinting diperlukan, cth.:

  const handleBar = (e) => {
  e.preventDefault();
  dispatch('logout');
  };

Memahami Perbezaan

Perbezaannya terletak pada nilai pulangan. Kurungan menunjukkan nilai tunggal dikembalikan, manakala kurung kerinting menandakan pelaksanaan berbilang baris kod atau berbilang pernyataan.

JSX dan Tanda kurung

Dalam JavaScript XML (JSX), seperti yang dilihat dalam foo, badan mungkin kelihatan menjangkau berbilang baris, tetapi ia sebenarnya disusun menjadi satu elemen. Inilah sebabnya mengapa kurungan digunakan dalam kes itu.

Berbilang Garis dan Tanda Kurung

Untuk mengelakkan kekeliruan, berikut ialah contoh fungsi anak panah yang semuanya menghasilkan hasil yang sama:

const a = (who) => "hello " + who + "!";
const b = (who) => ("hello " + who + "!");
const c = (who) => (
  "hello " + who + "!"
);
const d = (who) => (
  "hello "
    + who
    + "!"
);
const e = (who) => {
  return "hello " + who + "!";
};

Mengelakkan Kod Blok

Kurungan juga digunakan di sekeliling literal objek dalam fungsi anak panah untuk mengelakkannya daripada ditafsirkan sebagai blok kod, cth:

const x = () => {} // Does nothing
const y = () => ({}) // returns an object

Kesimpulannya, pilihan antara pendakap kerinting dan kurungan dalam fungsi anak panah bergantung pada sama ada anda ingin mengembalikan nilai tunggal atau melaksanakan berbilang baris kod. Memahami nuansa notasi ini akan membantu anda menggunakan fungsi anak panah dengan berkesan dalam kod JavaScript anda.

Atas ialah kandungan terperinci Bilakah Saya Harus Menggunakan Tanda Kurung vs. Kurung Keriting dalam Fungsi Anak Panah JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!