JavaScript实现对象不可变性的方法有哪些？

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《JavaScript实现对象不可变性的方法有哪些？》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

使用Object.freeze()可实现对象浅层不可变，深层不可变需递归封装deepFreeze函数；复杂场景推荐Immutable.js或immer库；结合扩展运算符可手动保持不可变性，选择方案应根据项目规模决定。

在JavaScript中，对象默认是可变的，但可以通过多种方式实现不可变性，确保数据不会被意外修改。关键在于合理使用内置方法和遵循函数式编程原则。

使用 Object.freeze() 实现浅层不可变

Object.freeze() 是最常用的方法之一，它能冻结对象，阻止属性的添加、删除和修改。

示例：

const user = {
  name: 'Alice',
  profile: { age: 25 }
};
Object.freeze(user);

user.name = 'Bob'; // 无效，严格模式下会报错
user.email = 'alice@example.com'; // 添加失败

// 但嵌套对象仍可变
user.profile.age = 30; // 成功！

实现深层不可变（Deep Freeze）

为了冻结嵌套对象，需要递归调用 Object.freeze()。

可以封装一个 deepFreeze 函数：

function deepFreeze(obj) {
  Object.getOwnPropertyNames(obj).forEach(prop => {
    const value = obj[prop];
    if (value && typeof value === 'object') {
      deepFreeze(value);
    }
  });
  return Object.freeze(obj);
}

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

config.api.url = 'https://hacked.com'; // 失败，已被深层冻结

使用 Immutable.js 或其他库

对于复杂场景，推荐使用成熟的不可变数据结构库，如 Immutable.js 或 immer。

• Immutable.js 提供 Map、List 等不可变集合，每次操作返回新实例。
• immer 允许你以可变的方式编写代码，但生成不可变结果，适合处理复杂状态。

例如使用 immer：

import produce from 'immer';

const baseState = { users: [] };
const nextState = produce(baseState, draft => {
  draft.users.push({ name: 'Charlie' }); // 看似可变，实际返回新对象
});

结合解构与扩展运算符进行安全更新

即使不使用额外工具，也可以通过扩展运算符手动保持不可变性。

常见做法：

• 更新对象：使用 { ...oldObj, newProp }
• 更新数组：使用 [...arr, newItem] 或 arr.filter() 等纯函数

示例：

const state = { count: 1 };
const newState = { ...state, count: state.count + 1 }; // 返回新对象

基本上就这些。选择哪种方式取决于项目复杂度。小型应用可用 Object.freeze 加规范约束，大型状态管理建议搭配 immer 或类似工具，既保证不可变性又提升开发体验。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。