1. Langkah pertama
2. Gabungkan fungsinya
3. Penggunaan parsial (kari)
4. Pemrograman deklaratif
5. Notasi klasik
6. Kekekalan dan objek
7. Kekekalan dan array
8. Lensa
9. Kesimpulan
Posting ini adalah bagian ketujuh dari serangkaian artikel pemrograman fungsional yang berjudul Ramda Style Thinking.
Pada bagian keenam, kita berbicara tentang bekerja dengan objek JavaScript dalam gaya fungsional dan tidak berubah.
Dalam posting ini kita akan berbicara tentang pekerjaan yang mirip dengan array.
Membaca elemen array
Pada bagian keenam, kami belajar tentang berbagai fungsi Ramda untuk membaca properti objek, seperti prop , pick dan has . Ramda bahkan memiliki lebih banyak metode untuk membaca elemen array.
Setara dengan prop untuk array adalah n ; padanan untuk pick adalah slice , dan padanan untuk has adalah berisi . Mari kita lihat mereka.
const numbers = [10, 20, 30, 40, 50, 60] nth(3, numbers) // => 40 ( ) nth(-2, numbers) // => 50 ( ) slice(2, 5, numbers) // => [30, 40, 50] (. ) contains(20, numbers) // => true
Slice mengambil dua indeks dan mengembalikan subarray yang dimulai pada indeks pertama (mulai dari nol) dan mencakup semua elemen hingga indeks kedua, tetapi tidak termasuk elemen indeks ini.
Mendapatkan akses ke elemen pertama dan terakhir dari array cukup umum, sehingga Ramda menyediakan fungsi singkat untuk kasus ini, head dan terakhir . Ini juga menyediakan fungsi untuk mendapatkan semua elemen kecuali yang pertama ( ekor ), semua kecuali yang terakhir ( init ), elemen N pertama ( take (N) ), dan elemen N terakhir ( takeLast (N) ). Mari kita lihat mereka beraksi.
const numbers = [10, 20, 30, 40, 50, 60] head(numbers) // => 10 tail(numbers) // => [20, 30, 40, 50, 60] last(numbers) // => 60 init(numbers) // => [10, 20, 30, 40, 50] take(3, numbers) // => [10, 20, 30] takeLast(3, numbers) // => [40, 50, 60]
Tambahkan, perbarui, dan hapus elemen array
Mempelajari cara bekerja dengan objek, kami belajar tentang fungsi assoc , dissoc dan omit untuk menambah, memperbarui, dan menghapus properti.
Karena array memiliki struktur data yang terurut, kami memiliki beberapa metode yang melakukan pekerjaan yang sama dengan assoc untuk objek. Yang paling umum adalah memasukkan dan memperbarui , tetapi Ramda juga menyediakan metode menambahkan dan menambahkan untuk kasus-kasus khas menambahkan elemen ke awal dan akhir array. insert , append , dan prepend menambahkan elemen baru ke array; update "menggantikan" elemen tertentu dalam array dengan nilai baru.
Seperti yang dapat Anda harapkan dari pustaka fungsional, semua fungsi ini mengembalikan array baru dengan perubahan yang diharapkan; array asli tidak pernah berubah.
const numbers = [10, 20, 30, 40, 50, 60] insert(3, 35, numbers) // => [10, 20, 30, 35, 40, 50, 60] append(70, numbers) // => [10, 20, 30, 40, 50, 60, 70] prepend(0, numbers) // => [0, 10, 20, 30, 40, 50, 60] update(1, 15, numbers) // => [10, 15, 30, 40, 50, 60]
Untuk menggabungkan dua objek menjadi satu, kami sebelumnya belajar tentang metode merge . Ramda juga menyediakan metode concat untuk melakukan operasi yang sama dengan array.
const numbers = [10, 20, 30, 40, 50, 60] concat(numbers, [70, 80, 90]) // => [10, 20, 30, 40, 50, 60, 70, 80, 90]
Perhatikan bahwa array kedua telah bergabung dengan yang pertama. Ini tampak logis ketika menggunakan metode ini secara terpisah dari kode lain, tetapi, seperti dengan merge , logika ini mungkin tidak benar-benar mengarah pada apa yang kita harapkan jika kita menggunakan metode ini dalam pipeline kita. Saya merasa berguna untuk menulis fungsi pembantu, concatAfter : const concatAfter = flip(concat) , untuk menggunakannya di jalur pipa saya.
Ramda juga menyediakan beberapa opsi untuk menghapus item. hapus menghapus item berdasarkan indeks mereka, sementara tanpa menghapusnya berdasarkan nilainya. Ada juga metode seperti drop and dropLast untuk kasus-kasus tipikal ketika kita menghapus elemen dari awal atau akhir array.
const numbers = [10, 20, 30, 40, 50, 60] remove(2, 3, numbers) // => [10, 20, 60] without([30, 40, 50], numbers) // => [10, 20, 60] drop(3, numbers) // => [40, 50, 60] dropLast(3, numbers) // => [10, 20, 30]
Perhatikan bahwa remove menerima indeks dan jumlah, sementara slice menerima dua indeks. Ketidakkonsistenan ini dapat membingungkan jika Anda tidak mengetahuinya.
Konversi elemen
Seperti halnya objek, kami mungkin ingin memperbarui elemen array dengan menerapkan fungsi ke nilai asli.
const numbers = [10, 20, 30, 40, 50, 60] // 10 update(2, multiply(10, nth(2, numbers)), numbers) // => [10, 20, 300, 40, 50, 60]
Untuk menyederhanakan kasus khas ini, Ramda menyediakan metode penyesuaian yang berfungsi seperti evolve untuk objek. Tetapi tidak seperti evolve , adjust karya hanya dengan satu elemen array.
const numbers = [10, 20, 30, 40, 50, 60] // 10 adjust(multiply(10), 2, numbers)
Perhatikan bahwa dua argumen pertama untuk adjust berbalik ketika membandingkannya dengan update . Ini mungkin sumber kesalahan, tetapi masuk akal ketika Anda mempertimbangkan aplikasi parsial. Anda mungkin ingin melakukan adjust(multiply(10)) untuk diri Anda dan selanjutnya tentukan indeks array mana yang akan diubah menggunakannya.
Kesimpulan
Sekarang kami memiliki alat untuk bekerja dengan array dan objek dalam gaya deklaratif dan abadi. Ini memungkinkan kita untuk membangun program yang terdiri dari blok bangunan kecil yang fungsional, menggabungkan fungsi yang akan melakukan apa yang kita butuhkan, dan semua ini tanpa mengubah semua struktur data kita.
Selanjutnya
Kami telah belajar cara membaca, memperbarui, dan mengubah properti objek dan elemen array. Ramda menyediakan alat dasar lainnya untuk melakukan operasi ini, lensa. Artikel lensa berikutnya akan menunjukkan kepada kita bagaimana cara kerjanya.