如何在JavaScript中定义支持嵌套、可改值的不可变数据结构？

需求明确 #

你需要的是固定键结构、仅允许修改键值、禁止增删键名的数据结构，同时要支持嵌套对象与数组，用来解决JS代码中数据模型被随意篡改、状态难以维护、表单数据混乱的问题。

JavaScript 原生实现方案 #

纯JS环境下，可通过Object.defineProperty结合Object.preventExtensions实现，嵌套结构需要递归处理：

1. 单层对象基础实现 #

通过配置属性特性固定键结构，同时允许修改值：

'use strict'; // 开启严格模式，非法操作直接报错

function createFixedObject(initialData) {
  const obj = {};
  // 遍历初始键，固定每个键的配置
  Object.keys(initialData).forEach(key => {
    Object.defineProperty(obj, key, {
      value: initialData[key],
      writable: true,       // 允许修改键值
      enumerable: true,
      configurable: false   // 禁止删除键、修改属性配置
    });
  });
  // 阻止添加新键
  Object.preventExtensions(obj);
  return obj;
}

// 使用示例
const user = createFixedObject({
  userName: 'user name',
  password: 'password'
});

user.userName = 'new name'; // 正常允许
delete user.password;       // 严格模式下报错
user.age = 20;              // 严格模式下报错（无法添加新键）

2. 支持嵌套结构的递归实现 #

针对数组、嵌套对象，需要递归处理每个层级的结构：

'use strict';

function createImmutableStructure(data) {
  // 处理数组：固定索引集合，仅允许修改已有元素
  if (Array.isArray(data)) {
    const arr = [...data];
    Object.preventExtensions(arr); // 禁止增删元素
    arr.forEach((item, index) => {
      arr[index] = createImmutableStructure(item);
    });
    return arr;
  }

  // 处理对象：固定键集合，允许修改值
  if (typeof data === 'object' && data !== null) {
    const obj = {};
    Object.keys(data).forEach(key => {
      Object.defineProperty(obj, key, {
        value: createImmutableStructure(data[key]),
        writable: true,
        enumerable: true,
        configurable: false
      });
    });
    Object.preventExtensions(obj);
    return obj;
  }

  // 基本类型直接返回
  return data;
}

// 使用示例
const user = createImmutableStructure({
  userName: 'user name',
  password: 'password',
  permissions: ['login', 'admin'],
  preferences: {favoriteColor: 'blue'}
});

user.preferences.favoriteColor = 'red'; // 允许
user.permissions[0] = 'guest';          // 允许
user.permissions.push('edit');          // 报错（无法添加数组元素）
user.age = 25;                          // 报错（无法添加新键）

TypeScript 方案：编译+运行双重保障 #

TS的类型系统能在编译阶段就约束结构，再结合运行时逻辑，可实现更全面的规范：

1. 定义固定结构的类型 #

先通过TS类型固定键名与值类型，编译阶段直接阻止非法操作：

type UserPreferences = {
  favoriteColor: string;
};

type User = {
  userName: string;
  password: string;
  permissions: string[];
  preferences: UserPreferences;
};

2. 结合运行时函数强化约束 #

将JS的递归函数适配TS，加上类型校验：

function createImmutableStructure<T extends object>(data: T): T {
  if (Array.isArray(data)) {
    const arr = [...data] as unknown as T;
    Object.preventExtensions(arr);
    (arr as unknown as any[]).forEach((item, index) => {
      arr[index] = createImmutableStructure(item);
    });
    return arr;
  }

  if (typeof data === 'object' && data !== null) {
    const obj = {} as T;
    Object.keys(data).forEach(key => {
      Object.defineProperty(obj, key, {
        value: createImmutableStructure((data as any)[key]),
        writable: true,
        enumerable: true,
        configurable: false
      });
    });
    Object.preventExtensions(obj);
    return obj;
  }

  return data;
}

// 使用示例
const user = createImmutableStructure<User>({
  userName: 'user name',
  password: 'password',
  permissions: ['login', 'admin'],
  preferences: {favoriteColor: 'blue'}
});

为什么需要这种约束？ #

JS的动态特性导致数据模型可被随意篡改，开发者无法从代码层面感知结构变化，只能靠console.log排查，不仅增加维护成本，还容易引发状态不一致、表单数据混乱等问题。这种固定结构+可修改值的约束，能让数据模型保持静态可预测，和类型系统的设计思路一致，大幅提升团队协作效率与代码可维护性。

总结 #

• 纯JS环境：通过Object.defineProperty+Object.preventExtensions结合递归，可实现需求，但必须开启严格模式才能强制报错约束行为。
• TypeScript环境：编译阶段的类型约束+运行时逻辑，能做到开发、生产双重保障，是团队协作场景下更推荐的方案。

内容的提问来源于stack exchange，提问作者gunslingor