Rumah > hujung hadapan web > tutorial js > Currying: Membuka Kunci Kuasa Besar Modular JavaScript

Currying: Membuka Kunci Kuasa Besar Modular JavaScript

Susan Sarandon
Lepaskan: 2024-12-09 12:02:24
asal
894 orang telah melayarinya

Currying: Unlocking the Modular Superpower of JavaScript

Jadual Kandungan

  • pengenalan
  • Apa yang Kari?
  • Panduan Langkah demi Langkah untuk Karipap
  • Mengapa Anda Perlu Peduli Tentang Kari?
  • Mengautomasikan Kari (Kerana Kehidupan Terlalu Singkat)
  • TypeScript dan Currying: Kawan Selamanya
  • Nota Pantas tentang Perangkap
  • Kesimpulan

Pengenalan

Pernah melihat kod anda dan berfikir, "Wah, ini lebih teratur seperti laci stokin saya?" Nah, anda tidak bersendirian. JavaScript, untuk semua keanehan dan daya tarikannya, boleh menjadi kucar-kacir. Masukkan kari—teknik ajaib daripada pengaturcaraan berfungsi yang menjadikan kod anda modular, boleh diguna semula dan berani saya katakan, elegan. Jika ini terdengar seperti sihir, pasanglah. Kami akan menyelam.


Kari Apa?

Kari kedengaran seperti sesuatu yang anda akan lakukan di dapur, tetapi dalam JavaScript, ini adalah seni mengubah fungsi dengan berbilang argumen kepada urutan fungsi, masing-masing mengambil satu hujah. Anggap ia sebagai memecahkan resipi yang rumit kepada langkah-langkah bersaiz gigitan.

Ini contoh mudah:

function multiply(a: number, b: number) {
  return a * b;
}
Salin selepas log masuk
Salin selepas log masuk

Sejuk kan? Tetapi fungsi ini menuntut kedua-dua hujah di muka. Jika anda tidak bersedia untuk komited kepada kedua-duanya (siapa sebenarnya?), kari membolehkan anda memanggilnya seperti ini:

const curriedMultiply = (a: number) => (b: number) => a * b;

// Create reusable specialized functions
const double = curriedMultiply(2);
const triple = curriedMultiply(3);

console.log(double(4)); // Output: 8
console.log(triple(4)); // Output: 12
Salin selepas log masuk
Salin selepas log masuk

Boom! Kini anda boleh meluluskan satu hujah pada satu masa, seperti memasang sandwic. Memandangkan anda telah melihat fungsi kari yang mudah, mari belajar cara membina satu langkah demi langkah.


Panduan Langkah demi Langkah untuk Karipap

  1. Mulakan dengan Fungsi Pelbagai Hujah
    Bayangkan anda mempunyai fungsi yang memerlukan beberapa hujah:

    function add(a: number, b: number, c: number) {
      return a + b + c;
    }
    
    Salin selepas log masuk
    Salin selepas log masuk
  2. Balut Dalam Lapisan
    Ubah ia menjadi urutan fungsi:

    const curriedAdd = 
      (a: number) => (b: number) => (c: number) => a + b + c;
    
    Salin selepas log masuk
    Salin selepas log masuk
  3. Luluskan Hujah Satu Persatu
    Panggil setiap lapisan satu demi satu:

    const step1 = curriedAdd(2); // Fixes the first argument (a = 2)
    const step2 = step1(3);      // Fixes the second argument (b = 3)
    const result = step2(4);     // Fixes the third argument (c = 4)
    
    console.log(result);         // Output: 9
    
    Salin selepas log masuk
    Salin selepas log masuk
  4. Untung daripada Fleksibiliti
    Kini anda mempunyai langkah kecil yang boleh diguna semula yang menjadikan kod anda lebih modular.


Mengapa Anda Perlu Mementingkan Karipap?

Karipap mungkin kedengaran mewah, tetapi ia mempunyai faedah dunia nyata:

  • Modulariti: Pecahkan fungsi besar kepada kepingan kecil yang boleh diuji.
  • Kebolehgunaan semula: Gunakan kod sedia ada untuk mencipta versi fungsi khusus.
  • Kebolehbacaan: Kod anda menjadi jelas, seperti novel yang ditulis dengan baik (atau sekurang-kurangnya yang baik).

