Menggunakan peta dan mengurangkan javascript berfungsi

mata teras

JavaScript Native
• dan Array kaedah map() objek adalah alat pengaturcaraan berfungsi yang kuat yang menjadikan kod lebih ringkas, mudah dibaca dan mudah dikekalkan. reduce()
• adalah teknik pengaturcaraan fungsional asas yang bertindak pada semua elemen dalam array dan menghasilkan pelbagai lagi panjang yang sama yang mengandungi kandungan yang ditukar. Dengan menambahkan fungsi pemetaan ke objek array, ECMAScript 5 mengubah jenis array asas menjadi functor lengkap, menjadikan pengaturcaraan berfungsi lebih mudah digunakan. map() Kaedah
• (juga kaedah baru dalam ECMAScript 5) adalah serupa dengan reduce(), tetapi bukannya menghasilkan functor lain, ia menghasilkan satu hasil, yang boleh menjadi jenis apa pun. Ia menggunakan fungsi untuk setiap elemen array supaya array dikurangkan kepada satu nilai output. map()
Walaupun kaedah
• dan map() boleh menjejaskan prestasi, penambahbaikan kualiti kod dan kepuasan pemaju hari ini dengan menggunakannya mungkin melebihi kesan sementara terhadap prestasi. Penulis mengesyorkan menggunakan teknik fungsional untuk pembangunan dan mengukur kesan dalam situasi dunia nyata sebelum memutuskan sama ada reduce() dan map() sesuai untuk aplikasi tertentu. reduce()

Perbincangan proses yang berkaitan dengan banyak ciri baru ECMAScript 6 yang menakjubkan, dan mudah untuk dilupakan bahawa ECMAScript 5 menyediakan beberapa alat yang hebat untuk kita menyokong pengaturcaraan fungsional dalam JavaScript, yang boleh kita lakukan hari ini digunakan. Ini termasuk kaedah

dan Array asli berdasarkan objek JavaScript map(). reduce()

Jika anda belum menggunakan

dan map() lagi, maka mulakan sekarang! Platform JavaScript yang paling moden menyokong ECMAScript 5 secara asli. Pemetaan dan peraturan boleh menjadikan kod anda lebih ringkas, lebih mudah dibaca dan diselenggarakan, dan membimbing anda ke arah perkembangan fungsi yang lebih elegan. reduce()

Prestasi: Langkah berjaga -jaga

Sudah tentu, apabila diperlukan, bacaan dan penyelenggaraan kod mesti seimbang dengan prestasi. Pada masa ini, pelayar lebih cekap menggunakan teknik tradisional yang lebih rumit seperti gelung

. for

Pendekatan saya biasanya menulis kod yang mudah dibaca dan dikekalkan terlebih dahulu, dan kemudian mengoptimumkan prestasi jika saya melihat masalah dalam keadaan sebenar. Pengoptimuman pramatang adalah sumber semua kejahatan.

Ia juga patut dipertimbangkan bahawa sebagai pelayar mengoptimumkan

dan map(), menggunakan kaedah ini boleh memanfaatkan penambahbaikan dalam enjin JavaScript. Kecuali saya menghadapi masalah prestasi, saya lebih suka menulis kod secara optimis dan meletakkan tweak prestasi yang menjadikan kod saya kurang menarik dalam poket sandaran saya sekiranya saya memerlukannya. reduce()

Gunakan peta

Pemetaan adalah teknik pengaturcaraan fungsional asas yang bertindak pada semua elemen dalam array dan menghasilkan pelbagai lagi panjang yang sama (termasuk kandungan yang ditukar).

Untuk menjadi lebih spesifik, mari kita tentukan kes penggunaan mudah. Sebagai contoh, katakan anda mempunyai pelbagai perkataan yang anda perlukan untuk menukar ke dalam array yang mengandungi setiap panjang perkataan. (Saya tahu, ini bukan jenis sains roket yang kompleks yang biasanya anda perlukan untuk melaksanakan aplikasi yang kompleks, tetapi memahami bagaimana ia berfungsi dalam kes mudah ini akan membantu anda menambah nilai sebenar kepada kod anda memohon dalam kes).

Anda mungkin sudah tahu cara menggunakan gelung for pada array untuk melakukan apa yang saya nyatakan. Ia mungkin kelihatan seperti ini:

<code class="language-javascript">var animals = ["cat","dog","fish"];
var lengths = [];
var item;
var count;
var loops = animals.length;
for (count = 0; count < loops; count++) {
  item = animals[count];
  lengths.push(item.length);
}
console.log(lengths); //[3, 3, 4]</code>

