Penapisan dan Chaining dalam JavaScript berfungsi

Vicabulary of JavaScript: Pengaturcaraan Berorientasikan Objek, Imperatif dan Fungsi

Kuasa JavaScript adalah fleksibiliti, yang menyokong pengaturcaraan berorientasikan objek, pengaturcaraan penting, dan pengaturcaraan berfungsi. Pemaju secara fleksibel boleh menukar paradigma pengaturcaraan mengikut keperluan projek dan keutamaan pasukan.

ES5 memperkenalkan kaedah array asli seperti

, map dan reduce, yang sangat memudahkan pengaturcaraan berfungsi. Antaranya, kaedah filter boleh meleleh melalui setiap elemen dalam array dan menentukan sama ada untuk menambahkannya ke array baru berdasarkan keadaan ujian yang ditentukan. filter

memudahkan kod menggunakan kaedah filter Kaedah

menjadikan kod lebih ringkas dan jelas. Ia melelehkan setiap elemen dalam array dan menggunakan fungsi ujian. Jika fungsi ujian kembali filter, elemen akan dimasukkan ke dalam array baru yang dikembalikan oleh kaedah true. filter Kaedah

berfungsi bersempena dengan dua kaedah pelbagai fungsi ES5, filter dan map, dan boleh digunakan dalam kombinasi untuk membuat kod ringkas dan cekap sambil mengekalkan array asal tidak berubah. reduce

Walaupun kaedah

mungkin sedikit lebih perlahan daripada gelung filter, kesederhanaan kodnya dan kelebihan pemeliharaan menjadikannya amalan yang disyorkan. Dengan pengoptimuman enjin JavaScript, prestasinya dijangka bertambah baik. for

Artikel ini dikaji semula oleh Dan Prince, Vildan Softic dan Joan Yinn. Terima kasih kepada semua pengulas rakan sebaya untuk mendapatkan kandungan SitePoint dengan sebaik -baiknya!

Salah satu sebab saya suka JavaScript adalah fleksibiliti. Ia membolehkan anda menggunakan pengaturcaraan berorientasikan objek, pengaturcaraan penting, dan juga pengaturcaraan berfungsi, dan boleh beralih di antara mereka berdasarkan keperluan semasa dan keutamaan pasukan anda.

Walaupun JavaScript menyokong teknologi fungsional, ia tidak dioptimumkan untuk pengaturcaraan fungsional murni seperti Haskell atau Scala. Walaupun saya biasanya tidak membina program JavaScript saya menjadi 100% berfungsi, saya suka menggunakan konsep pengaturcaraan berfungsi untuk membantu saya mengekalkan kesederhanaan kod saya dan memberi tumpuan kepada reka bentuk kod yang mudah digunakan semula dan diuji.

Dataset penapis menggunakan

kaedah filter

Kemunculan ES5 menjadikan susunan JavaScript mewarisi beberapa kaedah yang menjadikan pengaturcaraan berfungsi lebih mudah. Arus JavaScript kini boleh dipetakan, dikawal selia, dan ditapis secara asli. Setiap kaedah melintasi setiap item dalam array, melakukan analisis tanpa gelung atau perubahan keadaan tempatan, hasil yang kembali yang boleh digunakan dengan serta -merta atau dikendalikan selanjutnya. Dalam artikel ini, saya ingin memperkenalkan anda untuk menapis. Penapisan membolehkan anda menilai setiap item array dan menentukan sama ada untuk mengembalikan array baru yang mengandungi elemen berdasarkan keadaan ujian yang anda lalui. Apabila anda menggunakan kaedah penapis Array, anda akan mendapat array lain yang sama panjang dengan array asal atau lebih pendek, yang mengandungi item subset dalam array asal yang sepadan dengan syarat yang anda tetapkan.

Penapis menggunakan demonstrasi gelung

Contoh masalah mudah yang mungkin mendapat manfaat daripada penapisan adalah untuk mengehadkan tatasusunan rentetan dengan hanya tiga aksara. Ini bukan masalah yang rumit, kita dapat menyelesaikannya dengan mudah menggunakan JavaScript biasa untuk gelung dan tanpa menggunakan kaedah penapis. Ia mungkin kelihatan seperti ini:

var animals = ["cat","dog","fish"];
var threeLetterAnimals = [];
for (let count = 0; count < animals.length; count++) {
  if (animals[count].length === 3) {
    threeLetterAnimals.push(animals[count]);
  }
}
console.log(threeLetterAnimals); // ["cat", "dog"]

Apa yang kita lakukan di sini ialah menentukan array yang mengandungi tiga rentetan dan membuat array kosong di mana kita boleh menyimpan hanya tiga aksara rentetan. Kami menentukan pemboleh ubah kiraan yang digunakan dalam gelung untuk meleleh melalui array. Setiap kali kita menemui rentetan yang berlaku untuk mempunyai tiga aksara, kita menolaknya ke dalam array kosong baru kita. Setelah selesai, kita hanya perlu merakam hasilnya. Tidak ada yang menghalang kita daripada mengubah suai array asal dalam gelung, tetapi berbuat demikian akan kehilangan nilai asal secara kekal. Ia lebih bersih untuk membuat array baru dan menyimpan array asal tidak berubah.

