克隆对象后原对象数组仍被修改，求技术解决方案

问题描述 #

需要克隆questionsObj并保持其初始状态，但执行代码后原对象的数组被修改为空。使用对象展开运算符{...questionsObj}没达到预期隔离效果，尝试JSON.parse(JSON.stringify(questionsObj))在项目中崩溃。

错误原因 #

对象展开运算符是浅拷贝：它只会复制对象的第一层键值对，对于值为数组（引用类型）的属性，拷贝的是数组的引用，而非新数组。所以shallowCopyQuestions.teens和questionsObj.teens指向同一个数组，后续通过state[mode]操作这个数组时，会直接修改原对象里的数组。

解决建议 #

1. 手动复制每个数组（最稳妥） #

在拷贝对象时，对每个数组属性单独做复制，切断引用：

const shallowCopyQuestions = {
  ...questionsObj,
  teens: [...questionsObj.teens] // 复制数组，生成新引用
};

如果有多个模式（比如除了teens还有其他），可以遍历对象属性批量处理：

const deepCopyQuestions = {};
for (const key in questionsObj) {
  if (Array.isArray(questionsObj[key])) {
    deepCopyQuestions[key] = [...questionsObj[key]];
  } else {
    deepCopyQuestions[key] = questionsObj[key]; // 非数组属性直接拷贝
  }
}

2. 使用structuredClone（现代环境支持） #

这是浏览器和Node.js（v17+）原生支持的深拷贝API，能处理大部分引用类型，包括数组、对象，甚至部分特殊类型：

const deepCopyQuestions = structuredClone(questionsObj);

注意：如果项目环境不支持（比如旧版浏览器），需改用其他方案。

关于JSON.parse(JSON.stringify())崩溃的可能原因 #

这个方法无法处理循环引用、undefined、Symbol、函数、日期对象（会转成字符串）等特殊类型。如果questionsObj里包含这些类型，就会导致崩溃或数据丢失，可以排查对象属性是否存在这类特殊值。

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