semua yang kita lakukan adalah menentukan beberapa pembolehubah: array yang dipanggil animals yang mengandungi kata -kata kita; Simpan setiap item yang akan kami beroperasi dalam setiap gelung array. Kami mengoptimumkan gelung lengths kami dengan pembolehubah kaunter dalaman sementara dan pembolehubah item. Kami kemudian melangkah ke atas setiap item sehingga panjang for. Untuk setiap item, kami mengira panjangnya dan menolaknya ke dalam array loops. for animals lengths NOTA: Kita boleh mengatakan bahawa kita boleh melakukan ini lebih ringkas dengan terus menolak panjang

ke array

tanpa tugasan perantaraan. Ini akan menyelamatkan kita beberapa kod, tetapi juga akan menjadikan kod itu kurang dibaca, walaupun untuk contoh yang sangat mudah ini. Sekali lagi, untuk menjadikannya lebih cekap, tetapi kurang mudah, kita boleh memulakan array kami ke animals[count] menggunakan panjang array lengths yang diketahui dan kemudian masukkan item dengan indeks dan bukannya menggunakan animals. Ia semua bergantung pada bagaimana anda akan menggunakan kod di dunia nyata. lengths new Array(animals.length) push Kaedah ini tidak mempunyai masalah teknikal. Ia harus berfungsi dalam mana -mana enjin JavaScript standard dan ia akan melakukan tugas itu. Tetapi apabila anda tahu cara menggunakan , ia akan kelihatan canggung untuk berbuat demikian.

izinkan saya menunjukkan kepada anda bagaimana kami menggunakan map() untuk menangani perkara ini:

map() Dalam kes ini, kita mulakan dengan pembolehubah array

sekali lagi. Walau bagaimanapun, satu -satunya pemboleh ubah yang kami nyatakan ialah

<code class="language-javascript">var animals = ["cat","dog","fish"];
var lengths = animals.map(function(animal) {
  return animal.length;
});
console.log(lengths); //[3, 3, 4]</code>

, yang kami berikan terus kepada hasil pemetaan fungsi inline tanpa nama kepada setiap elemen array

. Fungsi tanpa nama ini melakukan operasi pada setiap haiwan, mengembalikan panjang. Akibatnya, animals menjadi array dengan panjang yang sama seperti array lengths asal, yang mengandungi panjang setiap perkataan. animals

Beberapa mata untuk diperhatikan mengenai kaedah ini. Pertama, ia jauh lebih pendek daripada kaedah asal. Kedua, kita perlu mengisytiharkan lebih sedikit pembolehubah. Pembolehubah yang lebih sedikit, bunyi yang kurang akan ada di ruang nama global, dan jika bahagian lain dari kod yang sama menggunakan pembolehubah dengan nama yang sama, kemungkinan kurang konflik. Selain itu, pembolehubah kami tidak perlu mengubah nilai mereka dari awal hingga akhir. Semasa anda menyelam ke dalam pengaturcaraan berfungsi, anda akan menghargai keupayaan anggun menggunakan pemalar dan pembolehubah yang tidak berubah, dan belum terlambat untuk mula belajar sekarang.

Satu lagi kelebihan pendekatan ini ialah kita mempunyai peluang untuk memperbaiki fleksibiliti dengan memisahkan fungsi bernama, sehingga menghasilkan kod bersih dalam proses. Fungsi inline tanpa nama boleh kelihatan kemas dan membuat kod semula lebih sukar. Kita boleh menentukan fungsi yang dipanggil getLength() dan menggunakannya dalam konteks dengan cara ini:

<code class="language-javascript">var animals = ["cat","dog","fish"];
var lengths = [];
var item;
var count;
var loops = animals.length;
for (count = 0; count < loops; count++) {
  item = animals[count];
  lengths.push(item.length);
}
console.log(lengths); //[3, 3, 4]</code>

Lihat bagaimana bersih ini kelihatan? Hanya mengambil pemetaan sebagai sebahagian daripada toolkit anda boleh mengambil kod anda ke tahap fungsional yang baru.

Apa itu Functor?

Menariknya, dengan menambahkan fungsi pemetaan ke objek array, ECMAScript 5 mengubah jenis array asas menjadi functor lengkap, menjadikan pengaturcaraan berfungsi lebih mudah untuk kita semua gunakan.

Menurut definisi pengaturcaraan fungsional klasik, Functors memenuhi tiga syarat:

1. ia mengandungi satu set nilai
2. ia melaksanakan fungsi pemetaan yang bertindak pada setiap elemen
3. Fungsi pemetaannya mengembalikan kunctor dengan saiz yang sama

Ini adalah topik yang boleh anda bincangkan di mesyuarat JavaScript seterusnya.

Jika anda ingin mengetahui lebih lanjut mengenai Functors, lihat video hebat ini oleh Mattias Petter Johansson.

Gunakan mengurangkan

Kaedah

