Rumah > hujung hadapan web > tutorial js > Fungsi pesanan lebih tinggi dalam JavaScript: Panduan Praktikal

Fungsi pesanan lebih tinggi dalam JavaScript: Panduan Praktikal

Jennifer Aniston
Lepaskan: 2025-02-09 09:57:13
asal
191 orang telah melayarinya

Higher-Order Functions in JavaScript: A Practical Guide

Penjelasan terperinci mengenai fungsi lanjutan: Pengaturcaraan fungsional dalam JavaScript

Dalam JavaScript, fungsi pesanan yang lebih tinggi merujuk kepada fungsi yang dapat menerima fungsi lain sebagai parameter atau menggunakan fungsi sebagai nilai pulangan. Ciri ini menjadikan JavaScript sangat sesuai untuk pengaturcaraan berfungsi.

mata teras

    JavaScript dapat mengendalikan fungsi pesanan yang lebih tinggi (menerima fungsi sebagai argumen atau fungsi pulangan), menjadikannya sangat sesuai untuk pengaturcaraan berfungsi. Ini kerana JavaScript merawat fungsi sebagai warga kelas pertama, yang bermaksud mereka mempunyai jenis
  • , boleh digunakan sebagai nilai untuk pembolehubah, dan boleh diluluskan dan dikembalikan seperti pembolehubah rujukan lain. Object
  • fungsi pesanan tinggi JavaScript sering digunakan dalam pembangunan web. Keupayaan untuk lulus fungsi panggil balik adalah penting untuk membolehkan tingkah laku tidak segerak apabila berurusan dengan sumber yang boleh mengembalikan hasil selepas tempoh masa yang tidak menentu.
  • Fungsi Pesanan Advanced Sokongan Kod penggunaan semula kerana mereka boleh menggantikan fungsi sebaris dengan fungsi yang ditakrifkan dan dinamakan secara individu. Ini memberikan kemungkinan untuk pengaturcaraan berfungsi untuk membangunkan fungsi tulen yang tidak mengubah data luaran dan mengembalikan hasil yang sama untuk input yang sama setiap kali.
  • Selain menerima fungsi sebagai parameter, JavaScript juga membolehkan fungsi untuk mengembalikan fungsi lain sebagai hasil. Ini boleh digunakan untuk membuat templat fungsi pesanan tinggi yang mengembalikan fungsi lain, yang kemudiannya boleh ditakrifkan dengan parameter lalai yang berbeza. Ini membantu mengelakkan pertindihan kod dan menyimpan kod sumber ringkas dan mudah dibaca.

JavaScript Treats Functions sebagai warga kelas pertama

Fungsi JavaScript adalah warga kelas pertama, yang bermaksud mereka adalah objek. Mereka mempunyai jenis

, boleh digunakan sebagai nilai untuk pembolehubah, dan boleh diluluskan dan dikembalikan seperti pemboleh ubah rujukan lain. Fungsi warga kelas pertama memberikan kuasa khas JavaScript dan membolehkan kita mendapat manfaat daripada fungsi pesanan yang lebih tinggi. Oleh kerana fungsi adalah objek, JavaScript telah menjadi salah satu bahasa pengaturcaraan yang popular yang menyokong kaedah semulajadi pengaturcaraan berfungsi. Malah, fungsi warganegara kelas pertama begitu asli dalam kaedah JavaScript yang mungkin anda gunakan tanpa disedari. Object

fungsi-fungsi pesanan maju boleh menggunakan fungsi sebagai parameter

Dalam pembangunan web JavaScript, anda mungkin menghadapi fungsi yang menggunakan fungsi panggil balik. Fungsi panggil balik adalah fungsi yang dilaksanakan pada akhir operasi dan dilaksanakan selepas semua operasi lain selesai. Biasanya, kita lulus fungsi ini sebagai parameter terakhir, selepas parameter lain. Ia biasanya ditakrifkan sebagai fungsi tanpa nama. Fungsi panggilan balik bergantung kepada keupayaan JavaScript untuk memproses fungsi pesanan yang lebih tinggi.

JavaScript adalah bahasa tunggal. Ini bermakna hanya satu operasi yang boleh dilakukan pada satu masa. Untuk mengelakkan operasi menyekat satu sama lain atau benang utama sistem (yang boleh menyebabkan kebuntuan), enjin memastikan semua operasi dilakukan secara berurutan. Mereka beratur sepanjang benang tunggal ini sehingga transaksi kod lain berlaku dengan selamat.

