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

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!