当前位置：首页 > 文章列表 > 文章 > 前端 > 了解 JavaScript 不变性和引用类型

了解 JavaScript 不变性和引用类型

2025-01-17 11:25:12 0浏览收藏

学习文章要努力，但是不要急！今天的这篇文章《了解 JavaScript 不变性和引用类型》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

JavaScript 中的不变性和引用类型行为是基础概念，但容易被误解。不变性确保数据稳定性，而理解引用类型对于避免意外副作用至关重要。本文深入探讨这些概念，并提供高级示例和实用函数，帮助您高效利用它们。

JavaScript 中的不变性

不变性指对象创建后其状态不可更改。在 JavaScript 中，原始值（数字、字符串、布尔值）本质上不可变，而引用类型（对象、数组）默认可变。

不变性的重要性

可预测的状态管理
简化调试
防止函数副作用

可变数据与不可变数据示例

// 可变示例
const mutableArray = [1, 2, 3];
mutableArray.push(4); // 原始数组被修改
console.log(mutableArray); // [1, 2, 3, 4]

// 不可变示例
const immutableArray = [1, 2, 3];
const newArray = [...immutableArray, 4]; // 创建新数组
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" - 两个变量指向同一引用

深拷贝与浅拷贝

浅拷贝创建新对象，但不复制嵌套对象或数组。
深拷贝复制整个结构，包括嵌套元素。

浅拷贝示例:

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

shallowCopy.details.age = 30;
console.log(obj.details.age); // 30 - 嵌套对象仍然关联

深拷贝示例:

const deepCopy = JSON.parse(JSON.stringify(obj));
deepCopy.details.age = 35;
console.log(obj.details.age); // 25 - 原始对象保持不变

实现不变性和引用安全的实用函数

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);
}

// 示例
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));
}

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

console.log(original.b.c); // 2 - 原始对象不受影响

3. 使用 Object.freeze 实现完全不变性

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

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

config.api.url = "https://changed.com"; // 严格模式下报错
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)];
}

// 示例
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. 避免异步函数中的引用错误

const tasks = [{ id: 1 }, { id: 2 }];

tasks.forEach(async (task) => {
  const copy = { ...task }; // 避免修改原始引用
  copy.status = "in-progress";
  await performTask(copy);
});