深拷贝和浅拷贝

1. 为什么需要理解拷贝机制？

在 JavaScript 开发中，我们经常需要复制数据。但简单的赋值操作 = 并不总是产生预期的结果，特别是当处理对象和数组等引用类型时。理解深拷贝和浅拷贝的区别及实现方式，对于避免难以察觉的 bug 和编写可靠代码至关重要。

2. JavaScript 的数据类型与内存机制

2.1 基本类型与引用类型

  • 基本类型：Number、String、Boolean、Null、Undefined、Symbol、BigInt
    这些类型的数据直接存储在栈内存中，赋值操作会创建值的完全独立副本

  • 引用类型：Object、Array、Function、Date、RegExp 等
    这些类型的数据存储在堆内存中，变量实际上存储的是指向堆内存地址的指针

2.2 内存分配示意图

复制代码 
栈内存 (Stack)         堆内存 (Heap)
┌─────────────┐        ┌─────────────────┐
│ 变量: obj1  │        │                 │
│ 值: 0x001   │───────▶│ {a: 1, b: {c: 2}}│
├─────────────┤        │                 │
│ 变量: obj2  │        └─────────────────┘
│ 值: 0x001   │───────┐
└─────────────┘        │
                       │
                       ▼
                      ┌─────────────────┐
                      │                 │
                      │ {a: 1, b: {c: 2}}│
                      │                 │
                      └─────────────────┘

3. 浅拷贝 (Shallow Copy)

3.1 什么是浅拷贝？

浅拷贝创建一个新对象，并复制原对象的所有属性值。如果属性是基本类型，则复制其值；如果是引用类型，则复制其内存地址（即复制指针，而不复制实际对象）。

3.2 浅拷贝的实现方式

3.2.1 Object.assign()

javascript 复制代码 
const original = { a: 1, b: { c: 2 } };
const copy = Object.assign({}, original);

console.log(copy); // { a: 1, b: { c: 2 } }

// 修改嵌套对象会影响原对象
copy.b.c = 3;
console.log(original.b.c); // 3 - 原对象也被修改了！

3.2.2 展开运算符 (Spread Operator)

javascript 复制代码 
const original = { a: 1, b: { c: 2 } };
const copy = { ...original };

// 同样的问题：嵌套对象是共享的
copy.b.c = 3;
console.log(original.b.c); // 3

3.2.3 Array.prototype.slice() (数组)

javascript 复制代码 
const originalArray = [1, 2, { a: 3 }];
const copyArray = originalArray.slice();

copyArray[2].a = 4;
console.log(originalArray[2].a); // 4 - 原数组也被修改

3.2.4 Array.from() (数组)

javascript 复制代码 
const originalArray = [1, 2, { a: 3 }];
const copyArray = Array.from(originalArray);

copyArray[2].a = 4;
console.log(originalArray[2].a); // 4

3.3 浅拷贝的适用场景

  • 对象只有一层结构，没有嵌套引用类型
  • 确实需要共享嵌套对象引用的场景
  • 性能要求较高且可以接受引用共享的情况

4. 深拷贝 (Deep Copy)

4.1 什么是深拷贝？

深拷贝创建一个新对象，并递归地复制原对象的所有属性。无论属性是基本类型还是引用类型，都会完全复制，新对象和原对象完全独立，互不影响。

4.2 深拷贝的实现方式

4.2.1 JSON.parse(JSON.stringify())

javascript 复制代码 
const original = { 
  a: 1, 
  b: { 
    c: 2 
  },
  d: new Date(),
  e: undefined,
  f: function() {},
  g: Symbol('foo'),
  h: Infinity,
  i: NaN
};

const copy = JSON.parse(JSON.stringify(original));

console.log(copy);
// 输出: { a: 1, b: { c: 2 }, d: "2023-07-15T12:00:00.000Z", h: null, i: null }
// 注意: undefined、函数、Symbol 被忽略，Date 转为字符串，Infinity/NaN 转为 null

局限性：

  • 忽略 undefined、function、Symbol
  • 不能处理循环引用
  • Date 对象会转为字符串
  • RegExp、Error 对象会被转为空对象
  • NaN、Infinity、-Infinity 会被转为 null

4.2.2 手动实现深拷贝函数

javascript 复制代码 
function deepClone(obj, hash = new WeakMap()) {
  // 处理基本类型和null
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  
  // 处理日期对象
  if (obj instanceof Date) {
    return new Date(obj);
  }
  
  // 处理正则表达式对象
  if (obj instanceof RegExp) {
    return new RegExp(obj);
  }
  
  // 处理数组
  if (Array.isArray(obj)) {
    return obj.map(item => deepClone(item, hash));
  }
  
  // 处理循环引用
  if (hash.has(obj)) {
    return hash.get(obj);
  }
  
  // 处理普通对象
  const cloneObj = Object.create(Object.getPrototypeOf(obj));
  hash.set(obj, cloneObj);
  
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloneObj[key] = deepClone(obj[key], hash);
    }
  }
  
  return cloneObj;
}

// 使用示例
const original = { 
  a: 1, 
  b: { c: 2 }, 
  d: new Date(),
  e: [1, 2, { f: 3 }]
};

// 创建循环引用
original.circular = original;

const copy = deepClone(original);
console.log(copy);

4.2.3 使用第三方库

  • Lodash: _.cloneDeep(value)
  • jQuery: $.extend(true, {}, obj)
  • Ramda: R.clone(obj)
javascript 复制代码 
// 使用 Lodash 的深拷贝
const _ = require('lodash');
const copy = _.cloneDeep(original);

4.3 深拷贝的适用场景

  • 需要完全独立的对象副本
  • 对象包含多层嵌套结构
  • 需要修改副本而不影响原对象
  • 处理来自外部的不受信任数据（结合验证）

5. 性能考量与最佳实践

5.1 性能对比

  • 浅拷贝：速度快，内存占用少
  • 深拷贝：速度慢，内存占用多（特别是大型嵌套对象）
  • JSON方法：简单但有限制，性能中等
  • 手动实现：灵活但需要处理各种边界情况
  • 库函数：通常经过优化，但增加依赖

5.2 选择策略

  1. 优先使用浅拷贝：当对象没有嵌套或确实需要共享引用时
  2. 谨慎使用深拷贝：只在必要时使用，注意性能影响
  3. 考虑不可变数据结构：使用 Immutable.js 等库避免拷贝开销
  4. 使用结构共享：只复制发生变化的部分

6. 特殊情况的处理

6.1 循环引用

javascript 复制代码 
// 循环引用示例
const objA = { name: 'A' };
const objB = { name: 'B' };
objA.ref = objB;
objB.ref = objA;

// 使用WeakMap处理循环引用的深拷贝
function deepCloneWithCircular(obj, hash = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (hash.has(obj)) return hash.get(obj);
  
  const clone = Array.isArray(obj) ? [] : {};
  hash.set(obj, clone);
  
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepCloneWithCircular(obj[key], hash);
    }
  }
  
  return clone;
}

6.2 特殊对象的拷贝

javascript 复制代码 
// 处理Map和Set
function cloneSpecialTypes(obj, hash = new WeakMap()) {
  if (obj instanceof Map) {
    const clone = new Map();
    hash.set(obj, clone);
    obj.forEach((value, key) => {
      clone.set(key, cloneSpecialTypes(value, hash));
    });
    return clone;
  }
  
  if (obj instanceof Set) {
    const clone = new Set();
    hash.set(obj, clone);
    obj.forEach(value => {
      clone.add(cloneSpecialTypes(value, hash));
    });
    return clone;
  }
  
  // 处理其他类型...
}

7. 实际应用场景

7.1 Redux 状态管理

在 Redux 中，reducer 必须是纯函数，需要返回新的状态对象：

javascript 复制代码 
function todoReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      // 错误：直接修改原状态
      // state.todos.push(action.payload);
      // return state;
      
      // 正确：返回新状态
      return {
        ...state,
        todos: [...state.todos, action.payload]
      };
      
    default:
      return state;
  }
}

7.2 React 状态更新

在 React 中，状态不可变性原则要求我们总是创建新的状态对象：

javascript 复制代码 
const [user, setUser] = useState({ 
  name: 'John', 
  profile: { 
    age: 30, 
    preferences: { theme: 'dark' } 
  } 
});

// 更新嵌套属性
setUser(prevUser => ({
  ...prevUser,
  profile: {
    ...prevUser.profile,
    preferences: {
      ...prevUser.profile.preferences,
      theme: 'light'
    }
  }
}));

7.3 函数参数处理

javascript 复制代码 
// 避免函数副作用
function processData(data) {
  // 创建副本，避免修改原数据
  const dataCopy = deepClone(data);
  // 处理数据...
  return dataCopy;
}

8. 总结与面试要点

8.1 关键区别

特性 浅拷贝 深拷贝
复制层级 只复制一层 递归复制所有层级
引用类型处理 复制引用（共享嵌套对象） 创建新对象（完全独立）
性能 高 低（特别是大型对象）
适用场景 简单对象、性能敏感场景 复杂嵌套对象、需要完全独立

8.2 常见面试题

  1. 浅拷贝和深拷贝的区别是什么？

    • 浅拷贝只复制一层，深拷贝递归复制所有层级
    • 对于引用类型，浅拷贝复制指针，深拷贝创建新对象

  2. 如何实现一个深拷贝函数？

    • 需要处理基本类型、日期、正则、数组、对象等
    • 需要使用WeakMap处理循环引用
    • 需要考虑性能优化

  3. JSON.parse(JSON.stringify())有什么局限性？

    • 不能处理函数、undefined、Symbol
    • 不能处理循环引用
    • 会丢失特殊对象的原型链信息

  4. 在React/Redux中为什么需要不可变性？

    • 便于比较状态变化
    • 避免意外的副作用
    • 支持时间旅行调试

8.3 最佳实践建议

  1. 根据实际需求选择拷贝方式，不要过度使用深拷贝
  2. 对于大型对象，考虑使用不可变数据库或结构共享
  3. 在处理外部数据时，始终创建副本以避免污染原始数据
  4. 在性能敏感的场景中，评估拷贝操作的开销

理解深拷贝和浅拷贝不仅是面试必备知识，更是编写可靠、可维护JavaScript代码的基础。通过掌握这些概念和技术，您将能够更好地管理数据流，避免常见的陷阱，并构建更健壮的应用程序。