鏡頭是一種強大而優雅的方式，可以在函數式程式設計中關注和操作部分不可變資料結構。它們提供了一種在嵌套物件或陣列中獲取和設定值的機制，而無需更改原始資料。

什麼是鏡頭？

鏡頭是一流的抽象，它提供了一種存取和更新資料結構各部分的方法。透鏡通常由兩個函數定義：getter 和 setter。

• Getter：從資料結構中提取值的函數。
• Setter：更新資料結構中的值並傳回該結構的新副本的函數。

鏡頭對於處理不可變資料結構特別有用，因為它們允許在不改變原始資料的情況下進行更改。

鏡片的優點

1. 不變性：鏡頭有助於處理不可變的資料結構，確保原始資料不會被修改。
2. 模組化：鏡頭可讓您模組化資料存取和更新，讓您的程式碼更可重複使用且更易於維護。
3. 可組合性：可以組合鏡頭以專注於資料結構的嵌套部分，從而將複雜的資料操作分解為更簡單的可組合操作。

在 JavaScript 中實作鏡頭

讓我們從 JavaScript 中鏡頭的基本實作開始。

基本鏡頭實現

鏡頭可以透過 get 和 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 }

在此範例中，prop 會建立一個聚焦於物件的特定屬性的鏡頭。 get 方法檢索屬性的值，set 方法更新該值並傳回一個新物件。

構圖鏡頭

可以組合鏡頭來處理嵌套資料結構。在這裡，我們將創建一個實用程式來組合鏡頭。

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' } }

在此範例中，composeLenses 允許我們建立一個專注於地址物件內的城市屬性的鏡頭。這使得能夠以模組化和可重複使用的方式存取和更新嵌套屬性。

鏡頭的實際應用

鏡頭在不變性和模組化資料操作很重要的場景中特別有用，例如前端應用程式的狀態管理。

在 React 中管理狀態

在 React 應用程式中，鏡頭可用於以更實用且可預測的方式管理狀態更新。

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 (
    

      
City: {userAddressCityLens.get(state)}
       updateCity('Oz')}>Move to Oz
    
  );
};

export default App;

在此範例中，我們使用鏡頭來模組化 React 元件狀態中嵌套城市屬性的存取和更新。這種方法使狀態更新更可預測且更易於管理。