Fungsi Arrow JavaScript Boleh Membuat Anda Pembangun Lebih Baik

Fungsi Arrow JavaScript Boleh Membuat Anda Pembangun Lebih Baik

JavaScript ES6 membawa perubahan menarik kepada dunia pembangunan web. Penambahan baru pada bahasa JavaScript membawa kemungkinan baru.





Salah satu perubahan yang lebih popular adalah penambahan fungsi anak panah ke dalam JavaScript. Fungsi anak panah adalah cara baru untuk menulis ekspresi fungsi JavaScript, memberi anda dua cara yang berbeza untuk membuat fungsi di aplikasi anda.



Fungsi anak panah memerlukan sedikit penyesuaian jika anda pakar dalam fungsi JavaScript tradisional. Mari kita lihat apakah ini, bagaimana ia berfungsi dan bagaimana ia memberi manfaat kepada anda.





Apakah Fungsi Arrow JavaScript?

Fungsi anak panah adalah cara baru untuk menulis ungkapan fungsi yang sebelumnya termasuk dalam pelepasan JavaScript ES6 . Mereka serupa dengan ungkapan fungsi JavaScript yang telah anda gunakan, dengan beberapa peraturan yang sedikit berbeza.

Fungsi anak panah selalu berfungsi tanpa nama, mempunyai peraturan yang berbeza untuk



this

, dan mempunyai sintaks yang lebih sederhana daripada fungsi tradisional.

cara menaik taraf komputer riba untuk permainan

Fungsi ini menggunakan token anak panah baru:



=>

Sekiranya anda pernah bekerja di Python, fungsi ini sangat serupa dengan Ungkapan Python Lambda .

Sintaks untuk fungsi ini sedikit lebih bersih daripada fungsi biasa. Terdapat beberapa peraturan baru yang perlu diingat:



  • Kata kunci fungsi dikeluarkan
  • Kata kunci kembali adalah pilihan
  • Pendakap kerinting adalah pilihan

Terdapat banyak perubahan kecil yang perlu diselesaikan, jadi mari kita mulakan dengan perbandingan asas ungkapan fungsi.

Cara Menggunakan Fungsi Panah

Fungsi anak panah mudah digunakan. Memahami fungsi anak panah lebih mudah jika dibandingkan berdampingan dengan ungkapan fungsi tradisional.

Berikut adalah ungkapan fungsi yang menambah dua nombor; pertama menggunakan kaedah fungsi tradisional:

let addnum = function(num1,num2){
return num1 + num2;
};
addnum(1,2);
>>3

Ini adalah fungsi yang cukup sederhana yang memerlukan dua argumen dan mengembalikan jumlahnya.

Berikut adalah ungkapan yang diubah menjadi fungsi anak panah:

let addnum = (num1,num2) => { return num1 + num2;};
addnum(1,2);
>>3

Sintaks fungsi agak berbeza menggunakan fungsi anak panah. Kata kunci fungsi dikeluarkan; token anak panah memberitahu JavaScript bahawa anda menulis fungsi.

Pendakap keriting dan kata kunci kembali masih ada. Ini adalah pilihan dengan fungsi anak panah. Inilah contoh fungsi yang lebih sederhana:

let addnum = (num1,num2) => num1 + num2;

Kata kunci kembali dan pendakap kerinting kini hilang. Yang tinggal adalah fungsi satu baris yang sangat bersih yang hampir separuh kodnya sebagai fungsi asal. Anda mendapat hasil yang sama dengan kod bertulis yang lebih kurang.

Terdapat banyak lagi fungsi panah. mari kita selami lebih mendalam sehingga anda dapat merasakan apa yang dapat mereka lakukan.

Ciri Fungsi Panah

Fungsi anak panah mempunyai pelbagai kegunaan dan ciri yang disertakan.

cara memindahkan aplikasi ke kad sd

Fungsi Biasa

Fungsi anak panah boleh menggunakan satu atau lebih argumen. Sekiranya anda menggunakan dua atau lebih argumen, anda mesti memasukkannya dalam kurungan. Sekiranya anda hanya mempunyai satu argumen, anda tidak perlu menggunakan tanda kurung.

let square = x => x * x
square(2);
>>4

Fungsi anak panah dapat digunakan tanpa argumen. Sekiranya anda tidak menggunakan argumen dalam fungsi anda, anda mesti menggunakan kurungan kosong.

let helloFunction = () => Console.log('Hello reader!');
helloFunction();
>>Hello reader!

Fungsi sederhana seperti ini menggunakan lebih kurang kod. Bayangkan betapa mudahnya sebuah kompleks projek seperti tayangan slaid JavaScript menjadi apabila anda mempunyai kaedah menulis fungsi yang lebih mudah.

Menggunakan Ini

Konsep

this

cenderung menjadi bahagian paling sukar dalam menggunakan JavaScript. Fungsi anak panah membuat

this

lebih senang digunakan.

Apabila anda menggunakan fungsi anak panah

this

