Pengantar Fungsi Orde Tinggi di JavaScript

Menurut definisi, fungsi urutan yang lebih tinggi adalah fungsi yang, setidaknya, menerima satu atau lebih fungsi lain sebagai argumen atau mengembalikan fungsi lain sebagai hasilnya. Dalam tutorial ini kami akan fokus pada fungsi perpustakaan standar sebagai filter, peta dan mengurangi: kita akan melihat kapan mereka bisa berguna dan bagaimana menggunakannya.

Dalam tutorial ini Anda akan belajar:

• Apa fungsi urutan yang lebih tinggi.
• Mengapa kita dapat menggunakan fungsi pesanan lebih tinggi di JavaScript.
• Bagaimana dan kapan menggunakan filter, memetakan dan mengurangi fungsi.

Apa fungsi urutan yang lebih tinggi ?

Dalam fungsi JavaScript objek kelas satu: Mereka dapat ditugaskan ke variabel, disahkan sebagai argumen ke fungsi lain, atau dikembalikan oleh fungsi lain. Penggunaan fungsi tingkat tinggi didasarkan pada kekhasan ini. Kami mendefinisikan fungsi urutan yang lebih tinggi sebagai fungsi yang setidaknya menerima fungsi lain sebagai argumennya, atau mengembalikan fungsi lain sebagai hasilnya. Dalam tutorial ini kami akan fokus pada fungsi perpustakaan standar sebagai Saring, peta Dan mengurangi.

Dalam tutorial ini, kami akan memanfaatkan fungsi panah: Jika Anda ingin tahu lebih banyak tentang sintaks fungsi baru ini, Anda dapat memeriksa tutorial yang kami terbitkan tentang subjek ini.

Filter atau Himpunan.prototipe.Saring

Fungsi pertama yang akan kita bicarakan adalah Saring, atau, untuk menggunakan nama lengkapnya, Himpunan.prototipe.Saring. Fungsi ini sebenarnya adalah metode dari Himpunan objek, dan apa yang dilakukannya sangat sederhana: ia mengembalikan array baru yang disusun oleh elemen -elemen array asli yang lulus tes yang diterapkan dalam tubuhnya.

Untuk lebih jelasnya, mari kita lihat contohnya. Misalkan kita memiliki serangkaian kata dan kami ingin "memfilter" kata -kata yang disusun oleh tepat tiga huruf. Kita bisa mendapatkan apa yang kita inginkan dengan menggunakan a untuk Loop, menulis:

Const Words = ["House", "Pen", "Book", "Computer", "Car"]; Const Shortwords = []; // kita bisa menggunakan c-style standar untuk loop ... untuk (biarkan i = 0; i < words.length; i++)  if (words[i].length == 3)  shortWords.push(words[i])   //… or a for… of loop for (let word of words)  if (word.length == 3)  shortWords.push(word);   

Kedua contoh di atas pekerjaan, dan dengan keduanya kami mencapai hasil yang sama. Setelah kode dieksekusi, array "kata pendek" akan memiliki dua anggota: "pena" dan "mobil". Anda mungkin memperhatikan, bagaimanapun, bahwa terutama contoh pertama adalah verbose yang cukup. Mari kita lihat bagaimana kita dapat mencapai hasil yang sama dengan lebih sedikit kode, dengan menggunakan Saring:

kata pendek const = kata -kata.filter ((elemen) => elemen.panjang == 3);

Kami memperoleh hasil yang sama persis. Namun, ada satu perbedaan: kali ini, dengan juga menggunakan anak panah fungsi, kami menulis semua hanya dalam satu baris kode!. Begini caranya Saring Bekerja: ia hanya menerima satu argumen "wajib" yang merupakan fungsi lain, panggilan balik.

Panggilan balik ini, menerima, pada gilirannya, satu argumen yang merupakan elemen dari array asli yang sedang diproses. Jika elemen lulus tes (dalam hal ini jika panjang string sama dengan 3), elemen dimasukkan ke dalam array baru.

Peta atau Himpunan.prototipe.peta

Itu peta (Himpunan.prototipe.peta) metode, melakukan sesuatu yang berbeda. Ini juga menerima fungsi panggilan balik sebagai satu -satunya argumen wajib, tetapi mengembalikan array baru yang disusun oleh elemen yang dihasilkan dari penerapan panggilan balik tersebut ke semua elemen dari array asli.

Contoh akan mengklarifikasi segalanya. Kali ini, misalkan kita ingin mendapatkan array yang harus berisi semua senar di dalam array "kata", tetapi dalam bentuk kasus atas. Hanya dalam satu baris, kita bisa menulis:

const uppercasedwords = kata -kata.peta ((elemen) => elemen.Touppercase ());

Setelah menjalankan kode di atas, array "Uppercasedwords" adalah:

['House', 'Pen', 'Book', 'Computer', 'Car']

Panggilan balik diterima sebagai argumen oleh peta, hanya memiliki satu argumen wajib, yang merupakan elemen dari array asli yang sedang diproses. Nilai yang dihasilkan dari menerapkan panggilan balik ke setiap elemen dari array asli dikembalikan (ingat: Panah berfungsi tanpa kawat gigi keriting menggunakan pengembalian implisit) dan ditambahkan ke array baru. Hasilnya, dalam hal ini, adalah array baru yang disusun oleh versi atas semua elemen dalam yang asli.

Kurangi atau Himpunan.prototipe.mengurangi

