Akademi JavaScript · Pelajaran

Gubahan Fungsi

Gabungkan fungsi kecil menjadi saluran pemprosesan.

Pelajaran 3 daripada 413 langkah

Gubahan Fungsi ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah Gubahan Fungsi?

Gubahan fungsi menggabungkan fungsi kecil menjadi satu fungsi. Menggubah f dan g menghasilkan fungsi yang menjadikan keluaran g sebagai masukan kepada f.

Secara matematik: compose(f, g)(x) = f(g(x)). Data mengalir dari kanan ke kiri.

Dua Fungsi Kecil

Gubahan bermula dengan fungsi mudah yang mempunyai satu tujuan. Berikut ialah dua transformasi yang akan kita gabungkan.

const double = x => x * 2;
const increment = x => x + 1;

console.log(double(5));
console.log(increment(5));

Menggubah Secara Manual

Gubahan yang paling jelas hanyalah memanggil satu fungsi pada hasil fungsi yang lain. Bacanya dari dalam ke luar: increment berjalan dahulu, kemudian double.

const double = x => x * 2;
const increment = x => x + 1;

const result = double(increment(5));
console.log(result);

Fungsi compose untuk Dua Fungsi

Jadikan corak itu sebagai compose yang boleh digunakan semula. Fungsi ini menerima f dan g, lalu mengembalikan fungsi baharu yang menggunakan g dahulu, kemudian f.

const compose = (f, g) => x => f(g(x));

const double = x => x * 2;
const increment = x => x + 1;

const doubleThenAfterIncrement = compose(double, increment);
console.log(doubleThenAfterIncrement(5));

Turutan Penting

Gubahan tidak bersifat komutatif. compose(f, g) berbeza daripada compose(g, f) kerana fungsi di sebelah kanan berjalan dahulu.

const compose = (f, g) => x => f(g(x));

const double = x => x * 2;
const increment = x => x + 1;

console.log(compose(double, increment)(5));
console.log(compose(increment, double)(5));

Bacaan dari Kanan ke Kiri

Dalam compose(a, b, c)(x), panggilan itu dikira sebagai a(b(c(x))). Fungsi yang paling kanan menyentuh masukan dahulu. Ingat arah ini untuk mengelakkan pepijat.

const compose = (f, g) => x => f(g(x));

const shout = s => s.toUpperCase();
const exclaim = s => s + '!';

const loud = compose(shout, exclaim);
console.log(loud('hello'));

Menggubah Transformasi Rentetan

Gubahan amat sesuai untuk alur pemprosesan teks: trim, huruf kecil, kemudian replace ruang, dengan setiap langkah menjadi fungsi kecil.

const compose = (f, g) => x => f(g(x));

const trim = s => s.trim();
const lower = s => s.toLowerCase();

const clean = compose(lower, trim);
console.log(clean('   HELLO World  '));

Gubahan dengan Nombor

Rantaian operasi matematik ialah contoh klasik. Setiap fungsi kekal mudah diuji secara berasingan.

const compose = (f, g) => x => f(g(x));

const square = x => x * x;
const negate = x => -x;

const negativeSquare = compose(negate, square);
console.log(negativeSquare(4));

Mengapa compose?

Gubahan memastikan setiap fungsi kekal fokus dan boleh digunakan semula, serta menghapuskan keserabutan panggilan bersarang. Daripada f(g(h(x))) yang bertaburan dalam kod anda, bina satu alur pemprosesan bernama dan gunakan semula alur itu.

const compose = (f, g) => x => f(g(x));

const toCents = d => Math.round(d * 100);
const addLabel = c => c + ' cents';

const priceLabel = compose(addLabel, toCents);
console.log(priceLabel(2.5));

Gubahan dan Penguraian Berantai Bersama

Fungsi yang diuraikan secara berantai boleh digubah dengan baik kerana setiap satunya menghasilkan fungsi satu argumen, tepat seperti yang diperlukan oleh gubahan.

const compose = (f, g) => x => f(g(x));
const add = a => b => a + b;
const multiply = a => b => a * b;

const addThenDouble = compose(multiply(2), add(3));
console.log(addThenDouble(5));

Ke Arah Banyak Fungsi

Setakat ini, compose mengendalikan dua fungsi. Gubahan sebenar menyokong apa-apa bilangan fungsi. Dalam pelajaran seterusnya, anda akan membina compose umum dan pasangannya yang bergerak dari kiri ke kanan, pipe, menggunakan reduce.

const compose = (f, g) => x => f(g(x));
const a = x => x + 1;
const b = x => x * 2;
const c = x => x - 3;

const combined = compose(a, compose(b, c));
console.log(combined(10));

Semakan Pantas

Jika compose = (f, g) => x => f(g(x)), apakah hasil compose(double, increment)(5) apabila double mendarab dengan 2 dan increment menambah 1?

Jawab dalam pelajaran interaktif

Ulang Kaji: Gubahan Fungsi

Anda telah mempelajari cara menggabungkan fungsi:

compose(f, g)(x) sama dengan f(g(x)), yang dikira dari kanan ke kiri.
Turutan penting: gubahan tidak bersifat komutatif.
Gubahan memastikan fungsi kekal kecil, bernama dan boleh digunakan semula.
Fungsi yang diuraikan secara berantai boleh digubah dengan kemas. Seterusnya, anda akan mengitlakannya kepada apa-apa bilangan fungsi.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 59
Pelajaran: 200

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Gubahan Fungsi” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Gubahan Fungsi”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Gubahan Fungsi”?

Gabungkan fungsi kecil menjadi saluran pemprosesan. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Gubahan Fungsi” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?

Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Akademi JavaScript