Pengenalan kepada fungsi pesanan yang lebih tinggi dalam JavaScript

Secara definisi, fungsi pesanan yang lebih tinggi adalah fungsi yang, sekurang -kurangnya, menerima satu atau lebih fungsi lain sebagai argumen atau mengembalikan fungsi lain sebagai hasilnya. Dalam tutorial ini, kita akan memberi tumpuan kepada fungsi perpustakaan standard sebagai penapis, peta dan mengurangkan: kita akan melihat bila mereka boleh berguna dan cara menggunakannya.

Dalam tutorial ini anda akan belajar:

• Apakah fungsi pesanan yang lebih tinggi.
• Mengapa kita boleh menggunakan fungsi pesanan yang lebih tinggi di JavaScript.
• Bagaimana dan bila menggunakan penapis, peta dan mengurangkan fungsi.

Apakah fungsi pesanan yang lebih tinggi ?

Dalam fungsi JavaScript adalah Objek Kelas Pertama: Mereka boleh diberikan kepada pembolehubah, diluluskan sebagai hujah ke fungsi lain, atau dikembalikan oleh fungsi lain. Penggunaan fungsi pesanan yang lebih tinggi berdasarkan keunikan ini. Kami menentukan fungsi pesanan yang lebih tinggi sebagai fungsi yang sekurang -kurangnya menerima fungsi lain sebagai hujahnya, atau mengembalikan fungsi lain sebagai hasilnya. Dalam tutorial ini, kita akan memberi tumpuan kepada fungsi perpustakaan standard sebagai penapis, peta dan mengurangkan.

Dalam tutorial ini, kami akan menggunakan Fungsi anak panah: Sekiranya anda ingin mengetahui lebih lanjut mengenai sintaks fungsi baru ini, anda boleh menyemak tutorial ini yang kami diterbitkan mengenai subjek.

Penapis atau array.prototaip.penapis

Fungsi pertama yang akan kita bicarakan adalah penapis, atau, untuk menggunakan nama lengkapnya, array.prototaip.penapis. Fungsi ini sebenarnya merupakan kaedah array objek, dan apa yang sangat mudah: ia mengembalikan array baru yang disusun oleh unsur -unsur array asal yang lulus ujian yang dilaksanakan di dalam badannya.

Untuk menjadi jelas, mari kita lihat contoh. Katakan kami mempunyai pelbagai perkataan dan kami ingin "menapis" kata -kata yang disusun dengan tepat tiga huruf. Kita dapat memperoleh apa yang kita mahukan dengan menggunakan a untuk gelung, menulis:

const words = ["rumah", "pen", "buku", "komputer", "kereta"]; const shortwords = []; // kita boleh menggunakan gaya C standard untuk gelung ... 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 -dua contoh di atas berfungsi, dan dengan kedua -duanya mencapai hasil yang sama. Selepas kod dilaksanakan, array "shortwords" akan mempunyai dua ahli: "pen" dan "kereta". Walau bagaimanapun, anda mungkin dapati bahawa terutamanya contoh pertama yang agak jelas. Mari kita lihat bagaimana kita dapat mencapai hasil yang sama dengan kurang kod, dengan menggunakan penapis:

shortwords const = perkataan.penapis ((elemen) => elemen.panjang == 3);

Kami memperoleh hasil yang sama. Walau bagaimanapun, ada satu perbezaan: kali ini, juga dengan menggunakan anak panah fungsi, kami menulis semua hanya dalam satu baris kod!. Inilah caranya penapis Kerja: Ia hanya menerima satu hujah "wajib" yang merupakan fungsi lain, panggilan balik.

Panggilan balik ini, menerima, satu hujah yang merupakan elemen array asal yang sedang diproses. Sekiranya elemen melepasi ujian (dalam kes ini jika panjang rentetan sama dengan 3), elemen dimasukkan ke dalam array baru.

Peta atau array.prototaip.peta

The peta (array.prototaip.peta) kaedah, melakukan sesuatu yang berbeza. Ia juga menerima fungsi panggil balik sebagai satu -satunya hujah wajib, tetapi mengembalikan array baru yang disusun oleh unsur.

Contohnya akan menjelaskan semuanya. Kali ini, katakan kita ingin mendapatkan array yang harus mengandungi semua rentetan di dalam array "kata", tetapi dalam bentuk atas. Hanya dalam satu baris, kita boleh menulis:

const uppercasedwords = perkataan.peta ((elemen) => elemen.touppercase ());

Selepas melaksanakan kod di atas, array "Uppercasedwords" akan menjadi:

['Rumah', 'pen', 'buku', 'komputer', 'kereta']

Panggilan balik diterima sebagai hujah oleh peta, hanya mempunyai satu hujah wajib, yang merupakan unsur array asal yang sedang diproses. Nilai yang terhasil daripada memohon panggilan balik ke setiap elemen array asal dikembalikan (ingat: anak panah berfungsi tanpa pendakap keriting menggunakan pulangan tersirat) dan ditambah kepada array baru. Hasilnya, dalam kes ini, adalah array baru yang disusun oleh versi atas kes semua elemen yang asal.

Mengurangkan atau array.prototaip.mengurangkan