Itu mengurangi, atau Himpunan.prototipe.mengurangi Metode bekerja dengan cara yang berbeda: ia menerima panggilan balik yang mengambil dua argumen wajib. Yang pertama adalah yang disebut aki, dan yang kedua adalah nilai sekarang. Alih -alih memproduksi array baru, fungsi pesanan lebih tinggi ini menggunakan panggilan balik yang disediakan, juga disebut peredam, ke mengurangi array ke satu nilai tunggal, yang dikembalikan. Ini sebenarnya lebih sederhana dari yang terlihat, mari kita lihat contoh dasar.

Misalkan kita memiliki array yang berisi beberapa angka:

angka const = [15, 0.50, 200];

Sekarang, bayangkan kita ingin mendapatkan jumlah dari semua angka yang terkandung dalam array. Sekali lagi, kita bisa menggunakan loop, atau, seperti yang ingin kita tunjukkan, mengurangi, dengan cara berikut:

Biarkan TotalPrice = Angka.redukir ((akumulator, currentValue) => akumulator + currentValue);

Itu mengurangi Metode, seperti yang dikatakan di atas, menerima fungsi panggilan balik yang mengambil dua argumen wajib. Yang pertama adalah aki: Argumen ini akan mengakumulasi hasil yang dihasilkan setiap kali fungsi panggilan balik disebut. Yang kedua adalah nilai sekarang, yang mewakili elemen saat ini dari array asli yang sedang diproses.

Satu hal penting untuk diperhatikan, adalah bahwa, jika tidak ada yang ditentukan sebaliknya (kita akan melihat pada saat bagaimana kita bisa melakukannya), pertama kali fungsi panggilan balik dipanggil, nilai akumulator akan menjadi elemen pertama dari array. Kita dapat menyadari bahwa hanya dengan mencatat nilai aki dan dari nilai sekarang, Setiap kali panggilan balik dieksekusi:

Biarkan TotalPrice = Angka.redukir ((akumulator, currentValue) => konsol.Log (akumulator, CurrentValue); Return Accumulator + CurrentValue; ); 

Output kode di atas adalah:

15 0.5 15.5 200 

Seperti yang Anda perhatikan, jika nilai awal untuk aki tidak secara eksplisit disediakan, elemen pertama dari array digunakan (15), dan, hal yang sangat penting, indeks elemen pertama yang diproses oleh array, adalah1, Jadi, dalam hal ini elemen pertama yang diproses adalah 0.5 (yang kedua).

Jika Anda memikirkannya, ini masuk akal: jika tidak, elemen pertama dari array akan dihitung dua kali! (Mungkin perlu diperhatikan bahwa kita dapat menentukan secara manual indeks elemen pertama dari array yang akan diproses, dengan menggunakan CurrentIndex argumen opsional dari panggilan balik, menyediakannya setelahnya nilai sekarang). Seperti yang diharapkan, nilai akhir total harga akan 215.5:

Total Price 215.5 

Dalam contoh di atas, elemen dari array asli, "angka", adalah angka sederhana, jadi tipe utama dalam JavaScript. Bagaimana jika mereka adalah objek? Misalkan kita memiliki array objek, masing -masing memiliki tiga properti: nama, harga, dan mata uang harga:

const items = [name: 'book', harga: 15, mata uang: 'eur', name: 'car', harga: 15000, mata uang: 'eur', name: 'laptop', harga: 1200 , mata uang: 'EUR']; 

Yang ingin kami peroleh di sini, adalah jumlah dari semua harga barang. Masalah segera muncul: kami tidak ingin meringkas setiap item dari array secara langsung, karena dalam hal ini kami bekerja dengan objek, tetapi harga properti masing -masing. Karena itu kita harus menggunakan parameter opsional yang diterima oleh mengurangi, yang nilai inisial:

Biarkan finalPrice = item.Kurangi ((akumulator, currentValue) => Accumulator + CurrentValue.Harga, 0)

Itu Final Price Kami memperoleh, seperti yang diharapkan, adalah 16215. Jika kami belum menentukan nilai inisial, menyediakannya setelah fungsi panggilan balik (0), elemen pertama dari array "item" akan digunakan sebagai nilai awal untuk aki. Karena ini adalah objek, hasilnya tidak akan seperti yang diharapkan!

Kesimpulan

Dalam tutorial ini kami belajar untuk mengetahui apa yang mendefinisikan fungsi urutan yang lebih tinggi, dan mengapa mungkin menggunakannya dalam javascript. Kami juga belajar untuk mengetahui dan menggunakan tiga fungsi tingkat tinggi yang terkandung dalam pustaka JavaScript standar, seperti Saring, peta Dan mengurangi. Jika Anda tertarik dengan topik JavaScript lainnya, Anda dapat memeriksa tutorial kami tentang janji atau fungsi panah.

Tutorial Linux Terkait:

• Pengantar Otomatisasi Linux, Alat dan Teknik
• Menguasai loop skrip bash
• Hal -hal yang harus diinstal pada ubuntu 20.04
• Mint 20: Lebih baik dari Ubuntu dan Microsoft Windows?
• Hal -hal yang harus dilakukan setelah menginstal ubuntu 20.04 FOSSA FOSSA Linux
• Loop bersarang dalam skrip bash
• Seberapa sering Anda harus me -reboot server linux Anda?
• Tutorial debugging GDB untuk pemula
• Menangani input pengguna dalam skrip bash
• Cara Dual Boot Kali Linux dan Windows 10