dapat lulus fungsi sebagai parameter dan menjalankannya selepas operasi lain fungsi induk selesai adalah penting untuk bahasa yang menyokong fungsi pesanan yang lebih tinggi. Fungsi panggil balik dalam JavaScript membolehkan tingkah laku tak segerak, jadi skrip dapat terus melaksanakan fungsi atau operasi lain sambil menunggu hasilnya.

Keupayaan untuk lulus fungsi panggil balik adalah penting apabila berurusan dengan sumber yang boleh mengembalikan hasil selepas tempoh masa yang tidak menentu.

Corak fungsi lanjutan ini sangat berguna dalam pembangunan web. Skrip boleh menghantar permintaan ke pelayan dan kemudian perlu memproses respons apabila tiba tanpa memahami latensi rangkaian pelayan atau masa pemprosesan.

node.js sering menggunakan fungsi panggil balik untuk menggunakan sumber pelayan dengan berkesan. Kaedah asynchronous ini juga berguna apabila aplikasi menunggu input pengguna sebelum melaksanakan fungsi tersebut.

Contohnya: Lulus Fungsi Alert ke Element Event Listener

Pertimbangkan coretan kod JavaScript mudah ini yang menambah pendengar acara ke butang:

Skrip ini menggunakan fungsi inline tanpa nama untuk memaparkan makluman. Walau bagaimanapun, ia juga boleh digunakan dengan mudah untuk menggunakan fungsi yang ditakrifkan secara berasingan dan lulus fungsi yang dinamakan dengan kaedah
document.getElementById("clicker").addEventListener("click", function() {
  alert("you triggered " + this.id);
});
Salin selepas log masuk
Salin selepas log masuk
:

addEventListener

Dengan melakukan ini, kita bukan sahaja menunjukkan fungsi pesanan yang lebih tinggi, tetapi juga menjadikan kod kami lebih mudah dibaca dan kukuh, dan memisahkan ciri-ciri untuk tugas yang berbeza (mendengar klik dan mengingatkan pengguna).
var proveIt = function() {
  alert("you triggered " + this.id);
};

document.getElementById("clicker").addEventListener("click", proveIt);
Salin selepas log masuk
Salin selepas log masuk

bagaimana untuk menyokong kebolehgunaan semula kod fungsi lebih tinggi

fungsi

kami berstruktur bebas daripada kod sekitarnya, sentiasa mengembalikan ID elemen pencetus. Kaedah reka bentuk fungsi ini adalah teras pengaturcaraan berfungsi. Kod ini boleh wujud dalam mana -mana konteks di mana anda menggunakan ID Element untuk memaparkan amaran dan boleh dipanggil dengan mana -mana pendengar acara.

proveIt() Keupayaan untuk menggantikan fungsi sebaris dengan fungsi yang ditakrifkan dan dinamakan secara individu membuka dunia kemungkinan. Dalam pengaturcaraan berfungsi, kami cuba membangunkan fungsi tulen yang tidak mengubah data luaran dan mengembalikan hasil yang sama untuk input yang sama setiap kali.

Sekarang kami mempunyai salah satu alat asas untuk membantu kami membangunkan perpustakaan fungsi kecil, sasaran dan maju yang boleh anda gunakan secara umum dalam sebarang permohonan.

NOTA: Fungsi pemindahan dan fungsi pemindahan objek

Perhatikan bahawa kami lulus

bukan

ke fungsi proveIt kami. Apabila anda lulus fungsi dengan nama tanpa kurungan, anda melewati objek fungsi itu sendiri. Apabila anda lulus dalam kurungan, anda lulus hasil melaksanakan fungsi tersebut. proveIt() addEventListener

mengembalikan fungsi sebagai hasil menggunakan fungsi pesanan yang lebih tinggi

Di samping mengambil fungsi sebagai parameter, JavaScript juga membolehkan fungsi mengembalikan fungsi lain sebagai hasil. Ini masuk akal kerana fungsi hanya objek. Objek (termasuk fungsi) boleh ditakrifkan sebagai nilai pulangan fungsi, seperti rentetan, array, atau nilai lain.

Tetapi apakah maksudnya untuk mengembalikan fungsi sebagai hasilnya?

Fungsi adalah cara yang kuat untuk menguraikan masalah dan membuat coretan kod yang boleh diguna semula. Apabila kita menentukan fungsi sebagai nilai pulangan fungsi pesanan yang lebih tinggi, ia boleh berfungsi sebagai templat untuk fungsi baru!

Ini membuka pintu kepada dunia ajaib yang lain dari JavaScript berfungsi.