reduce() juga merupakan kaedah baru dalam ECMAScript 5, yang sama dengan map(), kecuali ia tidak menjana functor lain, tetapi menghasilkan satu hasil, yang boleh menjadi jenis apa pun. Sebagai contoh, katakan anda ingin mengambil jumlah panjang semua perkataan dalam array animals sebagai nombor. Anda boleh bermula dengan:

<code class="language-javascript">var animals = ["cat","dog","fish"];
var lengths = animals.map(function(animal) {
  return animal.length;
});
console.log(lengths); //[3, 3, 4]</code>

Selepas menentukan array awal, kami membuat pembolehubah total untuk jumlah yang dijalankan, pada mulanya ditetapkan kepada sifar. Kami juga mencipta pembolehubah item untuk menyelamatkan setiap lelaran array animals apabila ia melintasi gelung for, dan pembolehubah count untuk kaunter gelung, dan pembolehubah loops untuk mengoptimumkan lelaran kami. Kemudian, kami menjalankan gelung for untuk melelehkan semua perkataan dalam array animals dan menyerahkan setiap perkataan kepada pembolehubah item. Akhirnya, kami menambah panjang setiap item kepada jumlah kami.

Sekali lagi, pendekatan ini tidak mempunyai masalah teknikal. Kami mulakan dengan array dan akhirnya mendapat hasil. Walau bagaimanapun, menggunakan kaedah reduce(), kita boleh membuat proses ini lebih langsung:

<code class="language-javascript">var animals = ["cat","dog","fish"];
var lengths = [];
var item;
var count;
var loops = animals.length;
for (count = 0; count < loops; count++) {
  item = animals[count];
  lengths.push(item.length);
}
console.log(lengths); //[3, 3, 4]</code>

Apa yang berlaku di sini ialah kita menentukan pembolehubah baru total dan menyerahkannya kepada hasil mengurangkan array animals menggunakan dua parameter: fungsi inline tanpa nama dan nilai total nilai awal sifar. Pengurangan akan melintasi setiap item dalam array, laksanakan fungsi pada item itu, dan tambahkannya ke jumlah yang dijalankan ke lelaran seterusnya. Di sini fungsi inline kami mempunyai dua parameter: jumlah yang dijalankan dan kata -kata yang sedang diproses dari array. Fungsi ini menambah nilai semasa total ke panjang perkataan semasa.

Perhatikan bahawa kami menetapkan parameter kedua reduce() kepada sifar, yang menunjukkan bahawa total akan mengandungi nombor. Tanpa parameter kedua, kaedah reduce masih akan berfungsi, tetapi hasilnya tidak semestinya hasil yang anda harapkan. (Cubalah dan lihat logik apa yang digunakan oleh JavaScript ketika menjalankan jumlahnya ditinggalkan.)

Oleh kerana definisi fungsi inline tanpa nama diintegrasikan apabila memanggil kaedah reduce(), ini mungkin kelihatan sedikit lebih rumit daripada yang diperlukan. Mari kita lakukan ini lagi, tetapi mari kita mula -mula menentukan fungsi bernama dan bukannya menggunakan fungsi inline tanpa nama:

<code class="language-javascript">var animals = ["cat","dog","fish"];
var lengths = animals.map(function(animal) {
  return animal.length;
});
console.log(lengths); //[3, 3, 4]</code>

Ini adalah sedikit lebih lama, tetapi ia tidak selalu menjadi perkara yang buruk untuk berkembang. Melihatnya dengan cara ini harus membuat apa yang berlaku dalam kaedah reduce sedikit lebih jelas.

Kaedah

reduce() mempunyai dua parameter: fungsi yang digunakan untuk setiap elemen dalam array, dan nilai awal yang digunakan untuk menjalankan jumlahnya. Dalam kes ini, kami lulus nama fungsi baru bernama addLength dan nilai awal sifar Jumlah Jumlah. Kami mencipta fungsi addLength() supaya ia juga menerima dua parameter: jumlah larian dan rentetan yang akan diproses.

Kesimpulan

Membangunkan tabiat menggunakan map() dan reduce() secara teratur akan memberikan anda alternatif untuk menjadikan kod anda lebih ringkas, lebih umum, lebih mudah untuk mengekalkan, dan membuka jalan bagi anda untuk menggunakan teknologi JavaScript yang lebih berfungsi dengan cara.

Kaedah

map() dan reduce() hanyalah dua kaedah baru yang ditambah kepada ECMAScript 5. Kemungkinan besar, penambahbaikan kualiti kod dan kepuasan pemaju yang anda lihat hari ini akan jauh melebihi kesan sementara terhadap prestasi. Gunakan teknik fungsional untuk membangun dan mengukur kesan di dunia nyata sebelum memutuskan sama ada map() dan reduce() sesuai untuk permohonan anda.

Artikel ini dikaji semula oleh Panayiotis Velisarakos, Tim Sevien dan Dan Prince. Terima kasih kepada semua pengulas rakan sebaya untuk mendapatkan kandungan SitePoint dengan sebaik -baiknya!

