Pemahaman mendalam tentang fungsi anak panah dalam pengetahuan JavaScript_Basic

Anak panah telah menjadi sebahagian daripada JavaScript dari awal, adalah disyorkan untuk membungkus kod skrip sebaris dalam ulasan HTML Ini boleh menghalang pelayar yang tidak menyokong JavaScript daripada memaparkan kod anda secara ralat. Anda mungkin telah menulis kod seperti berikut:

<script language="javascript">
<!--
  document.bgColor = "brown"; // red
// -->
</script>
 
<script language="javascript">
<!--
  document.bgColor = "brown"; // red
// -->
</script>

Pelayar lama akan melihat dua teg yang tidak disokong dan satu ulasan, yang hanya pelayar baharu yang menyokong JavaScript akan menghuraikan sebagai kod JavaScript.

Untuk menyokong ciri aneh ini, enjin JavaScript penyemak imbas menganggap juga mewakili komen satu baris Perbezaan dari HTML ialah bahagian sebelum --> manakala dalam JavaScript, baris selepas --> .

Hanya apabila --> muncul pada permulaan baris, ia menunjukkan bahawa anak panah ialah ulasan, kerana dalam kes lain, -->

function countdown(n) {
 while (n-->0) // "n goes to zero"
  alert(n);
 blastoff();
}
 
function countdown(n) {
 while (n-->0) // "n goes to zero"
  alert(n);
 blastoff();
}

Kod di atas sebenarnya boleh dijalankan. Menggelung sehingga n ialah 0 bukanlah ciri baharu ES6, tetapi digabungkan dengan ciri biasa, ia sangat mengelirukan. Bolehkah anda mengetahui bagaimana kod di atas berfungsi? Anda boleh menemui jawapannya di Stack Overflow.

Sudah tentu ada anak panah, iaitu operator kurang daripada atau sama <=, mungkin anda boleh mencari tempat untuk menggunakan anak panah, tetapi mari berhenti dan lihat anak panah yang belum pernah kita lihat sebelum ini:

• pergi ke operator
• <= kurang daripada atau sama dengan pengendali
• => ???

Jadi, apakah maksud => Inilah yang akan dibincangkan oleh artikel ini.

Pertama, mari bercakap tentang fungsi.
Ungkapan fungsi di mana-mana

Ciri JavaScript yang menarik ialah pada bila-bila masa anda memerlukan fungsi, anda boleh menciptanya dengan mudah.

Sebagai contoh, untuk mengikat acara klik pada butang:

