了解 JavaScript 不變性和引用型-js教程-PHP中文網

Understanding JavaScript Immutability and Reference Types

JavaScript 關於不變性和引用類型的行為是基礎性的，但經常被誤解。不變性確保了資料的穩定性，而理解引用類型對於避免意外的副作用至關重要。讓我們詳細探討這些概念，並提供高級範例和實用函數，以幫助您有效地利用它們的力量。

JavaScript 中的不變性

不變性是指物件的狀態在創建後不能更改的概念。在 JavaScript 中，原始值（例如數字、字串、布林值）本質上是不可變的，而引用類型（例如物件、陣列）預設是可變的。

為什麼不變性很重要

可預測的狀態管理
更輕鬆的調試
防止函數中的副作用

可變資料與不可變資料的範例

// Mutable Example
const mutableArray = [1, 2, 3];
mutableArray.push(4); // The original array is modified
console.log(mutableArray); // [1, 2, 3, 4]

// Immutable Example
const immutableArray = [1, 2, 3];
const newArray = [...immutableArray, 4]; // Creates a new array
console.log(immutableArray); // [1, 2, 3]
console.log(newArray);       // [1, 2, 3, 4]

登入後複製

引用型別及其怪癖

引用型別（物件、陣列、函數）會以參考儲存在記憶體中。將它們分配或傳遞給變數或函數不會複製它們的值；它複製了他們的參考。

範例：

const obj1 = { name: "Alice" };
const obj2 = obj1;

obj2.name = "Bob";

console.log(obj1.name); // "Bob" - Both variables point to the same reference

登入後複製

深副本與淺副本

淺拷貝建立一個新對象，但不複製嵌套物件或陣列。
深層複製複製整個結構，包括巢狀元素。

淺複製範例:

const obj = { name: "Alice", details: { age: 25 } };
const shallowCopy = { ...obj };

shallowCopy.details.age = 30;
console.log(obj.details.age); // 30 - Nested objects are still linked

登入後複製

深度複製範例:

const deepCopy = JSON.parse(JSON.stringify(obj));
deepCopy.details.age = 35;
console.log(obj.details.age); // 25 - Original object remains unchanged

登入後複製

用於實現不變性和引用安全性的實用函數

1。巢狀物件的不可變更新

function updateNestedObject(obj, path, value) {
  return path.reduceRight((acc, key, index) => {
    if (index === path.length - 1) {
      return { ...obj, [key]: value };
    }
    return { ...obj, [key]: acc };
  }, value);
}

// Example
const state = { user: { name: "Alice", age: 25 } };
const newState = updateNestedObject(state, ["user", "age"], 30);
console.log(newState); // { user: { name: "Alice", age: 30 } }

登入後複製

2。深度克隆實用程式

function deepClone(obj) {
  return structuredClone ? structuredClone(obj) : JSON.parse(JSON.stringify(obj));
}

// Example
const original = { a: 1, b: { c: 2 } };
const clone = deepClone(original);
clone.b.c = 42;

console.log(original.b.c); // 2 - Original remains unaffected

登入後複製

3。凍結物件以實現完全不變性

function deepFreeze(obj) {
  Object.freeze(obj);
  Object.keys(obj).forEach((key) => {
    if (typeof obj[key] === "object" && !Object.isFrozen(obj[key])) {
      deepFreeze(obj[key]);
    }
  });
}

// Example
const config = { api: { url: "https://example.com" } };
deepFreeze(config);

config.api.url = "https://changed.com"; // Error in strict mode
console.log(config.api.url); // "https://example.com"

登入後複製

4。不可變數組操作

function immutableInsert(array, index, value) {
  return [...array.slice(0, index), value, ...array.slice(index)];
}

function immutableRemove(array, index) {
  return [...array.slice(0, index), ...array.slice(index + 1)];
}

// Example
const arr = [1, 2, 3, 4];
const newArr = immutableInsert(arr, 2, 99); // [1, 2, 99, 3, 4]
const removedArr = immutableRemove(arr, 1); // [1, 3, 4]

登入後複製

進階範例

1。在 Redux 風格的架構中管理不可變狀態

const initialState = { todos: [] };

function reducer(state = initialState, action) {
  switch (action.type) {
    case "ADD_TODO":
      return { ...state, todos: [...state.todos, action.payload] };
    case "REMOVE_TODO":
      return {
        ...state,
        todos: state.todos.filter((_, index) => index !== action.index),
      };
    default:
      return state;
  }
}

登入後複製

2。避免非同步函數中的引用錯誤

// Mutable Example
const mutableArray = [1, 2, 3];
mutableArray.push(4); // The original array is modified
console.log(mutableArray); // [1, 2, 3, 4]

// Immutable Example
const immutableArray = [1, 2, 3];
const newArray = [...immutableArray, 4]; // Creates a new array
console.log(immutableArray); // [1, 2, 3]
console.log(newArray);       // [1, 2, 3, 4]

登入後複製