Fungsi JavaScript ES6: Bahagian Yang Baik

ES6 menawarkan beberapa fungsi baru yang hebat yang menjadikan pengaturcaraan dalam JavaScript lebih fleksibel. Mari kita bincangkan beberapa daripadanya - khususnya, parameter lalai, parameter rehat, dan fungsi anak panah.

Petua menyeronokkan : anda boleh menyalin dan menampal salah satu contoh / kod ini ke Babel REPLdan anda dapat melihat bagaimana kod ES6 beralih ke ES5.

Nilai Parameter Lalai

Fungsi JavaScript mempunyai fitur unik yang memungkinkan Anda melewati sejumlah parameter selama panggilan fungsi (parameter sebenarnya) tanpa mengira jumlah parameter yang terdapat dalam definisi fungsi (parameter formal). Oleh itu, anda perlu memasukkan parameter lalai sekiranya seseorang lupa melewati salah satu parameter.

Bagaimana parameter lalai akan dilaksanakan dalam ES5

Perkara di atas nampak baik semasa kita menjalankannya. number2tidak lulus dan kami memeriksa ini menggunakan ||operator ' ' untuk mengembalikan operan kedua jika yang pertama tidak benar. Oleh itu, '10' ditetapkan sebagai nilai lalai kerana number2tidak ditentukan.

Hanya ada satu masalah. Bagaimana jika seseorang melewati '0' sebagai hujah kedua? ⚠

Pendekatan di atas akan gagal kerana nilai lalai kita '10' akan ditetapkan dan bukannya nilai lulus, seperti '0'. Kenapa? Kerana '0' dinilai sebagai palsu!

Mari perbaiki kod di atas, bukan?

Aduh! Itu terlalu banyak kod. Tidak sejuk sama sekali. Mari lihat bagaimana ES6 melakukannya.

Parameter lalai dalam ES6