$("#confetti-btn").click(
 
$("#confetti-btn").click(

Kaedah .click() jQuery memerlukan fungsi sebagai parameter Kami boleh mencipta fungsi dengan mudah:

$("#confetti-btn").click(function (event) {
 playTrumpet();
 fireConfettiCannon();
});

 
$("#confetti-btn").click(function (event) {
 playTrumpet();
 fireConfettiCannon();
});

Menulis kod seperti ini adalah perkara yang paling biasa bagi kami sekarang. Tetapi sebelum JavaScript menjadi popular, gaya kod ini masih kelihatan agak pelik kerana tiada ciri sedemikian dalam bahasa lain. Pada tahun 1958, Lisp mempunyai ungkapan fungsi, juga dipanggil fungsi lambda, satu ciri yang tidak wujud dalam C, Python, C#, dan Java selama bertahun-tahun.

Kini, keempat-empat bahasa ini semuanya mempunyai ungkapan lambda, dan bahasa yang lebih baharu biasanya mempunyai ungkapan lambda terbina dalam. JavaScript kini menyokong ciri ini, terima kasih kepada pembangun perpustakaan yang banyak bergantung pada ungkapan lambda, yang telah mendorong penggunaan meluas.

JavaScript mempunyai sintaks yang sedikit bertele-tele berbanding beberapa bahasa lain:

// A very simple function in six languages.
function (a) { return a > 0; } // JS
[](int a) { return a > 0; } // C++
(lambda (a) (> a 0)) ;; Lisp
lambda a: a > 0 # Python
a => a > 0 // C#
a -> a > 0 // Java
 
// A very simple function in six languages.
function (a) { return a > 0; } // JS
[](int a) { return a > 0; } // C++
(lambda (a) (> a 0)) ;; Lisp
lambda a: a > 0 # Python
a => a > 0 // C#
a -> a > 0 // Java

Fungsi anak panah

ES6 memperkenalkan sintaks baharu untuk fungsi penulisan:

// ES5
var selected = allJobs.filter(function (job) {
 return job.isSelected();
});

// ES6
var selected = allJobs.filter(job => job.isSelected());

 
// ES5
var selected = allJobs.filter(function (job) {
 return job.isSelected();
});
 
// ES6
var selected = allJobs.filter(job => job.isSelected());

Apabila anda memerlukan fungsi dengan hanya satu parameter, sintaks fungsi anak panah boleh dipermudahkan kepada Pengecam => Ungkapan, mengetepikan fungsi secara langsung dan mengembalikan kata kunci, serta tanda kurungan dan koma bertitik di belakang.

Untuk menulis fungsi dengan berbilang (atau tiada parameter, atau Parameter rehat dan nilai lalai parameter, atau parameter yang dimusnahkan), anda perlu mengelilingi parameter dengan kurungan:

// ES5
var total = values.reduce(function (a, b) {
 return a + b;
}, 0);

// ES6
var total = values.reduce((a, b) => a + b, 0);
 
// ES5
var total = values.reduce(function (a, b) {
 return a + b;
}, 0);
 
// ES6
var total = values.reduce((a, b) => a + b, 0);

Fungsi anak panah juga boleh berfungsi dengan sempurna dengan beberapa pustaka fungsi alat, seperti Underscore.js dan Immutable Malah, semua contoh dalam dokumentasi Immutable ditulis dalam ES6, dan kebanyakannya sudah menggunakan fungsi anak panah.

Selain menggunakan ungkapan dalam badan fungsi, fungsi anak panah juga boleh mengandungi blok pernyataan Ingat contoh yang kami nyatakan sebelum ini:

// ES5
$("#confetti-btn").click(function (event) {
 playTrumpet();
 fireConfettiCannon();
});
 
// ES5
$("#confetti-btn").click(function (event) {
 playTrumpet();
 fireConfettiCannon();
});

Berikut ialah cara menulis fungsi anak panah:

// ES6
$("#confetti-btn").click(event => {
 playTrumpet();
 fireConfettiCannon();
});
 
// ES6
$("#confetti-btn").click(event => {
 playTrumpet();
 fireConfettiCannon();
});

Perlu diambil perhatian bahawa fungsi anak panah menggunakan blok pernyataan tidak akan mengembalikan nilai secara automatik, dan pulangan mesti digunakan secara eksplisit untuk mengembalikan nilai.

Satu lagi nasihat, apabila menggunakan fungsi anak panah untuk mengembalikan objek, sentiasa gunakan tanda kurung untuk mengelilingi objek yang dikembalikan:

// create a new empty object for each puppy to play with
var chewToys = puppies.map(puppy => {});  // BUG!
var chewToys = puppies.map(puppy => ({})); // ok

 
// create a new empty object for each puppy to play with
var chewToys = puppies.map(puppy => {});  // BUG!
var chewToys = puppies.map(puppy => ({})); // ok

Oleh kerana objek kosong {} dan blok pernyataan kosong {} kelihatan betul-betul sama, ES6 akan sentiasa menganggap { serta-merta berikutan => sebagai permulaan blok pernyataan dan bukannya permulaan objek, kemudian anak anjing => {} dihuraikan sebagai fungsi anak panah tanpa badan fungsi dan nilai pulangan tidak ditentukan.