Rumah >hujung hadapan web >tutorial js >Menguasai Fungsi Anak Panah dalam JavaScript
Fungsi anak panah, yang diperkenalkan dalam ES6, menyediakan sintaks yang lebih ringkas untuk fungsi penulisan. Ia amat berguna untuk menulis fungsi sebaris dan mempunyai beberapa gelagat unik berbanding dengan ungkapan fungsi tradisional. Dalam blog ini, kami akan membincangkan asas fungsi anak panah, struktur kodnya, ciri khas dan cara ia berinteraksi dengan pelbagai binaan JavaScript.
Fungsi anak panah ditakrifkan menggunakan sintaks =>. Ia boleh digunakan untuk mencipta kedua-dua fungsi mudah dan kompleks.
Sintaks:
let functionName = (parameters) => { // code to execute };
Contoh:
let greet = (name) => { console.log("Hello, " + name + "!"); }; greet("Alice"); // Output: Hello, Alice!
Fungsi anak panah mempunyai sintaks ringkas yang boleh dipermudahkan lagi untuk fungsi satu baris.
Parameter Tunggal:
let square = x => x * x; console.log(square(5)); // Output: 25
Berbilang Parameter:
let add = (a, b) => a + b; console.log(add(3, 4)); // Output: 7
Tiada Parameter:
let sayHello = () => console.log("Hello!"); sayHello(); // Output: Hello!
Pemulangan Tersirat:
Untuk fungsi satu baris, pernyataan kembali boleh ditinggalkan.
let multiply = (a, b) => a * b; console.log(multiply(2, 3)); // Output: 6
Fungsi anak panah mempunyai beberapa gelagat dan interaksi istimewa dengan binaan JavaScript lain.
Fungsi anak panah tidak mempunyai konteks ini sendiri. Sebaliknya, mereka mewarisi ini daripada konteks leksikal sekeliling. Ini menjadikannya amat berguna dalam fungsi bukan kaedah dan panggil balik.
Contoh:
function Person() { this.age = 0; setInterval(() => { this.age++; console.log(this.age); }, 1000); } let p = new Person(); // Output: 1 2 3 4 ...
Penjelasan:
Fungsi anak panah boleh mengakses pembolehubah dari skop sekeliling.
Contoh:
let count = 0; let increment = () => { count++; console.log(count); }; increment(); // Output: 1 increment(); // Output: 2
Fungsi anak panah boleh digunakan dengan pelbagai binaan JavaScript seperti gelung, pernyataan suis dan fungsi lain.
let numbers = [1, 2, 3, 4, 5]; numbers.forEach(number => { console.log(number * 2); }); // Output: 2 4 6 8 10
let getDayName = (day) => { switch (day) { case 1: return "Monday"; case 2: return "Tuesday"; case 3: return "Wednesday"; case 4: return "Thursday"; case 5: return "Friday"; case 6: return "Saturday"; case 7: return "Sunday"; default: return "Invalid day"; } }; console.log(getDayName(3)); // Output: Wednesday
Fungsi anak panah boleh digunakan sebagai panggilan balik dalam fungsi lain.
Contoh:
let processArray = (arr, callback) => { for (let i = 0; i < arr.length; i++) { callback(arr[i]); } }; let numbers = [1, 2, 3, 4, 5]; processArray(numbers, number => { console.log(number * 2); }); // Output: 2 4 6 8 10
Fungsi anak panah ialah cara yang berkuasa dan ringkas untuk mentakrifkan fungsi dalam JavaScript. Dengan memahami sintaks, gelagat istimewa dan interaksi mereka dengan binaan lain, anda akan dapat menulis kod yang lebih cekap dan boleh dibaca. Teruskan berlatih dan meneroka untuk mendalami pemahaman anda tentang fungsi anak panah dalam JavaScript.
Nantikan blog yang lebih mendalam tentang JavaScript! Selamat mengekod!
Atas ialah kandungan terperinci Menguasai Fungsi Anak Panah dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!