Pengenalan kepada Pengaturcaraan Fungsian dalam JavaScript: Kanta #9

Kanta ialah cara yang berkuasa dan elegan untuk memfokus dan memanipulasi bahagian struktur data tidak berubah dalam pengaturcaraan berfungsi. Mereka menyediakan mekanisme untuk mendapatkan dan menetapkan nilai dalam objek atau tatasusunan bersarang tanpa mengubah data asal.

Apakah Lensa?

Kanta ialah abstraksi kelas pertama yang menyediakan cara untuk mengakses dan mengemas kini bahagian struktur data. Kanta biasanya ditakrifkan oleh dua fungsi: pengambil dan penetap.

• Getter: Fungsi yang mengekstrak nilai daripada struktur data.
• Setter: Fungsi yang mengemas kini nilai dalam struktur data dan mengembalikan salinan struktur baharu.

Kanta amat berguna untuk bekerja dengan struktur data tidak berubah, kerana ia membenarkan perubahan dibuat tanpa mengubah data asal.

Kebaikan Lensa

1. Ketidakbolehubah: Kanta memudahkan kerja dengan struktur data tidak berubah, memastikan data asal tidak diubah suai.
2. Modulariti: Kanta membolehkan anda memodulasi akses dan kemas kini data, menjadikan kod anda lebih boleh digunakan semula dan lebih mudah diselenggara.
3. Kebolehkomposan: Kanta boleh digubah untuk memfokus pada bahagian bersarang struktur data, membolehkan manipulasi data yang kompleks dipecahkan kepada operasi yang lebih mudah dan boleh digubah.

Melaksanakan Lensa dalam JavaScript

Mari kita mulakan dengan pelaksanaan asas kanta dalam JavaScript.

Pelaksanaan Asas Kanta

Kanta boleh dilaksanakan sebagai objek dengan kaedah get dan set.

const lens = (getter, setter) => ({
  get: (obj) => getter(obj),
  set: (val, obj) => setter(val, obj),
});

const prop = (key) => lens(
  (obj) => obj[key],
  (val, obj) => ({ ...obj, [key]: val })
);

// Usage
const user = { name: 'Alice', age: 30 };

const nameLens = prop('name');

const userName = nameLens.get(user);
console.log(userName); // 'Alice'

const updatedUser = nameLens.set('Bob', user);
console.log(updatedUser); // { name: 'Bob', age: 30 }

Dalam contoh ini, prop mencipta kanta yang memfokuskan pada sifat tertentu objek. Kaedah get mendapatkan semula nilai harta dan kaedah yang ditetapkan mengemas kini nilai dan mengembalikan objek baharu.

Mengarang Kanta

Kanta boleh digubah untuk berfungsi dengan struktur data bersarang. Di sini, kami akan mencipta utiliti untuk mengarang kanta.

const composeLenses = (outerLens, innerLens) => ({
  get: (obj) => innerLens.get(outerLens.get(obj)),
  set: (val, obj) => outerLens.set(innerLens.set(val, outerLens.get(obj)), obj),
});

// Usage with nested data
const addressLens = prop('address');
const cityLens = prop('city');

const userAddressCityLens = composeLenses(addressLens, cityLens);

const user = {
  name: 'Alice',
  address: {
    city: 'Wonderland',
    zip: '12345',
  },
};

const userCity = userAddressCityLens.get(user);
console.log(userCity); // 'Wonderland'

const updatedUser = userAddressCityLens.set('Oz', user);
console.log(updatedUser); // { name: 'Alice', address: { city: 'Oz', zip: '12345' } }

Dalam contoh ini, composeLenses membolehkan kami mencipta lensa yang memfokuskan pada harta bandar di dalam objek alamat. Ini membolehkan akses dan kemas kini harta bersarang dalam cara modular dan boleh diguna semula.

Aplikasi Praktikal Kanta

Kanta amat berguna dalam senario di mana kebolehubahan dan manipulasi data modular adalah penting, seperti dalam pengurusan keadaan untuk aplikasi bahagian hadapan.

Menguruskan Keadaan dalam React

Dalam aplikasi React, kanta boleh digunakan untuk mengurus kemas kini keadaan dengan cara yang lebih berfungsi dan boleh diramal.

import React, { useState } from 'react';

const App = () => {
  const [state, setState] = useState({
    user: {
      name: 'Alice',
      address: {
        city: 'Wonderland',
      },
    },
  });

  const userLens = prop('user');
  const addressLens = prop('address');
  const cityLens = prop('city');

  const userAddressCityLens = composeLenses(userLens, composeLenses(addressLens, cityLens));

  const updateCity = (newCity) => {
    const newState = userAddressCityLens.set(newCity, state);
    setState(newState);
  };

  return (
    <div>
      <p>City: {userAddressCityLens.get(state)}</p>
      <button onClick={() => updateCity('Oz')}>Move to Oz</button>
    </div>
  );
};

export default App;

Dalam contoh ini, kami menggunakan kanta untuk memodulasi akses dan kemas kini harta bandar bersarang dalam keadaan komponen React. Pendekatan ini menjadikan kemas kini negeri lebih mudah diramal dan lebih mudah untuk diurus.

Atas ialah kandungan terperinci Pengenalan kepada Pengaturcaraan Fungsian dalam JavaScript: Kanta #9. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!