Pada tutorial belajar JavaScript sebelumnya telah dibahas tentang Pengertian Variabel dalam Bahasa JavaScript. Kali ini akan kita lengkapi dengan konsep yang mirip tapi tidak sama, yakni Konstanta
pengertian konstanta
Konstanta adalah sebuah tempat atau wadah dari suatu nilai. Sesuai dengan namanya, nilai dari konstanta bersifat tetap (konstan) dan tidak dapat diubah sepanjang program berjalan. Inilah yang menjadi pembeda antara konstanta dengan variabel
Konstanta sebenarnya fitur wajib yang selalu ada di setiap bahasa pemrograman. Namun di JavaScript sendiri, konstanta baru hadir pada ECMAScript 6
Wajah Membuat Konstanta JavaScript
Untuk membuat konstanta di JavaScript, gunakan perintah const seperti contoh berikut
<!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom </p> <script> const PI = 3.14; const KURS_DOLLAR = 14500; const NAMA_WEB = "Duniailkom"; console.log(PI); // 3.14 console.log(KURS_DOLLAR); // 14500 console.log(NAMA_WEB); // "Duniailkom"; </script> </body> </html>Di sini saya membuat 3 konstanta. PI beri KURS_DOLLAR beri NAMA_WEB. Ketiganya diberi nilai awal 3. 14, 14500 beri “Duniailkom”
Aturan penulisan nama konstanta sama seperti variabel, karena konstanta ini juga termasuk ke dalam identifier. Namun konvensi penamaan atau kebiasaan memberikan nama untuk konstanta adalah dengan SCREAMING_SNAKE_CASE
Nama konstanta ditulis dalam huruf ciuman semua dengan tanda garis bawah “_” sebagai kata pemisah. Tujuannya agar mudah dibedakan dengan variabel. Namun ini hanya saran, JavaScript tidak akan komplain jika kita menggunakan huruf kecil untuk penulisan nama konstanta
________satu_______Sesuai namanya, nilai konstanta tidak dapat diubah setelah di deklarasikan. Jika kita mencoba menimpa nilai konstanta, JavaScript akan mengeluarkan error berat
<!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom </p> <script> const KURS_DOLLAR = 14500; KURS_DOLLAR = 16000 </script> </body> </html>Katakanlah kode program JavaScript modern, kita akan sering menemukan konstanta dari variabel. Karena faktanya, cukup banyak nilai yang tidak dapat diubah sepanjang kode program. Sehingga lebih aman jika menggunakan konstanta agar tidak terjadi proses penimpaan nilai yang tidak disegaja
Selanjutnya kita akan masuk ke materi tentang type data, yakni Jenis-Jenis Type Data Dalam JavaScript
Saat ini di Duniailkom tersedia eBook / buku JavaScript Uncover. Dengan total lebih dari 650 halaman A4, materi di buku jauh lebih banyak daripada tutorial di web Duniailkom. Penjelasan lebih lanjut bisa ke. JavaScript Uncover – Panduan Belajar JavaScript
Pemrograman fungsional telah membuat percikan di dunia pengembangan akhir-akhir ini. dan untuk alasan yang bagus. Teknik fungsional dapat membantu Anda menulis lebih banyak kode deklaratif yang lebih mudah dipahami secara sekilas, refactor, dan pengujian
Salah satu landasan pemrograman fungsional adalah penggunaan khusus daftar dan operasi daftar. Hal-hal itu persis seperti apa kedengarannya. array hal-hal dan hal-hal yang Anda lakukan untuk mereka. Tetapi pola pikir fungsional memperlakukan mereka sedikit berbeda dari yang Anda duga
Cara Menggunakan Map, Filter, dan Reduce di JavaScript
Artikel ini akan mencermati apa yang saya suka sebut sebagai operasi daftar "tiga besar". 326, 327, dan 328. Membungkus kepala Anda di sekitar ketiga fungsi ini merupakan langkah penting untuk dapat menulis kode yang bersih dan fungsional, dan ini membuka pintu ke teknik pemrograman fungsional dan reaktif yang sangat kuat.
Ingin tahu?
Peta Dari Daftar ke Daftar
Seringkali, kita mendapati diri kita perlu mengambil sebuah array dan memodifikasi setiap elemen di dalamnya dengan cara yang persis sama. Contoh umum dari hal ini adalah mengkuadratkan setiap elemen dalam larik angka, mengambil nama dari daftar pengguna, atau menjalankan regex terhadap larik string
326 adalah metode yang dibangun untuk melakukan hal itu. Itu didefinisikan pada 3_30, sehingga Anda dapat memanggilnya pada array apa pun, dan ia menerima panggilan balik sebagai argumen pertamanya.
Sintaks untuk 3_26 ditunjukkan di bawah ini
1let newArray = arr.map(callback(currentValue[, index[, array]]) { 2 // return element for newArray, after executing something 3}[, thisArg]);
Saat Anda memanggil _3_26 pada sebuah array, itu mengeksekusi callback itu pada setiap elemen di dalamnya, mengembalikan array baru dengan semua nilai yang dikembalikan oleh callback
Di balik layar, 3_26 meneruskan tiga argumen ke callback Anda
- item saat ini dalam array
- indeks array dari item saat ini
- seluruh array yang Anda panggil 3_26
Mari kita lihat beberapa kode
326 dalam Praktek
Misalkan kita memiliki aplikasi yang mengelola berbagai tugas Anda untuk hari itu. Setiap 3_36 adalah objek, masing-masing dengan properti 337 dan 338
1// Durations are in minutes 2const tasks = [ 3let newArray = arr.map(callback(currentValue[, index[, array]]) { 1let newArray = arr.map(callback(currentValue[, index[, array]]) { 2let newArray = arr.map(callback(currentValue[, index[, array]]) { 3let newArray = arr.map(callback(currentValue[, index[, array]]) { 4let newArray = arr.map(callback(currentValue[, index[, array]]) { 5let newArray = arr.map(callback(currentValue[, index[, array]]) { 6let newArray = arr.map(callback(currentValue[, index[, array]]) { 7let newArray = arr.map(callback(currentValue[, index[, array]]) { 8let newArray = arr.map(callback(currentValue[, index[, array]]) { 12021222324let newArray = arr.map(callback(currentValue[, index[, array]]) { 726let newArray = arr.map(callback(currentValue[, index[, array]]) { 12829 // return element for newArray, after executing something 0 // return element for newArray, after executing something 1 // return element for newArray, after executing something 2 // return element for newArray, after executing something 3 // return element for newArray, after executing something 4 // return element for newArray, after executing something 5
Katakanlah kita ingin membuat array baru hanya dengan nama setiap tugas, sehingga kita dapat melihat semua yang telah kita lakukan hari ini. Menggunakan 3_39 loop, kami akan menulis sesuatu seperti ini
1________12______72 // return element for newArray, after executing something 9331let newArray = arr.map(callback(currentValue[, index[, array]]) { 233let newArray = arr.map(callback(currentValue[, index[, array]]) { 4________3____5________10____6________10___8________3______8
JavaScript juga menawarkan 3_40 loop. Ini berfungsi seperti 339 loop, tetapi mengelola semua kekacauan memeriksa indeks loop kami terhadap panjang array untuk kami
1________12______72 // return element for newArray, after executing something _93}[, thisArg]); 4let newArray = arr.map(callback(currentValue[, index[, array]]) { 2}[, thisArg]); 6let newArray = arr.map(callback(currentValue[, index[, array]]) { 4________14___8________10____6________10___8________3______8
Menggunakan 3_26, kita cukup menulis
1132153}[, thisArg]); 8let newArray = arr.map(callback(currentValue[, index[, array]]) { 2let newArray = arr.map(callback(currentValue[, index[, array]]) { 4// Durations are in minutes 0
Di sini saya menyertakan parameter 3_43 dan 344 untuk mengingatkan Anda bahwa mereka ada di sana jika Anda membutuhkannya. Karena saya tidak menggunakannya di sini, Anda dapat mengabaikannya, dan kode akan berjalan dengan baik
Cara penulisan yang lebih ringkas 326 dalam JavaScript modern adalah dengan fungsi panah
1________23______223// Durations are in minutes 5
Fungsi panah adalah bentuk pendek untuk fungsi satu baris yang hanya memiliki pernyataan 346. Tidak ada yang lebih mudah dibaca dari itu
Ada beberapa perbedaan penting antara pendekatan yang berbeda
- Menggunakan 3_26, Anda tidak harus mengelola sendiri status 339
- Dengan 3_26, Anda dapat mengoperasikan elemen secara langsung, daripada harus mengindeks ke dalam array
- Anda tidak perlu membuat larik baru dan 350 ke dalamnya. 326 mengembalikan produk jadi sekaligus, jadi kita cukup menetapkan nilai pengembalian ke variabel baru
- Anda harus ingat untuk menyertakan pernyataan 3_46 dalam panggilan balik Anda. Jika tidak, Anda akan mendapatkan array baru yang diisi dengan 353.
Ternyata, semua fungsi yang akan kita lihat hari ini memiliki karakteristik yang sama
Fakta bahwa kita tidak perlu mengelola keadaan loop secara manual membuat kode kita lebih sederhana dan lebih mudah dipelihara. Fakta bahwa kita dapat mengoperasikan elemen secara langsung alih-alih harus mengindeks ke dalam array membuat semuanya lebih mudah dibaca.
Menggunakan loop 3_40 menyelesaikan kedua masalah ini untuk kita. Tapi 3_26 masih memiliki setidaknya dua keunggulan berbeda
- 340 mengembalikan 353, sehingga tidak berantai dengan metode array lainnya. 326 mengembalikan sebuah array, sehingga Anda dapat merangkainya dengan metode array lainnya
- 326 mengembalikan array dengan produk jadi, daripada meminta kita untuk mengubah array di dalam loop.
Menjaga jumlah tempat di mana Anda memodifikasi keadaan seminimal mungkin adalah prinsip penting pemrograman fungsional. Itu membuat kode lebih aman dan lebih dimengerti
gotcha
Panggilan balik yang Anda berikan ke 3_26 harus memiliki pernyataan 346 yang eksplisit, atau 326 akan mengeluarkan array yang penuh dengan 353. Tidak sulit untuk mengingat untuk menyertakan nilai __________3______46, tetapi tidak sulit untuk melupakannya.
Jika Anda lupa, 3_26 tidak akan mengeluh. Sebaliknya, itu diam-diam akan mengembalikan array yang tidak berisi apa-apa. Kesalahan diam seperti itu bisa sangat sulit untuk di-debug.
Untungnya, ini adalah satu-satunya gotcha dengan 326. Tapi itu jebakan yang cukup umum yang terpaksa saya tekankan. Selalu pastikan panggilan balik Anda berisi pernyataan __________3______46
penerapan
Implementasi membaca merupakan bagian penting dari pemahaman. Jadi mari kita menulis 326 ringan kita sendiri untuk lebih memahami apa yang terjadi di bawah tenda. Jika Anda ingin melihat implementasi kualitas produksi, lihat polyfill Mozilla di MDN
1// Durations are in minutes 72// Durations are in minutes 93____12_______9let newArray = arr.map(callback(currentValue[, index[, array]]) { 223let newArray = arr.map(callback(currentValue[, index[, array]]) { 4________11___5________10___6________11___7________10___8________12___9________11___0________25___1________11<!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom </p> <script> const KURS_DOLLAR = 14500; KURS_DOLLAR = 16000 </script> </body> </html>_23_______23_______23_______23________
Kode ini menerima array dan fungsi callback sebagai argumen. Itu kemudian membuat larik baru, mengeksekusi panggilan balik pada setiap elemen pada larik yang kami lewati, mendorong hasilnya ke dalam larik baru, dan mengembalikan larik baru. Jika Anda menjalankan ini di konsol Anda, Anda akan mendapatkan hasil yang sama seperti sebelumnya.
Saat kita menggunakan for loop di bawah tenda, membungkusnya menjadi sebuah fungsi akan menyembunyikan detailnya dan memungkinkan kita bekerja dengan abstraksi sebagai gantinya.
Itu membuat kode kita lebih deklaratif—ia mengatakan apa yang harus dilakukan, bukan bagaimana melakukannya. Anda akan menghargai betapa lebih mudah dibaca, dipelihara, dan, erm, debuggable ini dapat membuat kode Anda
Saring Kebisingan
Operasi larik berikutnya adalah 3_27. Itu persis seperti apa kedengarannya. Dibutuhkan array dan menyaring elemen yang tidak diinginkan
Sintaks untuk filter adalah
1const tasks = [ 52const tasks = [ 7________3__14_______
Sama seperti 3_26, 327 melewati panggilan balik Anda tiga argumen
- item saat ini
- indeks saat ini
- array yang Anda panggil 3_27
Pertimbangkan contoh berikut, yang memfilter string apa pun yang kurang dari 8 karakter
1let newArray = arr.map(callback(currentValue[, index[, array]]) { 012let newArray = arr.map(callback(currentValue[, index[, array]]) { 033let newArray = arr.map(callback(currentValue[, index[, array]]) { 05
Hasil yang diharapkan akan
1let newArray = arr.map(callback(currentValue[, index[, array]]) { _07
Mari kita lihat kembali contoh tugas kita. Alih-alih mengeluarkan nama setiap tugas, katakanlah saya ingin mendapatkan daftar hanya tugas yang membutuhkan waktu dua jam atau lebih untuk saya selesaikan
Menggunakan 3_40, kami akan menulis
1let newArray = arr.map(callback(currentValue[, index[, array]]) { 092 // return element for newArray, after executing something 93}[, thisArg]); 4let newArray = arr.map(callback(currentValue[, index[, array]]) { 2let newArray = arr.map(callback(currentValue[, index[, array]]) { 15let newArray = arr.map(callback(currentValue[, index[, array]]) { 4let newArray = arr.map(callback(currentValue[, index[, array]]) { 17let newArray = arr.map(callback(currentValue[, index[, array]]) { 6let newArray = arr.map(callback(currentValue[, index[, array]]) { 19let newArray = arr.map(callback(currentValue[, index[, array]]) { 8}[, thisArg]); 82022let newArray = arr.map(callback(currentValue[, index[, array]]) { 242426let newArray = arr.map(callback(currentValue[, index[, array]]) { 2728let newArray = arr.map(callback(currentValue[, index[, array]]) { 29 // return element for newArray, after executing something 0let newArray = arr.map(callback(currentValue[, index[, array]]) { 31
Dengan 3_27, kita cukup menulis
1let newArray = arr.map(callback(currentValue[, index[, array]]) { _33
Sama seperti 3_26, 327 memungkinkan kita
- hindari mutasi array di dalam 340 atau 339 loop
- tetapkan hasilnya langsung ke variabel baru, daripada mendorong ke dalam array yang kita definisikan di tempat lain
gotcha
Panggilan balik yang Anda berikan ke 3_26 harus menyertakan pernyataan pengembalian jika Anda ingin berfungsi dengan baik. Dengan 3_27, Anda juga harus menyertakan pernyataan pengembalian (kecuali jika Anda menggunakan fungsi panah), dan Anda harus memastikan pernyataan tersebut mengembalikan nilai boolean
Jika Anda lupa pernyataan pengembalian Anda, panggilan balik Anda akan mengembalikan 353, yang 327 akan dipaksakan dengan tidak membantu ke 383. Alih-alih melempar kesalahan, itu akan mengembalikan array kosong secara diam-diam.
Jika Anda pergi ke rute lain dan mengembalikan sesuatu yang tidak secara eksplisit _384 atau 383, maka _327 akan mencoba mencari tahu apa yang Anda maksud dengan menerapkan aturan pemaksaan tipe JavaScript. Lebih sering daripada tidak, ini adalah bug. Dan, seperti melupakan pernyataan pengembalian Anda, itu akan menjadi diam.
Selalu pastikan panggilan balik Anda menyertakan pernyataan pengembalian yang eksplisit. Dan selalu pastikan panggilan balik Anda di 327 mengembalikan 384 atau 383. Kewarasan Anda akan berterima kasih
penerapan
Sekali lagi, cara terbaik untuk memahami sebuah kode adalah. baik, untuk menulisnya. Ayo gulung 327 ringan kita sendiri. Orang-orang baik di Mozilla memiliki polyfill kekuatan industri untuk Anda baca juga
1let newArray = arr.map(callback(currentValue[, index[, array]]) { 352 // return element for newArray, after executing something 93let newArray = arr.map(callback(currentValue[, index[, array]]) { 39let newArray = arr.map(callback(currentValue[, index[, array]]) { 2 // return element for newArray, after executing something 9let newArray = arr.map(callback(currentValue[, index[, array]]) { 4let newArray = arr.map(callback(currentValue[, index[, array]]) { 43let newArray = arr.map(callback(currentValue[, index[, array]]) { 6let newArray = arr.map(callback(currentValue[, index[, array]]) { 45let newArray = arr.map(callback(currentValue[, index[, array]]) { 8let newArray = arr.map(callback(currentValue[, index[, array]]) { 4720let newArray = arr.map(callback(currentValue[, index[, array]]) { 4922let newArray = arr.map(callback(currentValue[, index[, array]]) { 5124 // return element for newArray, after executing something 926let newArray = arr.map(callback(currentValue[, index[, array]]) { 5528 // return element for newArray, after executing something 9 // return element for newArray, after executing something 0const tasks = [ 3
Metode Pengurangan
Sintaks untuk metode array 3_28 dalam JavaScript adalah
1let newArray = arr.map(callback(currentValue[, index[, array]]) { 612let newArray = arr.map(callback(currentValue[, index[, array]]) { 633let newArray = arr.map(callback(currentValue[, index[, array]]) { 65
326 membuat array baru dengan mengubah setiap elemen dalam array satu per satu. 327 membuat array baru dengan menghapus elemen yang bukan miliknya. 328, di sisi lain, mengambil semua elemen dalam array dan menguranginya menjadi satu nilai
Sama seperti 3_26 dan 327, 328 didefinisikan pada 330 dan tersedia pada array apa pun, dan Anda meneruskan panggilan balik sebagai argumen pertamanya. Tapi itu juga membutuhkan argumen kedua. nilai untuk mulai menggabungkan semua elemen array Anda.
328 melewati panggilan balik Anda empat argumen
- nilai saat ini
- nilai sebelumnya
- indeks saat ini
- array yang Anda panggil 3_28
Perhatikan bahwa callback mendapatkan nilai sebelumnya pada setiap iterasi. Pada iterasi pertama, tidak ada nilai sebelumnya. Inilah mengapa Anda memiliki opsi untuk memberikan 3_28 sebagai nilai awal. Ini bertindak sebagai "nilai sebelumnya" untuk iterasi pertama, bila sebaliknya tidak akan ada
Terakhir, ingatlah bahwa 3_28 mengembalikan satu nilai, bukan larik yang berisi satu item. Ini lebih penting daripada kelihatannya, dan saya akan kembali ke contoh
328 dalam Praktek
Katakanlah Anda ingin mencari jumlah dari daftar angka. Menggunakan loop, akan terlihat seperti ini
1________10______672let newArray = arr.map(callback(currentValue[, index[, array]]) { 693let newArray = arr.map(callback(currentValue[, index[, array]]) { 71let newArray = arr.map(callback(currentValue[, index[, array]]) { 2________10______73let newArray = arr.map(callback(currentValue[, index[, array]]) { 4let newArray = arr.map(callback(currentValue[, index[, array]]) { 10_______75________10____6________14____8________10____8__________1__0__0
Meskipun ini bukan kasus penggunaan yang buruk untuk 340, 328 masih memiliki keuntungan yang memungkinkan kita menghindari mutasi. Dengan 3_28, kami akan menulis
1let newArray = arr.map(callback(currentValue[, index[, array]]) { 822let newArray = arr.map(callback(currentValue[, index[, array]]) { 843let newArray = arr.map(callback(currentValue[, index[, array]]) { 86let newArray = arr.map(callback(currentValue[, index[, array]]) { 2let newArray = arr.map(callback(currentValue[, index[, array]]) { 88
Pertama, kami memanggil 3_28 di daftar nomor kami. Kami memberikannya panggilan balik, yang menerima nilai sebelumnya dan nilai saat ini sebagai argumen, dan mengembalikan hasil penjumlahan keduanya. Karena kami memberikan }[, thisArg]); 08 sebagai argumen kedua ke 328, itu akan menggunakannya sebagai nilai }[, thisArg]); 10 pada iterasi pertama
Dengan fungsi panah, kami akan menulisnya seperti ini
1let newArray = arr.map(callback(currentValue[, index[, array]]) { _902let newArray = arr.map(callback(currentValue[, index[, array]]) { 92
Jika kita mengambil langkah demi langkah, terlihat seperti ini
Iteration PreviousCurrentTotal10112123333646410510515Jika Anda bukan penggemar tabel, jalankan cuplikan ini di konsol
1let newArray = arr.map(callback(currentValue[, index[, array]]) { 94______111_______let newArray = arr.map(callback(currentValue[, index[, array]]) { 963let newArray = arr.map(callback(currentValue[, index[, array]]) { 98let newArray = arr.map(callback(currentValue[, index[, array]]) { _______2_____let newArray = arr.map(callback(currentValue[, index[, array]]) { _____________________________________________________10____111111111111111111
Untuk rekap. 328 mengulangi semua elemen array, menggabungkannya dengan cara apa pun yang Anda tentukan dalam panggilan balik Anda. Pada setiap iterasi, callback Anda memiliki akses ke nilai sebelumnya, yang merupakan nilai total sejauh ini, atau akumulasi;
Mari kembali ke contoh tugas kita. Kami memiliki daftar nama tugas dari 326, dan daftar tugas yang difilter yang membutuhkan waktu lama. baik, 3_27.
Bagaimana jika kita ingin mengetahui jumlah total waktu yang kita habiskan untuk bekerja hari ini?
Menggunakan 3_40 loop, Anda akan menulis
1214____1111___let newArray = arr.map(callback(currentValue[, index[, array]]) { 713}[, thisArg]); 4____10___________2____11______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________ E jelas.
Dengan 3_28, itu menjadi
1________11______362238
Itu hampir semua yang ada untuk itu. Hampir, karena JavaScript memberi kita satu lagi metode yang kurang dikenal, yang disebut }[, thisArg]); 16. Pada contoh di atas, 3_28 dimulai dari item pertama dalam larik, iterasi dari kiri ke kanan
1________11______4022423244let newArray = arr.map(callback(currentValue[, index[, array]]) { 2}[, thisArg]); 8let newArray = arr.map(callback(currentValue[, index[, array]]) { 4211_______48________10____6250
}[, thisArg]); _16 melakukan hal yang sama, tetapi berlawanan arah
1________11______4022543244let newArray = arr.map(callback(currentValue[, index[, array]]) { 2}[, thisArg]); 8________10______4________12____9________10____6262
Saya menggunakan 3_28 setiap hari, tetapi saya tidak pernah membutuhkan }[, thisArg]); 16. Saya rasa Anda mungkin juga tidak akan melakukannya. Tetapi jika Anda pernah melakukannya, sekarang Anda tahu itu ada
gotcha
Tiga gotcha besar dengan 3_28 adalah
- lupa untuk 3_46
- melupakan nilai awal
- mengharapkan array ketika 3_28 mengembalikan nilai tunggal
Untungnya, dua yang pertama mudah dihindari. Memutuskan berapa nilai awal Anda bergantung pada apa yang Anda lakukan, tetapi Anda akan segera menguasainya
Yang terakhir mungkin tampak agak aneh. Jika 3_28 hanya mengembalikan satu nilai, mengapa Anda mengharapkan array?
Ada beberapa alasan bagus untuk itu. Pertama, 3_28 selalu mengembalikan satu nilai, tidak selalu satu angka. Jika Anda mengurangi larik larik, misalnya, ia akan mengembalikan larik tunggal. Jika Anda terbiasa mengurangi larik, akan adil untuk berharap bahwa larik yang berisi satu item tidak akan menjadi kasus khusus
Kedua, jika _3_28 memang mengembalikan array dengan nilai tunggal, secara alami akan cocok dengan _326 dan 327, dan fungsi lain pada array yang kemungkinan besar akan Anda gunakan dengannya.
penerapan
Saatnya untuk penampilan terakhir kita di bawah tenda. Seperti biasa, Mozilla memiliki polyfill antipeluru untuk dikurangi jika Anda ingin memeriksanya
1264______111___266660____3___268let newArray = arr.map(callback(currentValue[, index[, array]]) { 22___________let newArray = arr.map(callback(currentValue[, index[, array]]) { _________1111111110______________________________________________________________________________________11111111111111111111111111111111111111111111111
Dua hal yang perlu diperhatikan di sini
- Kali ini, saya menggunakan nama }[, thisArg]); 29 bukan }[, thisArg]); 10. Inilah yang biasanya Anda lihat di alam liar
- Saya menetapkan }[, thisArg]); _29 nilai awal jika pengguna memberikannya, dan default ke }[, thisArg]); 08 jika tidak. Beginilah perilaku 3_28 yang sebenarnya
menyatukannya. Memetakan, Memfilter, Mengurangi, dan Kemampuan Berantai
Pada titik ini, Anda mungkin tidak terlalu terkesan. Cukup adil. 326, 327, dan 328, dengan sendirinya, tidak terlalu menarik. Bagaimanapun, kekuatan mereka yang sebenarnya terletak pada kemampuan rantai mereka.
Katakanlah saya ingin melakukan hal berikut
- Kumpulkan tugas selama dua hari
- Ubah durasi tugas menjadi jam, bukan menit
- Saring semua yang membutuhkan waktu dua jam atau lebih
- Tambahkan semuanya
- Kalikan hasilnya dengan tarif per jam untuk penagihan
- Keluarkan jumlah dolar yang diformat
Pertama, mari kita tentukan tugas kita untuk hari Senin dan Selasa
128222843286let newArray = arr.map(callback(currentValue[, index[, array]]) { 2288let newArray = arr.map(callback(currentValue[, index[, array]]) { 4290let newArray = arr.map(callback(currentValue[, index[, array]]) { 6284let newArray = arr.map(callback(currentValue[, index[, array]]) { 8294202962229824 // return element for newArray, after executing something 0026 // return element for newArray, after executing something 928 // return element for newArray, after executing something 04 // return element for newArray, after executing something 0284 // return element for newArray, after executing something 2 // return element for newArray, after executing something 08 // return element for newArray, after executing something 4 // return element for newArray, after executing something 10 // return element for newArray, after executing something 11290 // return element for newArray, after executing something 13284 // return element for newArray, after executing something 15 // return element for newArray, after executing something 16 // return element for newArray, after executing something 17288 // return element for newArray, after executing something 19290 // return element for newArray, after executing something 21284 // return element for newArray, after executing something 23 // return element for newArray, after executing something 24 // return element for newArray, after executing something 25 // return element for newArray, after executing something 26 // return element for newArray, after executing something 27298 // return element for newArray, after executing something 29 // return element for newArray, after executing something 00 // return element for newArray, after executing something 31 // return element for newArray, after executing something 32 // return element for newArray, after executing something 33________12____
Dan sekarang, transformasi kami yang terlihat cantik
1 // return element for newArray, after executing something 362 // return element for newArray, after executing something 383 // return element for newArray, after executing something 40let newArray = arr.map(callback(currentValue[, index[, array]]) { 2 // return element for newArray, after executing something 42let newArray = arr.map(callback(currentValue[, index[, array]]) { 4 // return element for newArray, after executing something 44let newArray = arr.map(callback(currentValue[, index[, array]]) { 6 // return element for newArray, after executing something 46let newArray = arr.map(callback(currentValue[, index[, array]]) { 8 // return element for newArray, after executing something 4820 // return element for newArray, after executing something 5022 // return element for newArray, after executing something 5224 // return element for newArray, after executing something 5426 // return element for newArray, after executing something 5628 // return element for newArray, after executing something 58 // return element for newArray, after executing something 0 // return element for newArray, after executing something 60 // return element for newArray, after executing something 2 // return element for newArray, after executing something 62 // return element for newArray, after executing something 4 // return element for newArray, after executing something 64 // return element for newArray, after executing something 11 // return element for newArray, after executing something 66
Jika Anda sudah sampai sejauh ini, ini seharusnya cukup mudah. Namun, ada dua keanehan untuk dijelaskan.
Pertama, di baris 10, saya harus menulis
1________12______682 // return element for newArray, after executing something 703 // return element for newArray, after executing something 72let newArray = arr.map(callback(currentValue[, index[, array]]) { 2 // return element for newArray, after executing something 74
Dua hal untuk dijelaskan di sini
- Tanda tambah di depan }[, thisArg]); _29 dan }[, thisArg]); 38 memaksa nilainya menjadi angka. Jika Anda tidak melakukan ini, nilai yang dikembalikan akan menjadi string yang agak tidak berguna, }[, thisArg]); 39
- Jika Anda tidak membungkus jumlah itu dalam tanda kurung, __328 akan mengeluarkan satu nilai, bukan array. Itu akan menghasilkan }[, thisArg]); _41, karena Anda hanya dapat menggunakan 326 pada array.
Bagian kedua yang mungkin membuat Anda sedikit tidak nyaman adalah 328 terakhir, yaitu
1________12______682 // return element for newArray, after executing something 783 // return element for newArray, after executing something 80let newArray = arr.map(callback(currentValue[, index[, array]]) { 2 // return element for newArray, after executing something 82let newArray = arr.map(callback(currentValue[, index[, array]]) { 4________12____84________10____6}[, thisArg]); 8
Panggilan ke 3_26 mengembalikan array yang berisi nilai tunggal. Di sini, kami memanggil 3_28 untuk mengeluarkan nilai itu
Terakhir, mari kita lihat bagaimana teman kita, loop __________3______40 akan menyelesaikannya
1 // return element for newArray, after executing something 882 // return element for newArray, after executing something 903 // return element for newArray, after executing something 92let newArray = arr.map(callback(currentValue[, index[, array]]) { 2 // return element for newArray, after executing something 94let newArray = arr.map(callback(currentValue[, index[, array]]) { 4248let newArray = arr.map(callback(currentValue[, index[, array]]) { 6 // return element for newArray, after executing something 98let newArray = arr.map(callback(currentValue[, index[, array]]) { 830020let newArray = arr.map(callback(currentValue[, index[, array]]) { 71223042430626let newArray = arr.map(callback(currentValue[, index[, array]]) { 1928}[, thisArg]); 8 // return element for newArray, after executing something 0248 // return element for newArray, after executing something 2314 // return element for newArray, after executing something 4316 // return element for newArray, after executing something 11}[, thisArg]); 8 // return element for newArray, after executing something 13 // return element for newArray, after executing something 15 // return element for newArray, after executing something 17 // return element for newArray, after executing something 19323 // return element for newArray, after executing something 21 // return element for newArray, after executing something 9
Bisa ditoleransi, tapi berisik
Kesimpulan dan Langkah Selanjutnya
Dalam tutorial ini, Anda telah mempelajari cara kerja 326, 327, dan 328; . Anda telah melihat bahwa mereka semua memungkinkan Anda untuk menghindari keadaan bermutasi, yang menggunakan _339 dan 340 loop membutuhkan, dan Anda sekarang harus memiliki ide yang baik tentang bagaimana menghubungkan mereka semua bersama-sama.
Sekarang, saya yakin Anda bersemangat untuk berlatih dan membaca lebih lanjut. Untuk masterclass dalam pemrograman fungsional dalam JavaScript, lihat kursus online kami