Mari kita luangkan sedikit masa untuk mengingati sebab kebolehbacaan penting. Kod bukan sahaja ditulis untuk mesin-mereka akan memahami apa sahaja yang anda lemparkan kepada mereka. Ia ditulis untuk manusia—rakan sekerja anda, diri masa depan anda dan orang seterusnya yang perlu mengubahnya. Kod yang baik harus bertujuan untuk mudah difahami, diuji dan diubah suai. Kari membantu mencapai matlamat ini dengan memecahkan logik kepada kepingan yang lebih kecil dan jelas yang masuk akal sepintas lalu.

Katakan anda sedang menapis senarai objek:

function multiply(a: number, b: number) {
  return a * b;
}
Salin selepas log masuk
Salin selepas log masuk

Atau mengira cukai:

const curriedMultiply = (a: number) => (b: number) => a * b;

// Create reusable specialized functions
const double = curriedMultiply(2);
const triple = curriedMultiply(3);

console.log(double(4)); // Output: 8
console.log(triple(4)); // Output: 12
Salin selepas log masuk
Salin selepas log masuk

Setiap fungsi melakukan satu perkara, menjadikan kod anda lebih mudah dibaca, difahami dan diuji. Dengan mencipta fungsi yang lebih kecil dan khusus, kari menjadikan logik kompleks menjadi mudah, boleh digunakan semula dan boleh diselenggara untuk manusia yang akan mengusahakannya nanti.


Mengautomasikan Karipap (Kerana Kehidupan Terlalu Singkat)

Menaip semua fungsi bersarang tersebut secara manual? Tidak terima kasih. Mari mengautomasikan kari:

function add(a: number, b: number, c: number) {
  return a + b + c;
}
Salin selepas log masuk
Salin selepas log masuk

Begini cara ia berfungsi:

  1. Jika bilangan argumen sepadan dengan fungsi asal, ia akan memanggil fungsi tersebut.
  2. Jika tidak, ia mengembalikan fungsi baharu yang menunggu lebih banyak hujah.

Contoh:

const curriedAdd = 
  (a: number) => (b: number) => (c: number) => a + b + c;
Salin selepas log masuk
Salin selepas log masuk

Ia seperti mesin layan diri untuk hujah: masukkan satu demi satu atau sekaligus.


TypeScript dan Currying: Kawan Selamanya

Ambil kari ke peringkat seterusnya dengan keselamatan taip dalam TypeScript:

const step1 = curriedAdd(2); // Fixes the first argument (a = 2)
const step2 = step1(3);      // Fixes the second argument (b = 3)
const result = step2(4);     // Fixes the third argument (c = 4)

console.log(result);         // Output: 9
Salin selepas log masuk
Salin selepas log masuk

Contoh dengan TypeScript:

const filterByKey = (key: string) => (value: any) => (data: any[]) =>
  data.filter((item) => item[key] === value);

// Create a reusable filter for colors
const filterByColor = filterByKey("color");
const redItems = filterByColor("red");

console.log(redItems([{ color: "red" }, { color: "blue" }])); 
// Output: [{ color: "red" }]
Salin selepas log masuk

IDE anda akan membimbing anda setiap langkah.


Nota Pantas tentang Perangkap

Fungsi kari kehilangan konteks asalnya. Jika anda perlu menggunakan kaedah kelas dengan kari, gunakan fungsi .bind(this) atau anak panah.


Kesimpulan ?

Kari adalah seperti menaik taraf permainan pengekodan anda dengan kod cheat. Dengan memecahkan fungsi kepada bahagian yang lebih kecil dan boleh diurus, anda memperoleh fleksibiliti, kebolehbacaan dan rasa pencapaian (atau sekurang-kurangnya kurang sakit kepala penyahpepijatan). Sama ada anda mengautomasikannya atau menulisnya dengan tangan, kari mengubah kod anda menjadi kuasa modular yang bersih.

Seperti yang Haskell Curry (lelaki di sebalik nama itu) mungkin pernah berkata:

“Tulis lebih sedikit, lakukan lebih banyak… satu hujah pada satu masa!”

Atas ialah kandungan terperinci Currying: Membuka Kunci Kuasa Besar Modular JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan