Apakah itu Pengaturcaraan Fungsian, dan Bagaimana Anda Boleh Melakukannya dalam JavaScript?

Anda: “Hei, saya terus mendengar tentang pengaturcaraan berfungsi. Bunyinya bagus, tetapi apakah sebenarnya, dan bagaimana ia berbeza daripada apa yang saya sudah lakukan dalam JavaScript?”

Saya: Soalan yang bagus! Mari kita pecahkan langkah demi langkah dan bandingkan pengaturcaraan berfungsi (FP) dengan cara penting pengekodan tradisional.

---

? Apakah Perbezaan Antara Fungsi dan Imperatif?

Dalam pengaturcaraan imperatif, anda menulis arahan langkah demi langkah tentang cara melakukan sesuatu. Ini semua tentang urutan tugas—mengemas kini pembolehubah, menggunakan gelung dan mengubah suai keadaan secara langsung.

Dalam pengaturcaraan berfungsi, anda menumpukan pada apa yang anda mahu lakukan. Anda menggunakan fungsi tulen, mengelakkan mutasi langsung dan memanfaatkan alat pengisytiharan seperti peta, penapis dan pengurangan.

Mari kita lihat ini dengan contoh bersebelahan menggunakan senario CRUD (Buat, Baca, Kemas Kini, Padam) untuk mengurus senarai pengguna.

---

?️ Contoh 1: Menambah Pengguna

Cara Imperatif

Berikut ialah contoh penting di mana kita mengubah tatasusunan asal:

let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

function addUser(users, newUser) {
  users.push(newUser); // Directly modifies the array
}

addUser(users, { id: 3, name: 'Charlie' });
console.log(users);

Isu:

1. Mutasi: Kaedah push() mengubah suai tatasusunan asal.
2. Kesan Sampingan: Jika bahagian lain kod bergantung pada pengguna, ia mungkin terjejas secara tidak dijangka.

---

Cara Berfungsi

Berikut ialah pendekatan berfungsi, di mana kita mengembalikan tatasusunan baharu dan bukannya mengubahnya:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const addUser = (users, newUser) => [...users, newUser]; // Returns a new array

const newUsers = addUser(users, { id: 3, name: 'Charlie' });
console.log('Original:', users);
console.log('New:', newUsers);

Faedah:

1. Tiada Mutasi: Tatasusunan pengguna asal kekal tidak disentuh.
2. Boleh diramal: Fungsi tulen memudahkan untuk memahami tingkah laku.

---

?️ Contoh 2: Mengemas kini Pengguna

Cara Imperatif

Berikut ialah contoh di mana kita menukar objek secara langsung di dalam tatasusunan:

let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

function updateUser(users, id, newName) {
  for (let i = 0; i < users.length; i++) {
    if (users[i].id === id) {
      users[i].name = newName; // Directly mutates the object
      break;
    }
  }
}

updateUser(users, 1, 'Alicia');
console.log(users);

Isu:

1. Mutasi: Objek di dalam tatasusunan dikemas kini secara langsung.
2. Verbosity: Gelung for secara jelas memberitahu komputer cara untuk mengemas kini pengguna.

---

Cara Berfungsi

Begini cara kami melakukannya secara berfungsi menggunakan peta dan kebolehubah:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const updateUser = (users, id, newName) =>
  users.map(user =>
    user.id === id ? { ...user, name: newName } : user
  );

const updatedUsers = updateUser(users, 1, 'Alicia');
console.log('Original:', users);
console.log('Updated:', updatedUsers);

Faedah:

1. Tiada Mutasi: Kami mengembalikan tatasusunan baharu dan membiarkan tatasusunan asal tidak disentuh.
2. Deklaratif: peta memfokuskan pada apa yang kita mahu—mengubah tatasusunan—tanpa mengurus gelung secara eksplisit.

---

?️ Contoh 3: Memadam Pengguna

Cara Imperatif

Berikut ialah versi penting menggunakan gelung dan pengubahsuaian langsung:

let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

function addUser(users, newUser) {
  users.push(newUser); // Directly modifies the array
}

addUser(users, { id: 3, name: 'Charlie' });
console.log(users);

Isu:

1. Mutasi: splice() mengubah suai tatasusunan asal.
2. Kerumitan: Gelung manual menjadikannya lebih sukar untuk dibaca.

---

Cara Berfungsi

Menggunakan penapis, kami boleh menyatakan niat secara deklaratif:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const addUser = (users, newUser) => [...users, newUser]; // Returns a new array

const newUsers = addUser(users, { id: 3, name: 'Charlie' });
console.log('Original:', users);
console.log('New:', newUsers);

Faedah:

1. Tiada Mutasi: penapis mencipta tatasusunan baharu.
2. Bersih & Boleh Dibaca: Kod tersebut menyampaikan maksud dengan jelas—menyimpan pengguna kecuali pengguna yang mempunyai ID yang diberikan.

---

? Jadual Ringkasan: Fungsian lwn Imperatif

Aspect	Imperative	Functional
Data Mutation	Mutates the original data (e.g., push, splice)	Avoids mutation; creates new data structures
Readability	Step-by-step, more verbose	Declarative and concise
Side Effects	More prone to unexpected side effects	Pure functions eliminate side effects
Focus	How to achieve a task (manual looping)	What to achieve (use higher-order functions)
Tools Used	Loops, conditionals	map, filter, reduce, spread operator

Aspek

---

Imperatif

Fungsi Mutasi Data

Memutasi data asal (cth., tolak, sambung) Mengelakkan mutasi; mencipta struktur data baharu

Kebolehbacaan

Langkah demi langkah, lebih bertele-tele Deklaratif dan ringkas Kesan Sampingan Lebih terdedah kepada kesan sampingan yang tidak dijangka Fungsi tulen menghapuskan kesan sampingan

Fokus

Bagaimana untuk mencapai tugas (gelung manual)

Apa yang hendak dicapai (gunakan fungsi tertib lebih tinggi) Alat Digunakan Gelung, bersyarat peta, tapis, kurangkan, sebarkan operator

---

? Mengapa Memilih Pengaturcaraan Fungsian?

Kod anda menjadi lebih mudah untuk

menaakul dan menguji. Mengelakkan kesan sampingan menjadikan pepijat kurang berkemungkinan. Ia lebih ringkas

dan

deklaratif, mengurangkan beban mental.

Anda: “Faham! Pengaturcaraan berfungsi memberi tumpuan kepada menulis kod yang boleh diramal dan bersih tanpa mengubah data. Dan ia lebih mudah dibaca!” Saya: Betul sekali! Dengan beralih daripada imperatif kepada berfungsi, anda akan membuka kunci kuasa sebenar JavaScript. Mulakan secara kecil-kecilan—gunakan peta, tapis dan kurangkan—dan tidak lama lagi anda akan mengekod secara berfungsi seperti seorang profesional. Bersedia untuk mencubanya? Diri masa depan anda akan berterima kasih kepada anda! ?

Atas ialah kandungan terperinci Apakah itu Pengaturcaraan Fungsian, dan Bagaimana Anda Boleh Melakukannya dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!