Cara menggunakan prototipe dalam contoh 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 Peta, Filter, & Perkecil di JavaScript

Artikel ini akan mencermati apa yang saya suka sebut sebagai operasi daftar "tiga besar".

3

3

3

Penasaran?

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

3

3

Sintaks untuk

3

1

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

  // return element for newArray, after executing something

3

}[, thisArg]);

Saat Anda memanggil _______0________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, _______0________26 meneruskan tiga argumen ke callback Anda

1. item saat ini dalam array
2. indeks array dari item saat ini
3. seluruh array yang Anda panggil

   3

   _26

Mari kita lihat beberapa kode

3_26 dalam Latihan

Misalkan kita memiliki aplikasi yang mengelola berbagai tugas Anda untuk hari itu. Setiap _______0________36 adalah objek, masing-masing dengan properti _______0_______37 dan _______0_______38

1

// Durations are in minutes 

2

const tasks = [

3

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

2

2

2

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

2

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

Katakanlah kita ingin membuat array baru hanya dengan nama setiap tugas, sehingga kita dapat melihat semua yang telah kita lakukan hari ini. Menggunakan

3

1

  // return element for newArray, after executing something

2

  // return element for newArray, after executing something

3

let newArray = arr.map(callback(currentValue[, index[, array]]) {

3

let newArray = arr.map(callback(currentValue[, index[, array]]) {

3

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

JavaScript juga menawarkan _______0________40 loop. Ini berfungsi seperti _______0________39 loop, tetapi mengelola semua kekacauan memeriksa indeks loop kami terhadap panjang array untuk kami

1

  // return element for newArray, after executing something

2

  // return element for newArray, after executing something

3

let newArray = arr.map(callback(currentValue[, index[, array]]) {

}[, thisArg]);

let newArray = arr.map(callback(currentValue[, index[, array]]) {

}[, thisArg]);

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

3

Menggunakan

3

1

1

2

1

3

}[, thisArg]);

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

// Durations are in minutes 

Di sini saya menyertakan parameter

3

3

Cara penulisan yang lebih ringkas

3

1

// Durations are in minutes 

2

3

// Durations are in minutes 

Fungsi panah adalah bentuk pendek untuk fungsi satu baris yang hanya memiliki pernyataan

3

Ada beberapa perbedaan penting antara pendekatan yang berbeda

1. Menggunakan

   3

   _26, Anda tidak perlu mengatur sendiri status

   3

   39
2. Dengan

   3

   _26, Anda dapat mengoperasikan elemen secara langsung, daripada harus mengindeks ke dalam array
3. Anda tidak perlu membuat larik baru dan

   3

   50 ke dalamnya.

   3

   26 mengembalikan produk jadi sekaligus, jadi kita cukup menetapkan nilai yang dikembalikan ke variabel baru
4. Anda harus ingat untuk menyertakan pernyataan

   3

   _46 dalam panggilan balik Anda. Jika tidak, Anda akan mendapatkan larik baru yang diisi dengan

   3

   53.  

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

1. 3

   40 mengembalikan

   3

   53, sehingga tidak berantai dengan metode array lainnya.

   3

   26 mengembalikan array, sehingga Anda dapat merangkainya dengan metode array lainnya

2. 3

   26 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 _______0________26 harus memiliki pernyataan _______0_______46 yang eksplisit, atau _______0_______26 akan mengeluarkan array yang penuh dengan _______0_______53. Tidak sulit untuk mengingat untuk menyertakan nilai

3

Jika Anda lupa, _______0________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

3

Penerapan

Implementasi membaca merupakan bagian penting dari pemahaman. Jadi mari kita menulis

3

1

// Durations are in minutes 

2

// Durations are in minutes 

3

3

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

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

Sintaks untuk filter adalah

1

const tasks = [

2

const tasks = [

3

}[, thisArg]);

Sama seperti

3

3

1. item saat ini
2. indeks saat ini
3. array yang Anda panggil

   3

   _27

Pertimbangkan contoh berikut, yang memfilter string apa pun yang kurang dari 8 karakter

1

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

3

Hasil yang diharapkan akan

1

let newArray = arr.map(callback(currentValue[, index[, array]]) {

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

1

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

  // return element for newArray, after executing something

3

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

}[, thisArg]);

2

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

3

2

3

2

Dengan

3

1

let newArray = arr.map(callback(currentValue[, index[, array]]) {

Sama seperti

3

3

• menghindari mutasi array di dalam

  3

  40 atau

  3

  39 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 _______0________26 harus menyertakan pernyataan pengembalian jika Anda ingin berfungsi dengan baik. Dengan _______0________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

3

3

3

Jika Anda pergi ke rute lain dan mengembalikan sesuatu yang tidak secara eksplisit

3

3

3

Selalu pastikan panggilan balik Anda menyertakan pernyataan pengembalian yang eksplisit. Dan selalu pastikan panggilan balik Anda di _______0_______27 return

3

3

Penerapan

Sekali lagi, cara terbaik untuk memahami sebuah kode adalah. baik, untuk menulisnya. Ayo gulung

3

1

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

  // return element for newArray, after executing something

3

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

  // return element for newArray, after executing something

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

  // return element for newArray, after executing something

  // return element for newArray, after executing something

const tasks = [

Metode Pengurangan

Sintaks untuk metode array

3

1

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

3

let newArray = arr.map(callback(currentValue[, index[, array]]) {

3

3

3

Sama seperti

3

3

3

3

3

1. nilai saat ini
2. nilai sebelumnya
3. indeks saat ini
4. array yang Anda panggil _______0________28

Perhatikan bahwa callback mendapatkan nilai sebelumnya pada setiap iterasi. Pada iterasi pertama, tidak ada nilai sebelumnya. Inilah sebabnya mengapa Anda memiliki opsi untuk memberikan

3

Akhirnya, ingatlah bahwa _______0________28 mengembalikan nilai tunggal, bukan larik yang berisi satu item. Ini lebih penting daripada kelihatannya, dan saya akan kembali ke contoh

3_28 dalam Latihan

Katakanlah Anda ingin mencari jumlah dari daftar angka. Menggunakan loop, akan terlihat seperti ini

1

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

3

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

}[, thisArg]);

let newArray = arr.map(callback(currentValue[, index[, array]]) {

Meskipun ini bukan kasus penggunaan yang buruk untuk _______0________40, _______0_______28 masih memiliki keuntungan yang memungkinkan kita menghindari mutasi. Dengan

3

1

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

3

let newArray = arr.map(callback(currentValue[, index[, array]]) {

let newArray = arr.map(callback(currentValue[, index[, array]]) {

Pertama, kami memanggil _______0________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 kita memberikan _______11_______08 sebagai argumen kedua ke _______0_______28, itu akan menggunakannya sebagai nilai _______11_______10 pada iterasi pertama

Dengan fungsi panah, kami akan menulisnya seperti ini

1

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

Jika kita mengambil langkah demi langkah, terlihat seperti ini

Jika Anda bukan penggemar tabel, jalankan cuplikan ini di konsol

1

2

3

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

Untuk rekap.

3

Mari kembali ke contoh tugas kita. Kami mendapatkan daftar nama tugas dari

3

3

Bagaimana jika kita ingin mengetahui jumlah total waktu yang kita habiskan untuk bekerja hari ini?

Menggunakan loop

3

1

2

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

3

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

}[, thisArg]);

2

  // return element for newArray, after executing something

2

2

2

  // return element for newArray, after executing something

2

Dengan

3

1

2

2

2

Itu hampir semua yang ada untuk itu. Hampir, karena JavaScript memberi kita satu lagi metode yang kurang dikenal, yang disebut _______11_______16. Pada contoh di atas, _______0________28 dimulai dari item pertama dalam larik, iterasi dari kiri ke kanan

1

2

2

3

let newArray = arr.map(callback(currentValue[, index[, array]]) {

}[, thisArg]);

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

}[, thisArg]);

1

2

2

2

3

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

}[, thisArg]);

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

Saya menggunakan _______0________28 setiap hari, tetapi saya tidak pernah membutuhkan _______11_______16. Saya rasa Anda mungkin juga tidak akan melakukannya. Tetapi jika Anda pernah melakukannya, sekarang Anda tahu itu ada

Gotcha

Tiga gotcha besar dengan _______0_______28 adalah

1. lupa untuk _______0________46
2. melupakan nilai awal
3. 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 _______0_______28 hanya mengembalikan satu nilai, mengapa Anda mengharapkan array?

Ada beberapa alasan bagus untuk itu. Pertama,

3

Kedua, jika _______0________28 memang mengembalikan array dengan satu nilai, secara alami akan cocok dengan _______0_______26 dan _______0_______27, 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 mengurangi jika Anda ingin memeriksanya

1

2

2

3

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

Dua hal yang perlu diperhatikan di sini

1. Kali ini, saya menggunakan nama _______11________29 bukan _______11_______10. Inilah yang biasanya Anda lihat di alam liar
2. Saya menetapkan

   }[, thisArg]);
   

   _29 nilai awal jika pengguna memberikannya, dan default ke

   }[, thisArg]);
   

   08 jika tidak. Beginilah perilaku _______0________28 yang sebenarnya

Menyatukannya. Memetakan, Memfilter, Mengurangi, dan Kemampuan Berantai

Pada titik ini, Anda mungkin tidak terlalu terkesan. Cukup adil.

3

3

3

Katakanlah saya ingin melakukan hal berikut

1. Kumpulkan tugas selama dua hari
2. Ubah durasi tugas menjadi jam, bukan menit
3. Saring semua yang membutuhkan waktu dua jam atau lebih
4. Jumlahkan semuanya
5. Kalikan hasilnya dengan tarif per jam untuk penagihan
6. Keluarkan jumlah dolar yang diformat

Pertama, mari kita tentukan tugas kita untuk hari Senin dan Selasa

1

2

2

2

3

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

2

2

2

2

2

  // return element for newArray, after executing something

2

  // return element for newArray, after executing something

2

  // return element for newArray, after executing something

  // return element for newArray, after executing something

2

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

2

  // return element for newArray, after executing something

2

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

2

  // return element for newArray, after executing something

2

  // return element for newArray, after executing something

2

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

2

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

Dan sekarang, transformasi kami yang terlihat cantik

1

  // return element for newArray, after executing something

2

  // return element for newArray, after executing something

3

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

2

  // return element for newArray, after executing something

2

  // return element for newArray, after executing something

2

  // return element for newArray, after executing something

2

  // return element for newArray, after executing something

2

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

Jika Anda sudah sampai sejauh ini, ini seharusnya cukup mudah. Namun, ada dua keanehan untuk dijelaskan.  

Pertama, di baris 10, saya harus menulis

1

  // return element for newArray, after executing something

2

3

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

Dua hal untuk dijelaskan di sini

1. Tanda tambah di depan _______11________29 dan _______11_______38 memaksa nilainya menjadi angka. Jika Anda tidak melakukan ini, nilai yang dikembalikan akan menjadi string yang agak tidak berguna, _______11_______39
2. Jika Anda tidak membungkus jumlah itu dalam tanda kurung, _______0_______28 akan mengeluarkan nilai tunggal, bukan array. Itu akan menghasilkan _______11_______41, karena Anda hanya dapat menggunakan _______0_______26 pada array.  

Bagian kedua yang mungkin membuat Anda sedikit tidak nyaman adalah

3

1

  // return element for newArray, after executing something

2

  // return element for newArray, after executing something

3

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

Panggilan ke _______0________26 mengembalikan array yang berisi nilai tunggal. Di sini, kami memanggil

3

Terakhir, mari kita lihat bagaimana teman kita 

3

1

  // return element for newArray, after executing something

2

  // return element for newArray, after executing something

3

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

  // return element for newArray, after executing something

let newArray = arr.map(callback(currentValue[, index[, array]]) {

3

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

3

2

3

2

let newArray = arr.map(callback(currentValue[, index[, array]]) {

2

}[, thisArg]);

  // return element for newArray, after executing something

2

  // return element for newArray, after executing something

3

  // return element for newArray, after executing something

3

  // return element for newArray, after executing something

}[, thisArg]);

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

  // return element for newArray, after executing something

3

  // return element for newArray, after executing something

  // return element for newArray, after executing something

Bisa ditoleransi, tapi berisik

Kesimpulan dan Langkah Selanjutnya

Dalam tutorial ini, Anda telah mempelajari cara kerja _______0_______26, _______0_______27, dan _______0_______28; . Anda telah melihat bahwa mereka semua memungkinkan Anda untuk menghindari keadaan bermutasi, yang menggunakan _______0_______39 dan _______0_______40 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