使用JSON.parse(JSON.stringify)复制对象丢失布尔值等字段问题排查

为什么布尔字段会丢失？ #

使用JSON.parse(JSON.stringify(game))做对象拷贝时，布尔字段丢失的核心原因是JSON序列化的特性：

• JSON标准中没有undefined类型，当对象的某个字段值为undefined时，JSON.stringify()会直接忽略这个键值对，不会把它写入JSON字符串。后续JSON.parse()自然也还原不出这些字段。
• 你定义的Game接口只是TypeScript类型约束，不会自动给字段赋初始值。如果实际的game对象里这些布尔字段（比如matchStarted、allowPredictions）没有被赋值，它们的实际值就是undefined，序列化时就会被丢掉。

另外注意到你接口里的preidctionFirstTeamGoals和preidctionSecondTeamGoals是拼写错误（应该是prediction），虽然这和布尔字段丢失无关，但可能会导致其他问题，建议修正。

修复方法 #

根据你的需求，有几种不同的修复方式：

1. 确保所有布尔字段有初始值

在创建game对象时，给所有布尔字段显式赋值（比如默认false），避免它们处于undefined状态：

const game: Game = {
  uuid: "xxx",
  firstTeam: {}, // 填充Team对象数据
  secondTeam: {}, // 填充Team对象数据
  matchDate: "2024-05-20",
  groupName: "Group A",
  result: "1-0",
  predicted: false,
  matchStarted: false,
  matchFinished: false,
  allowPredictions: true,
  predictionFirstTeamGoals: 0,
  predictionSecondTeamGoals: 0
};

这样JSON.stringify()会正常保留所有布尔字段。

2. 使用浅拷贝（如果Team对象不需要深拷贝）

如果嵌套的Team对象不需要深拷贝（比如只是引用即可），可以用对象扩展运算符或Object.assign()，这两种方法会保留值为undefined的字段：

// 对象扩展运算符
const gameCopy = {...game};

// Object.assign
const gameCopy = Object.assign({}, game);

3. 自定义深拷贝函数（需要深拷贝Team时）

如果需要完全深拷贝包括嵌套的Team对象，同时保留所有字段（包括undefined），可以写一个简单的深拷贝函数：

function deepCopy<T>(obj: T): T {
  if (obj === null || typeof obj !== 'object') return obj;
  if (obj instanceof Date) return new Date(obj.getTime()) as unknown as T;
  if (obj instanceof Array) return obj.map(item => deepCopy(item)) as unknown as T;
  
  // 处理普通对象，保留所有键，包括值为undefined的
  const copyObj = {} as T;
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copyObj[key] = deepCopy(obj[key]);
    }
  }
  return copyObj;
}

// 使用
const gameCopy = deepCopy(game);

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