akan ditentukan oleh fungsi lampiran. Ini dapat menimbulkan masalah yang timbul ketika anda membuat fungsi dan keperluan bersarang

this

untuk digunakan pada fungsi utama anda

Berikut adalah contoh popular yang menunjukkan jalan penyelesaian yang harus anda gunakan dengan fungsi biasa.

function Person() {
var that = this; //You have to assign 'this' to a new variable
that.age = 0;
setInterval(function growUp() {
that.age++;
}, 1000);
}

Menetapkan nilai

this

ke pemboleh ubah menjadikannya mudah dibaca apabila anda memanggil fungsi di dalam fungsi utama anda. Ini tidak kemas, inilah cara yang lebih baik untuk melakukannya menggunakan fungsi anak panah.

function Person(){
this.age = 0;
setInterval(() => {
this.age++; // Now you can use 'this' without a new variable declared
}, 1000);
}

Walaupun sangat bagus untuk fungsi, mereka tidak boleh digunakan untuk membuat kaedah di dalam objek. Fungsi anak panah tidak menggunakan ruang lingkup yang betul

this

.

Inilah objek sederhana yang membuat kaedah di dalam menggunakan fungsi anak panah. Kaedah itu harus mengurangkan topping pemboleh ubah satu ketika dipanggil. Sebaliknya, ia tidak berfungsi sama sekali.

cara memuat turun semua gambar dari laman facebook
let pizza = {
toppings: 5,
removeToppings: () => {
this.toppings--;
}
}
//A pizza object with 5 toppings
>pizza
>>{toppings: 5, removeToppings: f}
pizza.removeToppings(); //The method will not do anything to the object
>pizza
>>{toppings: 5, removeToppings: f} //Still has 5 toppings

Bekerja Dengan Susunan

Dengan menggunakan fungsi anak panah, anda dapat mempermudah kod yang digunakan untuk menggunakan kaedah array. Susunan dan kaedah array adalah bahagian JavaScript yang sangat penting jadi anda akan menggunakannya banyak.

Terdapat beberapa kaedah yang berguna seperti peta kaedah yang menjalankan fungsi pada semua elemen array dan mengembalikan array baru.

let myArray = [1,2,3,4];
myArray.map(function(element){
return element + 1;
});
>> [2,3,4,5]

Ini adalah fungsi yang cukup sederhana yang menambahkan satu pada setiap nilai dalam array. Anda boleh menulis fungsi yang sama dengan kurang kod dengan menggunakan fungsi anak panah.

let myArray = [1,2,3,4];
myArray.map(element => {
return element + 1;
});
>> [2,3,4,5]

Jauh lebih senang dibaca sekarang.

Membuat Literal Objek

Fungsi panah dapat digunakan untuk membuat literal objek dalam JavaScript. Fungsi biasa boleh membuatnya, tetapi mereka sedikit lebih lama.

let createObject = function createName(first,last) {
return {
first: first,
last: last
};
};

Anda boleh membuat objek yang sama dengan fungsi anak panah menggunakan lebih sedikit kod. Dengan menggunakan notasi anak panah, anda perlu membungkus badan fungsi dalam kurungan. Inilah sintaks yang diperbaiki dengan fungsi anak panah.

let createArrowObject = (first,last) => ({first:first, last:last});

Fungsi Arrow JavaScript dan Di Luar

Anda kini mengetahui beberapa cara yang berbeza fungsi panah JavaScript menjadikan hidup anda lebih mudah sebagai pembangun. Mereka memendekkan sintaks, memberi anda lebih banyak kawalan menggunakan

this

, menjadikan objek lebih mudah dibuat dan memberi anda kaedah baru untuk bekerja dengan kaedah larik.

Pengenalan fungsi anak panah, bersama dengan banyak ciri lain, dalam JavaScript ES6 menunjukkan betapa pentingnya JavaScript dalam pembangunan web. Terdapat banyak lagi yang boleh anda lakukan.

Ingin mengetahui lebih lanjut mengenai JavaScript? Ketahui kerangka kerja JavaScript ini. Tambahan, kami Lembaran menipu JavaScript memberikan maklumat yang berharga dan mempelajari lebih lanjut mengenai bagaimana JavaScript berfungsi boleh menjadikan anda pembangun yang lebih baik.

Berkongsi Berkongsi Tweet E-mel 6 Alternatif yang didengar: Aplikasi Buku Audio Percuma atau Murah Terbaik

Sekiranya anda tidak gemar membayar buku audio, berikut adalah beberapa aplikasi hebat yang membolehkan anda mendengarkannya secara percuma dan sah.

Baca Seterusnya Topik-topik yang berkaitan
  • Pengaturcaraan
  • JavaScript
Mengenai Pengarang Geran Anthony(40 Artikel Diterbitkan)

Anthony Grant adalah penulis bebas yang merangkumi Pengaturcaraan dan Perisian. Dia pakar Sains Komputer dalam bidang pengaturcaraan, Excel, perisian dan teknologi.

Lagi Dari Anthony Grant

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan