Cara menggunakan ARRAY.PROTOTYPE.SORT pada JavaScript

Salah satu pilar pemrograman fungsional adalah penggunaan khusus daftar dan operasi daftar. Dan hal-hal itu persis seperti apa terdengarnya: array dari berbagai hal, dan hal-hal yang kamu lakukan kepadanya. Tetapi pola pikir fungsional memperlakukannya sedikit berbeda dari yang kamu duga.

Artikel ini akan melihat lebih dekat pada apa yang saya suka sebut operasi daftar "big three":

var tasks = [

var tasks = [

var tasks = [

Ini juga berarti kamu tidak perlu menulis perulangan

var tasks = [

Ingin tahu? Mari kita selami.

Peta Dari Daftar ke Daftar

Seringkali, kita menemukan diri kita perlu mengambil array dan memodifikasi setiap elemen di dalamnya dengan cara yang persis sama. Contoh-contoh yang umum adalah mengkuadratkan setiap elemen dalam array angka, mengambil nama dari daftar pengguna, atau menjalankan regex pada suatu array string.

var tasks = [

var tasks = [

Ketika kamu memanggil

var tasks = [

Pada dasarnya,

var tasks = [

1. Item saat ini di dalam array
2. Indeks array dari item saat ini
3. Seluruh array yang kamu sebut map

Mari kita lihat beberapa kode.

var tasks = [ 43 dalam Prakteknya

Misalkan kita memiliki aplikasi yang mengelola berbagai tugasmu untuk hari itu. Setiap

var tasks = [

var tasks = [

var tasks = [

1

// Durations are in minutes

2

3

var tasks = [

4

5

  {

6

7

// Durations are in minutes

// Durations are in minutes

// Durations are in minutes

// Durations are in minutes

// Durations are in minutes

// Durations are in minutes

// Durations are in minutes

// Durations are in minutes

// Durations are in minutes

  {

2

2

2

2

2

2

2

2

// Durations are in minutes

2

3

  {

3

3

3

3

3

3

3

3

var tasks = [

var tasks = [

var tasks = [

var tasks = [

Katakanlah kita ingin membuat array baru hanya dengan nama setiap tugas, sehingga kita dapat melihat semua yang telah kita selesaikan hari ini. Dengan menggunakan perulangan 

var tasks = [

1

var tasks = [

2

3

var tasks = [

4

5

4

6

7

4

JavaScript juga menawarkan perulangan

var tasks = [

var tasks = [

1

4

2

3

4

4

5

5

6

5

7

5

Dengan menggunakan 

var tasks = [

1

5

2

3

  {

4

5

  {

Saya menyertakan parmeter

var tasks = [

var tasks = [

Ada beberapa perbedaan penting antara dua pendekatan tersebut:

1. Dengan menggunakan

   var tasks = [
   

   43, kamu tidak perlu mengelola keadaan perulangan

   var tasks = [
   

   46 mu sendiri.
2. Kamu dapat mengoperasikan elemen secara langsung, daripada harus mengindeks ke dalam array.
3. Kamu tidak perlu membuat array baru dan melakukan

   var tasks = [
   

   63 padanya.

   var tasks = [
   

   43 mengembalikan semua produk jadi sekaligus, jadi kita dapat dengan mudah menetapkan nilai kembalian ke variabel baru.
4. Kamu harus ingat untuk memasukkan pernyataan

   var tasks = [
   

   65 di callback-mu. Jika tidak, kamu akan mendapatkan array baru yang diisi dengan

   var tasks = [
   

   66.

Menghasilkan, semua fungsi yang akan kita lihat hari ini pada bagian karakteristik tersebut.

Fakta bahwa kita tidak harus mengelola keadaan perulangan secara manual membuat kode kita lebih sederhana dan lebih mudah dipelihara. Fakta bahwa kita dapat beroperasi secara langsung pada elemen daripada harus mengindeks ke dalam array membuat hal-hal lebih mudah dibaca.

Menggunakan perulangan

var tasks = [

var tasks = [

1. var tasks = [
   

   56 mengembalikan

   var tasks = [
   

   66, sehingga tidak bertautan dengan metode array lainnya.

   var tasks = [
   

   43 mengembalikan array, sehingga kamu bisa menautkannya dengan metode array lainnya.

2. var tasks = [
   

   43 mengembalikan array dengan produk jadi, daripada meminta kita untuk mem-mutasi array di dalam perulangan.

Menjaga jumlah tempat di mana kamu mengubah keadaan ke minimum absolut adalah prinsip penting dari pemrograman fungsional. Itu membuat kode lebih aman dan lebih dimengerti.

Sekarang juga saat yang tepat untuk menunjukkan bahwa jika kamu berada di Node, mengetes contoh ini di konsol browser Firefox, atau menggunakan Babel atau Traceur, kamu dapat menulis ini lebih singkat dengan fungsi panah ES6:

1

  {

Fungsi panah membiarkan kita meninggalkan kata kunci

var tasks = [

Itu tidak jauh lebih mudah dibaca daripada itu.

Gotcha

Callback yang kamu teruskan ke

var tasks = [

var tasks = [

var tasks = [

var tasks = [

var tasks = [

Jika kamu lupa,

var tasks = [

Untungnya, ini adalah satu-satunya gotcha dengan

var tasks = [

var tasks = [

Implementasi

Membaca implementasi adalah bagian penting dari pemahaman. Jadi, mari tulis

var tasks = [

1

  {

2

3

6

4

5

6

6

6

7

6

// Durations are in minutes

// Durations are in minutes

7

// Durations are in minutes

// Durations are in minutes

7

// Durations are in minutes

// Durations are in minutes

7

2

2

// Durations are in minutes

2

2

  {

Kode ini menerima array dan fungsi callback sebagai argumen. Ini kemudian membuat array baru; menjalankan callback pada setiap elemen pada array yang kita teruskan; mendorong hasil ke dalam array baru; dan mengembalikan array baru. Jika kamu menjalankan ini di konsolmu, kamu akan mendapatkan hasil yang sama seperti sebelumnya. Pastikan kamu menginisialisasi

var tasks = [

Meskipun kkita menggunakan perulangan for pada dasarnya, membungkusnya ke dalam fungsi menyembunyikan detail dan memungkinkan kita bekerja dengan abstraksi sebagai gantinya.

Itu membuat kode kita lebih bersifat deklaratif—ia mengatakan apa yang harus dilakukan, bukan bagaimana melakukannya. Kamu akan menghargai betapa kodemu ini dibuat lebih mudah dibaca, dipelihara, dan, erm, mudah di-debug.

Menyaring Kebisingan

Selanjutnya dari operasi array kita adalah

var tasks = [

Seperti

var tasks = [

var tasks = [

var tasks = [

var tasks = [

var tasks = [

Juga seperti

var tasks = [

var tasks = [

1. Item saat ini
2. Indeks saat ini
3. Array yang kamu sebut

   var tasks = [
   

   44

var tasks = [ 44 dalam Prakteknya

Mari kita lihat kembali contoh tugas kita. Daripada menarik nama setiap tugas, katakanlah saya ingin mendapatkan daftar tugas yang membutuhkan waktu dua jam atau lebih untuk menyelesaikannya.

Dengan menggunakan

var tasks = [

1

// Durations are in minutes

2

3

// Durations are in minutes

4

// Durations are in minutes

5

// Durations are in minutes

6

// Durations are in minutes

7

  {

Dengan

var tasks = [

1

// Durations are in minutes

2

// Durations are in minutes

3

  {

4

5

// Durations are in minutes

6

// Durations are in minutes

Di sini, saya telah melanjutkan dan meninggalkan argumen

var tasks = [

var tasks = [

Sama seperti

var tasks = [

var tasks = [

• menghindari mutasi array di dalam perulangan 

  var tasks = [
  

  56 atau

  var tasks = [
  

  46
• menetapkan hasilnya langsung ke variabel baru, daripada mendorong ke dalam array yang kita tentukan di tempat lain

Gotcha

Callback yang kamu berikan ke

var tasks = [

var tasks = [

Jika kamu lupa pernyataan return, callback-mu akan mengembalikan

var tasks = [

var tasks = [

4

Jika kamu menuju ke rute lain, dan mengembalikan sesuatu yang tidak secara eksplisit

var tasks = [

4

var tasks = [

Selalu pastikan callbackmu menyertakan pernyataan return eksplisit. Dan selalu pastikan callback-mu di

var tasks = [

var tasks = [

4

Implementasi

Sekali lagi, cara terbaik untuk memahami sepotong kode adalah ... yah, dengan menulisnya. Mari kita gulirkan

var tasks = [

1

// Durations are in minutes

2

3

// Durations are in minutes

4

5

6

6

// Durations are in minutes

7

// Durations are in minutes

// Durations are in minutes

// Durations are in minutes

// Durations are in minutes

6

// Durations are in minutes

// Durations are in minutes

// Durations are in minutes

// Durations are in minutes

// Durations are in minutes

7

Mengurangi Array

var tasks = [

var tasks = [

var tasks = [

Sama seperti

var tasks = [

var tasks = [

var tasks = [

var tasks = [

var tasks = [

1. Nilai saat ini
2. Nilai sebelumnya
3. Indeks saat ini
4. Array yang kamu sebut

   var tasks = [
   

   45

Perhatikan bahwa callback mendapat nilai sebelumnya pada setiap perulangan. Pada perulangan pertama, tidak ada nilai sebelumnya. Inilah sebabnya mengapa kamu memiliki pilihan untuk meneruskan

var tasks = [

Akhirnya, ingatlah bahwa

var tasks = [

var tasks = [ 45 dalam Prakteknya

Karena

var tasks = [

Katakanlah kita ingin mencari jumlah daftar angka. Menggunakan perulangan, itu terlihat seperti ini:

1

// Durations are in minutes

2

// Durations are in minutes

3

5

4

// Durations are in minutes

5

// Durations are in minutes

6

  {

Meskipun ini bukan kasus penggunaan yang buruk untuk

var tasks = [

var tasks = [

var tasks = [

1

// Durations are in minutes

2

// Durations are in minutes

3

// Durations are in minutes

Pertama, kita memanggil 

var tasks = [

4

4

var tasks = [

4

Jika kita selangkah demi selangkah, tampilannya seperti ini:

Jika kamu bukan penggemar tabel, jalankan cuplikan ini di konsol:

1

// Durations are in minutes

2

// Durations are in minutes

3

// Durations are in minutes

4

// Durations are in minutes

5

// Durations are in minutes

6

// Durations are in minutes

7

// Durations are in minutes

// Durations are in minutes

// Durations are in minutes

// Durations are in minutes

Ringkasnya:

var tasks = [

Mari kita kembali ke contoh tugas kita. Kita telah mendapatkan daftar nama tugas dari

var tasks = [

var tasks = [

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

Menggunakan perulangan

var tasks = [

1

// Durations are in minutes

2

5

3

4

4

// Durations are in minutes

5

// Durations are in minutes

6

// Durations are in minutes

7

5

Dengan

var tasks = [

1

2

2

2

3

2

4

5

2

6

2

Mudah.

Itu hampir seluruh yang ada untuk hal itu. Hampir, karena JavaScript memberi kita satu metode yang lebih sedikit diketahui, yang disebut

4

var tasks = [

1

2

2

2

3

2

4

  {

5

6

2

4

1

2

2

2

3

2

4

5

5

6

2

Saya menggunakan

var tasks = [

4

Gotcha

Tiga gotcha ​​besar dengan

var tasks = [

1. Lupa untuk melakukan

   var tasks = [
   

   65
2. Melupakan nilai awal
3. Mengharapkan array saat

   var tasks = [
   

   45 mengembalikan satu nilai

Untungnya, dua yang pertama mudah dihindari. Memutuskan apa nilai awalmu harus bergantung pada apa yang kamu lakukan, tetapi kamu akan cepat menguasainya.

Yang terakhir mungkin tampak agak aneh. Jika

var tasks = [

Ada beberapa alasan bagus untuk itu. Pertama,

var tasks = [

Kedua, jika

var tasks = [

var tasks = [

var tasks = [

Implementasi

Saatnya untuk tampilan terakhir kita pada dasarnya. Seperti biasa, Mozilla memiliki polyfill antipeluru untuk reduce jika kamu ingin memeriksanya.

1

2

2

2

3

5

4

2

5

2

6

6

7

5

// Durations are in minutes

2

// Durations are in minutes

7

Dua hal yang perlu diperhatikan di sini:

1. Kali ini, saya menggunakan nama

   4

   53 daripada 

   4

   34. Ini adalah apa yang biasanya kamu lihat di alam liar.
2. Saya menetapkan

   4

   53 sebagai nilai awal, jika pengguna menyediakannya, dan default-nya ke

   4

   32, jika tidak. Ini adalah bagaimana

   var tasks = [
   

   45 yang nyata berperilaku, juga.

Menggunakannya bersamaan: Map, Filter, Reduce, dan Chainability

Pada titik ini, kamu mungkin tidak begitu terkesan.

Cukup adil:

var tasks = [

var tasks = [

var tasks = [

Setelah semua, kekuatan sejati mereka terletak pada keterkaitan mereka.

Katakanlah saya ingin melakukan hal berikut:

1. Mengumpulkan tugas selama dua hari.
2. Mengonversi durasi tugas ke jam, bukan menit.
3. Memfilter semua yang membutuhkan waktu dua jam atau lebih.
4. Menjumlahkan semuanya.
5. Mengalikan hasilnya dengan tarif per jam untuk penagihan.
6. Menghasilkan output jumlah dolar yang diformat.

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

1

2

2

2

3

2

4

2

5

2

6

2

7

2

// Durations are in minutes

2

// Durations are in minutes

// Durations are in minutes

// Durations are in minutes

2

// Durations are in minutes

// Durations are in minutes

2

// Durations are in minutes

2

2

2

2

2

2

2

2

2

2

2

2

2

2

2

3

2

3

2

3

2

3

// Durations are in minutes

3

2

3

5

3

3

Dan sekarang, transformasi kita yang indah:

1

3

2

3

3

3

4

3

5

3

6

3

7

3

// Durations are in minutes

3

// Durations are in minutes

3

// Durations are in minutes

3

// Durations are in minutes

3

// Durations are in minutes

3

// Durations are in minutes

3

2

3

2

3

Atau, lebih ringkas:

1

3

2

3

3

3

4

3

5

3

6

3

7

3

// Durations are in minutes

3

// Durations are in minutes

3

// Durations are in minutes

3

// Durations are in minutes

3

// Durations are in minutes

3

// Durations are in minutes

3

2

3

Jika kamu sudah sampai sejauh ini, ini seharusnya cukup mudah. Ada dua sedikit keanehan yang bisa dijelaskan.

Pertama, pada baris 10, saya seharusnya menulis:

1

3

2

3

3

3

4

3

Dua hal yang perlu dijelaskan di sini:

1. Tanda plus di depan

   4

   53 dan

   4

   62 memaksakan nilai-nilainya ke angka. Jika kamu tidak melakukan ini, nilai kembalian akan menjadi string yang agak tidak berguna,

   4

   63.
2. Jika tidak membungkus jumlah itu dalam tanda kurung,

   var tasks = [
   

   45 akan memuntahkan nilai tunggal, bukan array. Itu akan berakhir dengan melempar

   4

   65, karena kamu hanya dapat menggunakan

   var tasks = [
   

   43 pada array!
   

Bit kedua yang mungkin membuatmu sedikit tidak nyaman adalah

var tasks = [

1

3

2

3

3

3

4

3

5

3

6

  {

Itu memanggil

var tasks = [

var tasks = [

Cara lain untuk melakukan ini adalah dengan menghapus panggilan untuk mengurangi, dan mengindeks ke dalam array yang memuntahkan

var tasks = [

1

3

2

3

3

3

4

3

5

3

6

3

7

3

// Durations are in minutes

3

// Durations are in minutes

3

// Durations are in minutes

var tasks = [

// Durations are in minutes

var tasks = [

// Durations are in minutes

var tasks = [

// Durations are in minutes

var tasks = [

Itu sangat benar. Jika kamu lebih nyaman menggunakan indeks array, silakan saja.

Tetapi saya mendorongmu untuk tidak melakukannya. Salah satu cara paling ampuh untuk menggunakan fungsi-fungsi ini adalah dalam bidang pemrograman reaktif, di mana kamu tidak akan bebas menggunakan indeks array. Menendang kebiasaan itu sekarang akan membuat teknik belajar reaktif jauh lebih mudah dalam keseluruhannya.

Akhirnya, mari kita lihat bagaimana teman kita perulangan

var tasks = [

1

var tasks = [

2

var tasks = [

3

var tasks = [

4

var tasks = [

5

var tasks = [

6

7

var tasks = [

// Durations are in minutes

var tasks = [

// Durations are in minutes

5

// Durations are in minutes

var tasks = [

// Durations are in minutes

var tasks = [

// Durations are in minutes

var tasks = [

// Durations are in minutes

5

2

2

var tasks = [

2

var tasks = [

2

5

2

2

2

var tasks = [

Ditoleransi, tetapi ramai.

Kesimpulan & Langkah Berikutnya

Pada tutorial ini, kamu telah belajar bagaimana

var tasks = [

var tasks = [

var tasks = [

var tasks = [

4

Sekarang, saya yakin kamu ingin berlatih dan membaca lebih lanjut. Berikut adalah tiga saran utama saya untuk ke mana harus menuju selanjutnya:

1. Latihan yang luar biasa dari Jafar Husain tentang Pemrograman Fungsional dalam JavaScript, lengkap dengan pengenalan yang solid untuk Rx.js
2. Pengajar Kursus Envato Tuts+ Jason Rhodes tentang Pemrograman Fungsional dalam JavaScript
3. Panduan Yang Paling Memadai untuk Pemrograman Fungsional, yang lebih mendalam tentang mengapa kita menghindari mutasi, dan pemikiran fungsional secara umum

JavaScript telah menjadi salah satu bahasa de-facto yang bekerja di web. Bukan tanpa alur pembelajaran, dan ada banyak framework dan library untuk membuatmu sibuk juga. Jika kamu mencari sumber daya tambahan untuk dipelajari atau digunakan dalam pekerjaanmu, periksa apa yang kami miliki di Envato marketplace.

Jika kamu ingin lebih banyak tentang hal semacam ini, cek profil saya dari waktu ke waktu; tangkap saya di Twitter (@PelekeS); atau klik blog saya di http://peleke.me.

Pertanyaan, komentar, atau kebingungan? Biarkan mereka di bawah, dan saya akan melakukan yang terbaik untuk kembali ke masing-masing secara individual.