function counts(number1 = 5, number2 = 10) { // do anything here}

number1dan number2diberi nilai lalai masing-masing '5' dan '10'.

Baiklah, ini cukup banyak. Pendek dan manis. Tidak ada kod tambahan untuk memeriksa parameter yang hilang. Ini menjadikan badan fungsinya bagus dan pendek. ?

CATATAN: Apabila nilai undefinedditeruskan untuk parameter dengan argumen lalai, seperti yang diharapkan nilai yang dilalui tidak sah dan nilai parameter lalai ditetapkan . Tetapi jika nulllulus, itu dianggap sah dan parameter lalai tidak digunakan dan nol ditugaskan untuk parameter tersebut.

Ciri baik parameter lalai adalah bahawa parameter lalai tidak semestinya harus menjadi nilai primitif, dan kita juga dapat menjalankan fungsi untuk mengambil nilai parameter lalai. Inilah contohnya:

Parameter sebelumnya juga boleh menjadi parameter lalai untuk parameter yang mengikutinya seperti:

function multiply(first, second = first) { // do something here}

Tetapi kebalikannya akan menimbulkan kesalahan. Maksudnya, jika parameter kedua ditetapkan sebagai nilai lalai untuk parameter pertama, itu akan menghasilkan kesalahan kerana parameter kedua belum ditentukan ketika ditugaskan ke parameter pertama.

function add(first = second, second) { return first + second;}console.log(add(undefined, 1)); //throws an error

Parameter Rehat

A sepanjang parameter hanya satu parameter bernama yang didahului oleh tiga titik (...). Parameter bernama ini menjadi array yang mengandungi sisa parameter (iaitu selain dari parameter bernama) yang dilalui semasa panggilan fungsi.

Perlu diingat bahawa hanya ada satu parameter rehat , dan itu harus menjadi parameter terakhir. Kami tidak dapat memiliki parameter bernama setelah parameter rehat.

Inilah contohnya:

Seperti yang anda lihat, kami menggunakan parameter selebihnya untuk mendapatkan semua kunci / sifat yang akan diekstrak dari objek yang dilalui, yang merupakan parameter pertama.

Perbezaan antara parameter istirahat dan 'objek argumen' adalah yang terakhir berisi semua parameter sebenarnya yang dilewatkan selama panggilan fungsi, sementara 'parameter istirahat' hanya berisi parameter yang tidak dinamakan parameter dan dilewatkan selama panggilan fungsi.

Fungsi Anak Panah ➡

Fungsi Panah, atau "fungsi panah lemak", memperkenalkan sintaks baru untuk menentukan fungsi yang sangat ringkas. Kita tidak boleh menaip kata kunci seperti function, returndan bahkan tanda kurung { }dan kurungan ().

Sintaks

Sintaksnya terdapat dalam pelbagai rasa, bergantung pada penggunaan kita. Semua variasi mempunyai satu persamaan , iaitu mereka bermula dengan hujah-hujah , diikuti oleh yang anak panah ( =>), diikuti oleh t dia berfungsi b ODY.

Hujah dan badan boleh mengambil pelbagai bentuk. Inilah contoh paling asas:

let mirror = value => value;
// equivalent to:
let mirror = function(value) { return value;};

Contoh di atas mengambil satu argumen "nilai" (sebelum anak panah) dan hanya mengembalikan hujah itu ( => value;). Seperti yang anda lihat , hanya ada nilai pengembalian, jadi tidak perlu kata kunci pengembalian atau bra keriting untuk menutup badan fungsi.

Oleh kerana hanya ada satu argumen , tidak perlu tanda kurung “()” juga.

Berikut adalah contoh dengan lebih daripada satu hujah untuk membantu anda memahami perkara ini:

let add = (no1, no2) => no1 + no2;
// equivalent to:
let add = function(no1, no2) { return no1 + no2;};

Sekiranya tidak ada hujah sama sekali, anda mesti memasukkan tanda kurung kosong seperti di bawah:

let getMessage = () => 'Hello World';
// equivalent to:
let getMessage = function() { return 'Hello World';}

Untuk badan fungsi dengan hanya pernyataan pengembalian, pendakap keriting adalah pilihan .

Untuk badan fungsi yang mempunyai lebih dari sekadar pernyataan pengembalian, anda perlu membungkus badan dengan pendakap keriting seperti fungsi tradisional.

Berikut adalah fungsi pengiraan mudah dengan dua operasi - tambah dan tolak. Tubuhnya mesti dibalut dengan pendakap keriting:

let calculate = (no1, no2, operation) => { let result; switch (operation) { case 'add': result = no1 + no2; break; case 'subtract': result = no1 - no2; break; } return result;};

Sekarang bagaimana jika kita mahukan fungsi yang hanya mengembalikan objek? Penyusun akan keliru sama ada pendakap keriting dari objek ( er}) atau pendakap keriting pada badan fungsi.()=>{id: numb

Penyelesaiannya ialah membungkus objek dalam kurungan. Ini caranya:

let getTempItem = number => ({ id: number});
// effectively equivalent to:
let getTempItem = function(number) { return { id: number };};

Let’s have a look at the final example. In this we’ll use filter function on a sample array of numbers to return all numbers greater than 5,000:

// with arrow functionlet result = sampleArray.filter(element => element > 5000);
// without arrow functionlet result = sampleArray.filter(function(element) { return element > 5000;});

We can see how much less code is necessary compared to the traditional functions.

A few things about arrow functions to keep in mind though:

  • They can’t be called with new, can’t be used as constructors (and therefore lack prototype as well)
  • Arrow functions have their own scope, but there’s no ‘this’ of their own.
  • No arguments object is available. You can use rest parameters however.

Since JavaScript treats functions as first-class, arrow functions make writing functional code like lambda expressions and currying much easier.

"Fungsi panah seperti bahan bakar roket untuk ledakan pengaturcaraan fungsional dalam JavaScript." - Eric Elliott

Nah, di sana anda pergi! Mungkin sudah tiba masanya anda mula menggunakan ciri-ciri ini.

Ciri-ciri ES6 seperti ini menghirup udara segar, dan pemaju suka menggunakannya.

Inilah pautan ke catatan saya sebelum ini mengenai pengisytiharan dan penyataan berubah-ubah!

Saya harap ini mendorong anda untuk terus menggunakan ES6 sekiranya anda belum melakukannya!

Damai ✌️️