Soalan-soalan yang sering ditanya mengenai peta-reduce dalam JavaScript berfungsi (FAQ)

Apakah perbezaan antara peta dan mengurangkan JavaScript?

Dalam JavaScript, Peta dan Mengurangkan kedua-dua fungsi pesanan lebih tinggi yang bertindak pada tatasusunan. Fungsi peta digunakan untuk membuat array baru dengan menggunakan fungsi untuk setiap elemen array asal. Ia tidak mengubah suai array asal, tetapi mengembalikan array baru. Sebaliknya, fungsi mengurangkan digunakan untuk memudahkan susunan ke dalam nilai tunggal. Ia menggunakan fungsi untuk setiap elemen array supaya ia dapat dikurangkan kepada satu nilai output.

Bagaimanakah fungsi peta berfungsi dalam JavaScript?

Fungsi peta dalam JavaScript berfungsi dengan membuat array baru dari array yang ada. Ia melakukan ini dengan menggunakan fungsi yang ditentukan untuk setiap elemen dalam array asal. Fungsi ini dipanggil sekali untuk setiap elemen dalam array. Hasilnya adalah array baru yang mengandungi hasil panggilan fungsi.

bagaimana mengurangkan fungsi berfungsi dalam JavaScript?

fungsi mengurangkan dalam JavaScript berfungsi dengan menggunakan fungsi untuk setiap elemen dalam array supaya array dapat dikurangkan kepada satu nilai output. Nilai output adalah hasil kumulatif panggilan fungsi. Fungsi ini menerima dua parameter: penumpuk dan nilai semasa. Nilai pulangan panggilan fungsi terkumpul penumpuk.

Bolehkah saya menggunakan peta dan mengurangkan javascript?

Ya, anda boleh menggunakan peta dan mengurangkan dalam JavaScript. Malah, mereka sering digunakan bersama dalam pengaturcaraan berfungsi. Anda boleh menggunakan fungsi peta untuk menukar setiap elemen dalam array dan kemudian gunakan fungsi mengurangkan untuk menggabungkan elemen yang ditukar ke dalam satu nilai output.

Apakah perbezaan antara Peta dan Foreach dalam JavaScript?

Peta dan Foreach adalah kedua-dua fungsi pesanan lebih tinggi yang bertindak pada tatasusunan dalam JavaScript. Perbezaan utama di antara mereka ialah peta mencipta array baru dengan menggunakan fungsi untuk setiap elemen array asal, sementara Foreach terpakai untuk setiap elemen array untuk mendapatkan kesan sampingannya. Foreach tidak mengembalikan array baru.

Bagaimana saya menukar array dalam javascript menggunakan fungsi peta?

Anda boleh menggunakan fungsi peta dalam JavaScript untuk menukar array dengan menggunakan fungsi ke setiap elemen array. Fungsi ini dipanggil sekali untuk setiap elemen dalam array. Hasilnya adalah array baru yang mengandungi hasil panggilan fungsi.

Bagaimana saya menggunakan fungsi mengurangkan untuk menggabungkan unsur -unsur array dalam javascript?

Anda boleh menggunakan fungsi mengurangkan dalam JavaScript untuk menggabungkan unsur -unsur array ke dalam satu nilai output. Fungsi ini digunakan untuk setiap elemen dalam array, dan nilai output adalah hasil kumulatif panggilan fungsi.

Apakah beberapa kes penggunaan biasa fungsi peta dalam JavaScript?

Fungsi peta dalam JavaScript sering digunakan untuk menukar tatasusunan dengan menggunakan fungsi ke setiap elemen array. Sesetengah kes penggunaan biasa termasuk menukarkan rentetan kepada nombor, mengubah kes rentetan, dan mengekstrak sifat dari objek.

Apakah beberapa kes penggunaan biasa untuk mengurangkan fungsi dalam JavaScript?

Mengurangkan fungsi dalam JavaScript biasanya digunakan untuk menggabungkan unsur -unsur array ke dalam satu nilai output. Sesetengah kes penggunaan biasa termasuk nombor penjumlahan, mencari nilai maksimum atau minimum, dan rentetan yang menggabungkan.

Bagaimana untuk debug peta atau mengurangkan fungsi dalam JavaScript?

Anda boleh debug peta atau mengurangkan fungsi dalam JavaScript dengan menggunakan pernyataan console.log dalam fungsi untuk memaparkan nilai pembolehubah dan ekspresi. Anda juga boleh menjeda pelaksanaan menggunakan pernyataan debugger dan periksa nilai pembolehubah dan ekspresi dalam alat pemaju pelayar web.

Atas ialah kandungan terperinci Menggunakan peta dan mengurangkan javascript berfungsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!