React项目中JavaScript对象深拷贝的其他可行实现方法

浅拷贝方案（仅拷贝顶层属性，嵌套对象仍为引用） #

如果你的对象没有嵌套结构，或者只需要独立顶层属性，以下方法足够：

• 对象展开运算符
  React中最常用的方式，语法简洁：

  const originalObj = { name: "Alice", age: 25 };
  const copiedObj = { ...originalObj };
  // 修改copiedObj不会影响originalObj的顶层属性
  copiedObj.age = 26;
  console.log(originalObj.age); // 25
  

  注意：如果对象有嵌套属性，嵌套部分还是共享引用。

• Object.assign()
  和展开运算符效果一致，是ES6之前的常用方式：

  const copiedObj = Object.assign({}, originalObj);
  

深拷贝方案（完全拷贝所有层级，无引用共享） #

当对象存在嵌套结构，需要完全独立的拷贝时，除了structuredClone，还有这些方法：

• JSON序列化/反序列化
  无需依赖第三方库，适合大多数普通对象（无特殊类型）：

  const originalObj = { name: "Bob", info: { height: 180 } };
  const copiedObj = JSON.parse(JSON.stringify(originalObj));
  // 修改嵌套属性不会影响原对象
  copiedObj.info.height = 185;
  console.log(originalObj.info.height); // 180
  

  局限：无法拷贝函数、undefined、Symbol类型，遇到循环引用会报错。

• 自定义递归拷贝函数
  针对复杂场景（比如包含函数、特殊类型），可以自己实现递归逻辑：

  function deepClone(obj) {
    // 处理null、基本类型和函数
    if (obj === null || typeof obj !== 'object') return obj;
    // 处理数组
    if (Array.isArray(obj)) {
      return obj.map(item => deepClone(item));
    }
    // 处理对象
    const clonedObj = {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        clonedObj[key] = deepClone(obj[key]);
      }
    }
    return clonedObj;
  }
  // 使用示例
  const copiedObj = deepClone(originalObj);
  

  优势：可以根据需求自定义处理特殊类型（比如保留函数），缺点：需要自己维护边界情况（比如循环引用、Symbol键等）。

• Lodash的_.cloneDeep()
  第三方库解决方案，成熟稳定，处理所有边界情况（包括循环引用、特殊类型）：
  先安装Lodash：

  npm install lodash
  

  然后使用：

  import { cloneDeep } from 'lodash';
  const copiedObj = cloneDeep(originalObj);
  

  适合大型项目或需要处理复杂对象的场景，无需自己造轮子。

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