Katakan anda telah membaca terlalu banyak artikel mengenai milenium dan bosan dengannya. Anda membuat keputusan untuk menggantikannya dengan frasa "Snake Man" setiap kali perkataan "milenium" muncul.

dorongan anda mungkin hanya menulis fungsi yang melaksanakan penggantian teks untuk sebarang teks yang diserahkan kepadanya:

document.getElementById("clicker").addEventListener("click", function() {
  alert("you triggered " + this.id);
});
Salin selepas log masuk
Salin selepas log masuk

ini berfungsi, tetapi sangat spesifik untuk keadaan ini. Mungkin kesabaran anda juga lebih daripada artikel mengenai boomer bayi. Anda juga mungkin mahu membuat fungsi tersuai untuk mereka.

Walau bagaimanapun, walaupun untuk fungsi yang mudah, anda tidak mahu mengulangi kod yang anda tulis apabila anda boleh memulakan dengan fungsi pesanan yang lebih tinggi.

var proveIt = function() {
  alert("you triggered " + this.id);
};

document.getElementById("clicker").addEventListener("click", proveIt);
Salin selepas log masuk
Salin selepas log masuk
Tetapi bagaimana jika anda memutuskan anda ingin melakukan operasi yang lebih mewah untuk memelihara kes dalam rentetan asal? Anda perlu mengubah suai kedua -dua fungsi baru ini untuk melakukan ini.

Ini adalah rumit, ia menjadikan kod anda lebih rapuh dan lebih sukar untuk dibaca. Dalam kes ini, kita boleh menggunakan fungsi pesanan lebih tinggi sebagai penyelesaian.

Membina Template Fungsi Pesanan Tinggi

Apa yang anda mahukan adalah fleksibiliti untuk dapat menggantikan apa -apa istilah dengan istilah lain dan menentukan tingkah laku dalam fungsi templat yang anda boleh membina fungsi tersuai baru.

JavaScript menyediakan cara untuk menjadikan keadaan ini lebih mudah dengan memberikan fungsi sebagai nilai pulangan:

var snakify = function(text) {
  return text.replace(/millennials/ig, "Snake People");
};
console.log(snakify("The Millenials are always up to something."));
// The Snake People are always up to something.
Salin selepas log masuk
Apa yang kita lakukan ialah mengasingkan kod yang melakukan kerja sebenar menjadi fungsi yang boleh diperolehi. Ia merangkumi semua kerja yang diperlukan untuk mengubah suai sebarang rentetan input menggunakan frasa asal sebagai nilai awal dan menggunakan beberapa output sikap untuk menggantikan frasa. attitude Apabila kita mentakrifkan fungsi baru ini sebagai rujukan kepada fungsi pesanan yang lebih tinggi

, pra-dipenuhi dengan dua parameter pertama yang diterima, apa yang kita dapat? Ia membolehkan fungsi baru untuk mengambil apa -apa teks yang anda lalui dan menggunakan parameter itu dalam fungsi pulangan yang kami tentukan sebagai output fungsi attitude. attitude

Fungsi JavaScript tidak peduli dengan bilangan argumen yang anda lalui kepada mereka. Jika parameter kedua hilang, ia akan memperlakukannya sebagai tidak jelas. Ia sama apabila kita memilih untuk tidak menyediakan parameter ketiga atau bilangan parameter tambahan.

Di samping itu, anda boleh lulus dalam parameter tambahan ini kemudian. Anda boleh melakukan ini apabila menentukan fungsi pesanan yang lebih tinggi untuk dipanggil, seperti yang ditunjukkan.

hanya menentukannya sebagai rujukan kepada fungsi yang dikembalikan oleh fungsi pesanan yang lebih tinggi, dengan satu atau lebih parameter yang tidak ditentukan.

semaknya beberapa kali jika anda memerlukannya supaya anda memahami sepenuhnya apa yang sedang berlaku.

Kami membuat templat fungsi pesanan yang lebih tinggi yang mengembalikan fungsi lain. Kami kemudian menentukan fungsi yang baru dikembalikan (tolak satu harta) sebagai pelaksanaan khusus fungsi templat.

Semua fungsi yang dibuat dengan cara ini akan mewarisi kod kerja dari fungsi pesanan yang lebih tinggi. Walau bagaimanapun, anda boleh mendefinisikannya dengan parameter lalai yang berbeza.

anda sudah menggunakan fungsi pesanan yang lebih tinggi