menggunakan filter kaedah

Kami tidak mempunyai sebarang kesilapan teknikal dalam melakukan ini, tetapi ketersediaan kaedah penapis pada array membolehkan kami membuat kod kami lebih ringkas dan mengarahkan. Berikut adalah contoh bagaimana melakukan perkara yang sama menggunakan kaedah penapis:

var animals = ["cat","dog","fish"];
var threeLetterAnimals = [];
for (let count = 0; count < animals.length; count++) {
  if (animals[count].length === 3) {
    threeLetterAnimals.push(animals[count]);
  }
}
console.log(threeLetterAnimals); // ["cat", "dog"]

seperti dahulu, kita mulakan dengan pembolehubah yang mengandungi array asal, dan kita menentukan pembolehubah baru untuk array yang hanya akan mengandungi rentetan dengan tiga aksara. Tetapi dalam kes ini, apabila kita menentukan array kedua, kita memberikannya terus kepada hasil menggunakan kaedah penapis ke array haiwan asal. Kami lulus fungsi inline tanpa nama untuk menapis yang mengembalikan benar hanya jika panjang nilai operasinya adalah 3. Kaedah penapis berfungsi dengan melelehkan setiap elemen dalam array dan menggunakan fungsi ujian ke elemen tersebut. Jika fungsi ujian kembali benar untuk elemen, array yang dikembalikan oleh kaedah penapis akan mengandungi elemen. Unsur -unsur lain akan dilangkau. Anda dapat melihat betapa ringkasnya kod yang kelihatan. Walaupun anda tidak memahami peranan penapis terlebih dahulu, anda boleh menyemak kod ini dan mengetahui niatnya. Salah satu manfaat pengaturcaraan berfungsi ialah ia mengurangkan bilangan negara tempatan yang akan dikesan dan mengehadkan pengubahsuaian pembolehubah luaran dari dalam fungsi, dengan itu meningkatkan kesederhanaan kod. Dalam kes ini, pembolehubah kiraan dan pelbagai negeri yang kita ambil ketika kita melintasi array asal adalah lebih banyak negeri yang perlu dikesan. Menggunakan penapis, kami telah berjaya menghapuskan gelung serta pembolehubah kiraan. Kami tidak mengubah nilai array baru seberapa banyak kali seperti dahulu. Kami mendefinisikannya hanya sekali dan memberikan nilai yang diperolehi daripada menggunakan keadaan penapis kami ke array asal.

cara lain untuk memformat penapis

Jika kita menggunakan pengisytiharan const dan fungsi anak panah inline tanpa nama, kod kita boleh menjadi lebih ringkas. Ini adalah ciri ECMAScript 6 (ES6) yang disokong secara asli oleh kebanyakan penyemak imbas dan enjin JavaScript sekarang.

var animals = ["cat","dog","fish"];
var threeLetterAnimals = animals.filter(function(animal) {
  return animal.length === 3;
});
console.log(threeLetterAnimals); // ["cat", "dog"]

Walaupun lebih baik untuk melampaui sintaks lama dalam kebanyakan kes melainkan jika anda perlu memadankan kod anda ke pangkalan kod sedia ada, adalah penting untuk memilihnya. Apabila kita menjadi lebih ringkas, setiap baris kod kita menjadi lebih kompleks. Sebahagian daripada apa yang menjadikan JavaScript begitu menarik ialah anda boleh cuba merancang kod yang sama menggunakan banyak cara untuk mengoptimumkan saiz, kecekapan, kejelasan, atau pemeliharaan untuk memenuhi keutamaan pasukan anda. Tetapi ini juga meletakkan beban yang lebih besar pada pasukan, yang memerlukan mewujudkan panduan gaya bersama dan membincangkan kebaikan dan keburukan setiap pilihan. Dalam kes ini, untuk menjadikan kod kami lebih mudah dibaca dan serba boleh, kami mungkin mahu mengambil fungsi anak panah inline tanpa nama di atas dan mengubahnya menjadi fungsi bernama tradisional, dan kemudian lulus fungsi yang dinamakan terus ke penapis dalam kaedah. Kod mungkin kelihatan seperti ini:

const animals = ["cat","dog","fish"];
const threeLetterAnimals = animals.filter(item => item.length === 3);
console.log(threeLetterAnimals); // ["cat", "dog"]

Semua yang kita lakukan di sini adalah mengekstrak fungsi anak panah inline tanpa nama yang ditakrifkan di atas dan mengubahnya menjadi fungsi bernama berasingan. Seperti yang dapat kita lihat, kita telah menentukan fungsi tulen yang mengambil jenis nilai yang sesuai dari elemen array dan mengembalikan jenis yang sama. Kita boleh secara langsung lulus nama fungsi sebagai syarat kepada kaedah penapis.

(kandungan tinjauan, mengenai map, reduce dan panggilan rantai, sila tambahkannya mengikut teks asal kerana batasan ruang.) Mengekalkan gambar dan format teks asal.

Atas ialah kandungan terperinci Penapisan dan Chaining dalam JavaScript berfungsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!