The mengurangkan, atau array.prototaip.mengurangkan Kaedah berfungsi dengan cara yang berbeza: ia menerima panggilan balik yang memerlukan dua hujah wajib. Yang pertama adalah yang dipanggil akumulator, dan yang kedua adalah nilai semasa. Daripada menghasilkan array baru, fungsi pesanan yang lebih tinggi ini menggunakan panggilan balik yang disediakan, juga dipanggil pengurangan, ke mengurangkan array ke satu nilai tunggal, yang dikembalikan. Sebenarnya lebih mudah daripada yang kelihatan, mari kita lihat contoh asas.

Katakan kita mempunyai array yang mengandungi beberapa nombor:

nombor const = [15, 0.50, 200];

Sekarang, bayangkan kita mahu mendapatkan jumlah semua nombor yang terkandung dalam array. Sekali lagi, kita boleh menggunakan gelung, atau, seperti yang kita mahu tunjukkan, mengurangkan, Dengan cara berikut:

Biarkan TotalPrice = Nombor.mengurangkan ((akumulator, currentValue) => akumulator + currentValue);

The mengurangkan kaedah, seperti yang dinyatakan di atas, menerima fungsi panggil balik yang memerlukan dua hujah wajib. Yang pertama adalah akumulator: hujah ini akan mengumpulkan hasil yang dihasilkan setiap kali fungsi panggil balik dipanggil. Yang kedua adalah nilai semasa, yang mewakili elemen semasa array asal yang sedang diproses.

Satu perkara penting untuk diperhatikan, ialah, jika tidak dinyatakan sebaliknya (kita akan melihat dalam seketika bagaimana kita boleh melakukannya), kali pertama fungsi panggil balik dipanggil, nilai penumpuk akan menjadi elemen pertama dari array. Kita dapat menyedari bahawa dengan hanya melayari nilai akumulator dan dari nilai semasa, Setiap kali panggilan balik dilaksanakan:

Biarkan TotalPrice = Nombor.Kurangkan ((penumpuk, CurrentValue) => Konsol.log (akumulator, currentValue); Kembali penumpuk + CurrentValue; ); 

Output kod di atas akan menjadi:

15 0.5 15.5 200 

Seperti yang anda perhatikan, jika nilai awal untuk akumulator tidak disediakan secara eksplisit, elemen pertama array digunakan (15), dan, perkara yang sangat penting, indeks elemen pertama yang diproses oleh array, adalah1, Oleh itu, dalam hal ini elemen pertama yang akan diproses adalah 0.5 (yang kedua).

Sekiranya anda memikirkannya, ini masuk akal: jika tidak, elemen pertama array akan dikira dua kali! (Mungkin patut diperhatikan bahawa kita dapat menetapkan secara manual indeks unsur pertama array yang akan diproses, dengan menggunakan CurrentIndex Hujah pilihan panggilan balik, memberikannya selepas nilai semasa). Seperti yang dijangkakan, nilai akhir dari harga keseluruhan akan jadi 215.5:

TotalPrice 215.5 

Dalam contoh di atas, unsur -unsur array asal, "nombor", adalah nombor mudah, jadi Jenis utama Dalam JavaScript. Bagaimana jika mereka menjadi objek? Katakan kita mempunyai pelbagai objek, masing -masing mempunyai tiga sifat: nama, harga, dan harga mata wang:

const item = [name: 'book', price: 15, currency: 'eur', name: 'car', price: 15000, currency: 'eur', name: 'riba', price: 1200 , Mata Wang: 'Eur']; 

Apa yang ingin kita perolehi di sini, adalah jumlah semua harga item. Masalah segera timbul: Kami tidak mahu menyimpulkan setiap item array secara langsung, kerana dalam hal ini kita bekerja dengan objek, tetapi harga harta masing -masing. Oleh itu, kita harus menggunakan parameter pilihan yang diterima oleh mengurangkan, iaitu InitialValue:

Biarkan FinalPrice = Item.Kurangkan ((akumulator, CurrentValue) => penumpuk + CurrentValue.harga, 0)

The FinalPrice Kami memperoleh, seperti yang dijangkakan, adalah 16215. Sekiranya kita belum menentukan InitialValue, Menyediakannya selepas fungsi panggil balik (0), elemen pertama pelbagai "item" akan digunakan sebagai nilai permulaan untuk akumulator. Oleh kerana ini adalah objek, hasilnya tidak seperti yang diharapkan!

Kesimpulan

Dalam tutorial ini, kami belajar mengetahui apa yang mentakrifkan fungsi pesanan yang lebih tinggi, dan mengapa mungkin menggunakannya dalam JavaScript. Kami juga belajar untuk mengetahui dan menggunakan tiga fungsi pesanan yang lebih tinggi yang terkandung dalam perpustakaan JavaScript standard, seperti penapis, peta dan mengurangkan. Sekiranya anda berminat dengan topik JavaScript lain, anda boleh menyemak tutorial kami mengenai janji atau fungsi anak panah.

Tutorial Linux Berkaitan:

• Pengenalan kepada Automasi, Alat dan Teknik Linux
• Menguasai Gelung Skrip Bash
• Perkara yang hendak dipasang di Ubuntu 20.04
• Mint 20: Lebih baik daripada Ubuntu dan Microsoft Windows?
• Perkara yang perlu dilakukan setelah memasang ubuntu 20.04 Focal Fossa Linux
• Gelung bersarang dalam skrip bash
• Berapa kerap anda perlu reboot pelayan Linux anda?
• Tutorial Debugging GDB untuk Pemula
• Mengendalikan input pengguna dalam skrip bash
• Cara Dual Boot Kali Linux dan Windows 10