Fungsi pesanan tinggi sangat asas untuk JavaScript yang sudah anda gunakan. Setiap kali anda lulus fungsi tanpa nama atau fungsi panggil balik, anda sebenarnya mengambil nilai yang dikembalikan oleh fungsi lulus dan menggunakannya sebagai parameter ke fungsi lain (contohnya, menggunakan fungsi anak panah).

pemaju telah menjadi akrab dengan fungsi lanjutan yang sangat awal dalam pembelajaran JavaScript. Ia begitu wujud dalam reka bentuk JavaScript bahawa keperluan untuk mempelajari konsep memandu fungsi anak panah atau fungsi panggil balik mungkin tidak muncul sehingga kemudian.

Keupayaan untuk menetapkan fungsi untuk mengembalikan fungsi lain memanjangkan kemudahan JavaScript. Fungsi pesanan lanjutan membolehkan kami membuat fungsi bernama tersuai untuk melaksanakan tugas khusus untuk kod templat dikongsi dari fungsi pesanan pertama.

Setiap fungsi ini boleh mewarisi apa-apa penambahbaikan yang dibuat untuk fungsi pesanan yang lebih tinggi kemudian. Ini membantu kami mengelakkan duplikasi kod dan menyimpan kod sumber kami ringkas dan mudah dibaca.

Jika anda memastikan fungsi anda adalah fungsi tulen (mereka tidak mengubah nilai luaran dan sentiasa mengembalikan nilai yang sama untuk sebarang input yang diberikan), anda boleh membuat ujian untuk mengesahkan bahawa kod berubah apabila mengemas kini fungsi pesanan pertama. Akan merosakkan apa -apa.

Kesimpulan

Sekarang anda tahu bagaimana fungsi pesanan lebih tinggi berfungsi, anda boleh mula berfikir tentang bagaimana untuk memanfaatkan konsep ini dalam projek anda sendiri.

Salah satu kelebihan besar JavaScript ialah anda boleh mencampur teknik fungsional dengan kod yang sudah anda kenal.

Cuba beberapa eksperimen. Walaupun anda menggunakannya di tempat pertama untuk menggunakan fungsi pesanan yang lebih tinggi, anda akan dengan cepat menjadi akrab dengan fleksibiliti tambahan yang mereka berikan. Sekarang menggunakan fungsi pesanan tinggi untuk beberapa kerja dapat meningkatkan kod anda untuk tahun-tahun akan datang.

Soalan Lazim Mengenai Fungsi Lanjutan dalam JavaScript

  • Apakah fungsi pesanan yang lebih tinggi dalam JavaScript? Fungsi pesanan tinggi adalah fungsi yang boleh mengambil fungsi lain sebagai parameter atau mengembalikannya sebagai hasil. Dalam JavaScript, fungsi adalah warga kelas pertama, yang membolehkan mereka diproses seperti mana-mana jenis data lain.

  • Bolehkah anda memberikan contoh fungsi pesanan tinggi dalam JavaScript? Contoh fungsi pesanan tinggi termasuk , map, dan filter. Fungsi -fungsi ini menentukan tingkah laku mereka sebagai parameter, membolehkan kod ringkas dan ekspresif apabila memproses tatasusunan. reduce

  • Bagaimanakah fungsi peta berfungsi sebagai fungsi pesanan yang lebih tinggi? Fungsi menggunakan fungsi yang diberikan kepada setiap elemen array dan mengembalikan array baru yang mengandungi hasilnya. Sebagai contoh, map akan menggunakan fungsi array.map(square) untuk setiap elemen dalam array. square

  • Apakah tujuan fungsi penapis sebagai fungsi pesanan yang lebih tinggi? Fungsi filter mencipta array baru yang mengandungi hanya elemen yang memenuhi syarat yang ditentukan, yang ditakrifkan oleh fungsi yang disediakan sebagai parameter. Ia berguna untuk mengekstrak elemen secara selektif dari array.

  • Bagaimanakah fungsi mengurangkan berfungsi sebagai fungsi pesanan yang lebih tinggi? Fungsi reduce Gunakan fungsi yang disediakan untuk menentukan logik pengurangan, unsur -unsur yang terkumpul dari array ke dalam satu nilai. Ia menerima nilai awal dan fungsi yang menentukan bagaimana elemen digabungkan.

Sambutan yang disemak ini mengekalkan makna asal sementara dengan ketara menyusun semula teks, menjadikannya lebih ringkas dan semulajadi.

Atas ialah kandungan terperinci Fungsi pesanan lebih tinggi dalam JavaScript: Panduan Praktikal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan