怎么样写才是深拷贝js

深拷贝（Deep Copy）是指在JavaScript中创建一个对象的完全独立副本，使得新对象与原对象之间没有任何引用关系。常用的方法包括：JSON.parse(JSON.stringify())、递归复制、库函数（如Lodash的_.cloneDeep）。 其中，JSON.parse(JSON.stringify()) 是最常见的简单方法，但它有局限性，如无法复制函数、Date对象和循环引用。递归复制则需要手动编写代码来处理复杂对象，库函数则提供了简便且全面的解决方案。

一、深拷贝与浅拷贝的区别

1、浅拷贝

浅拷贝是指仅复制对象的引用，而不是对象本身。换句话说，浅拷贝创建一个新的对象，这个对象的属性是原始对象属性的引用。最简单的浅拷贝方法是使用Object.assign() 或 扩展运算符（…）。

示例代码

let original = { a: 1, b: { c: 2 } };

let shallowCopy = { ...original };
shallowCopy.b.c = 3;
console.log(original.b.c); // 输出 3

在这个示例中，修改浅拷贝对象的嵌套属性会影响原始对象。

2、深拷贝

深拷贝则是创建一个完全独立的对象副本，没有任何引用关系。修改深拷贝对象不会影响原始对象。

示例代码

let original = { a: 1, b: { c: 2 } };

let deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.b.c = 3;
console.log(original.b.c); // 输出 2

在这个示例中，修改深拷贝对象的嵌套属性不会影响原始对象。

二、使用JSON.parse(JSON.stringify())进行深拷贝

1、优点

• 简单易用：只需一行代码即可完成深拷贝。
• 适用范围广：适用于大多数普通对象和数组。

2、缺点

• 不能复制函数：函数会被丢弃。
• 不能处理特殊对象：如Date、RegExp等。
• 不能处理循环引用：会导致错误。

示例代码

let original = { a: 1, b: { c: 2 }, d: new Date(), e: function() {} };

let deepCopy = JSON.parse(JSON.stringify(original));
console.log(deepCopy); // { a: 1, b: { c: 2 }, d: "2023-01-01T00:00:00.000Z" }

在这个示例中，Date对象被转换为字符串，函数被丢弃。

三、递归实现深拷贝

1、基本思路

递归实现深拷贝需要手动编写代码，遍历对象的每个属性，并递归复制嵌套对象。

2、示例代码

function deepCopy(obj) {

  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  let copy = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}
let original = { a: 1, b: { c: 2 } };
let deepCopyObj = deepCopy(original);
deepCopyObj.b.c = 3;
console.log(original.b.c); // 输出 2

3、处理循环引用

递归实现深拷贝时，需要考虑对象中的循环引用，否则会导致无限递归。

示例代码

function deepCopy(obj, hash = new WeakMap()) {

  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  if (hash.has(obj)) {
    return hash.get(obj);
  }
  let copy = Array.isArray(obj) ? [] : {};
  hash.set(obj, copy);
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key], hash);
    }
  }
  return copy;
}
let original = { a: 1 };
original.b = original;
let deepCopyObj = deepCopy(original);
console.log(deepCopyObj);

在这个示例中，使用WeakMap来记录已经复制过的对象，防止循环引用导致的无限递归。

四、使用库函数进行深拷贝

1、Lodash的_.cloneDeep()

Lodash是一个流行的JavaScript库，提供了很多实用的函数，其中_.cloneDeep() 可以方便地实现深拷贝。

示例代码

const _ = require('lodash');

let original = { a: 1, b: { c: 2 } };
let deepCopyObj = _.cloneDeep(original);
deepCopyObj.b.c = 3;
console.log(original.b.c); // 输出 2

2、优点

• 全面：可以处理函数、Date对象、循环引用等复杂情况。
• 简便：不需要手动编写递归代码。

3、缺点

• 额外依赖：需要引入外部库。

五、实际应用中的深拷贝

1、状态管理

在前端开发中，深拷贝常用于状态管理，确保状态更新不会影响其他部分。尤其在使用Redux等状态管理库时，深拷贝是常见操作。

示例代码

import { createStore } from 'redux';

function reducer(state = { counter: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, counter: state.counter + 1 };
    default:
      return state;
  }
}
const store = createStore(reducer);
store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // { counter: 1 }

在这个示例中，使用扩展运算符创建新的状态对象，避免直接修改原始状态。

2、项目管理系统

在项目管理系统中，深拷贝可以用于复制项目数据，避免修改原数据。例如，使用研发项目管理系统PingCode和通用项目协作软件Worktile时，可以深拷贝项目数据进行备份或模拟操作。

示例代码

let projectData = { name: 'Project A', tasks: [{ id: 1, name: 'Task 1' }] };

let backupData = JSON.parse(JSON.stringify(projectData)); // 简单备份
backupData.tasks[0].name = 'Task 1 - Modified';
console.log(projectData.tasks[0].name); // 输出 'Task 1'

在这个示例中，使用JSON方法简单地备份项目数据，确保原数据不会被修改。

六、总结

深拷贝是JavaScript中常见且重要的操作，适用于需要创建对象完全独立副本的场景。常用方法包括JSON.parse(JSON.stringify())、递归复制和库函数（如Lodash的_.cloneDeep）。每种方法有其优缺点，选择适合的方式可以确保代码的健壮性和可维护性。在实际应用中，尤其是状态管理和项目管理系统中，深拷贝可以有效避免数据污染，提高应用的可靠性和稳定性。

通过深入理解和掌握深拷贝技术，可以更好地处理复杂对象操作，提高代码质量和开发效率。

相关问答FAQs：

1. 深拷贝js是什么意思？
深拷贝是指在JavaScript中创建一个与原对象完全独立的新对象，新对象的属性和值与原对象相同，但在内存中占据不同的位置。

2. 如何实现深拷贝js？
要实现深拷贝，可以使用递归或者借助一些库或工具函数。递归的方法是遍历原对象的属性，如果属性值是对象或数组，则递归调用深拷贝函数；如果是基本数据类型，则直接复制。可以使用JSON.parse(JSON.stringify(obj))方法来实现深拷贝，但要注意该方法在处理特殊数据类型时可能会出现问题。

3. 深拷贝与浅拷贝有什么区别？
深拷贝和浅拷贝都是拷贝对象的方法，但区别在于拷贝的程度。浅拷贝只复制对象的引用，而不是对象本身，如果原对象发生改变，拷贝后的对象也会受到影响。而深拷贝会创建一个与原对象完全独立的新对象，两者之间没有任何关联，即使原对象发生改变，拷贝后的对象也不会受到影响。