JavaScript深拷贝与浅拷贝的全面解析

深拷贝和浅拷贝的核心区别在于是否递归复制引用类型。浅拷贝仅复制对象第一层属性,引用类型共享内存,修改新对象会影响原对象,常见方法有Object.assign、扩展运算符、slice等;深拷贝则完全复制所有层级,新旧对象独立,互不影响。实现方式包括jsON.parse(json.stringify())(适用于纯数据)、手动递归(支持循环引用和内置对象)、structuredClone()(现代浏览器原生支持)及Lodash的cloneDeep()。选择时需权衡兼容性、性能与使用场景,避免对dom节点或window对象进行深拷贝。

JavaScript深拷贝与浅拷贝的全面解析

javaScript中的深拷贝和浅拷贝是处理对象复制时必须理解的核心概念。很多人在操作对象时,以为赋值就是“复制”,结果修改新对象时原对象也被改变了——这就是浅拷贝带来的副作用。下面从原理到实现,全面解析两者的区别与使用方式。

什么是浅拷贝

浅拷贝是指创建一个新对象,这个新对象拥有原对象属性的副本,但属性值如果是引用类型(如对象、数组),则只复制了指向该对象的引用,而不是其本身。

换句话说:基本数据类型会被复制,而引用类型只是“共享”同一个内存地址。

常见浅拷贝方法包括:

立即学习Java免费学习笔记(深入)”;

  • Object.assign():只能实现一级属性的浅拷贝
  • 扩展运算符 {…obj}:语法简洁,效果同 Object.assign
  • Array.prototype.slice()concat():用于数组浅拷贝

注意:这些方法都无法深入嵌套对象进行复制。

示例:

 const original = { name: 'Alice', info: { age: 25 } }; const shallow = { ...original };  shallow.info.age = 30; console.log(original.info.age); // 输出 30 —— 原对象被影响 

什么是深拷贝

深拷贝会递归地复制对象的所有层级,包括嵌套的对象和数组,确保新对象与原对象完全独立,互不影响。

深拷贝的关键在于:每一个引用类型都重新创建一份副本,断开与原数据的联系。

实现深拷贝的方法有多种,各有优劣:

1. JSON.parse(JSON.stringify(obj))

这是最简单的深拷贝方法,适用于纯数据对象(不含函数、undefinedsymboldate 等特殊类型)。

JavaScript深拷贝与浅拷贝的全面解析

标贝科技

标贝科技-专业AI语音服务的人工智能开放平台

JavaScript深拷贝与浅拷贝的全面解析 14

查看详情 JavaScript深拷贝与浅拷贝的全面解析

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

缺点:

  • 无法处理函数、undefined、Symbol
  • Date 类型会被转为字符串
  • 循环引用会报错
  • regexpError 对象会丢失信息

2. 手动递归实现

通过判断数据类型,逐层复制,是最可控的方式。

 function deepClone(obj, seen = new Weakmap()) {   if (obj === null || typeof obj !== 'object') return obj;      if (seen.has(obj)) return seen.get(obj); // 防止循环引用      let clone;   if (obj instanceof Date) {     clone = new Date(obj);   } else if (obj instanceof RegExp) {     clone = new RegExp(obj);   } else if (Array.isArray(obj)) {     clone = obj.map(item => deepClone(item, seen));   } else {     clone = {};     for (let key in obj) {       if (obj.hasOwnProperty(key)) {         clone[key] = deepClone(obj[key], seen);       }     }   }      seen.set(obj, clone);   return clone; } 

这种方式支持循环引用,兼容大部分内置对象,适合需要精确控制的场景。

3. 使用结构化克隆算法浏览器API)

现代浏览器提供 structuredClone() 方法,可安全深拷贝支持的数据类型。

 const cloned = structuredClone(original); 

支持:对象、数组、Date、RegExp、Map、Set、Blob、FileList、ImageData 等。

优势:原生支持、安全、无需引入库。
限制:不支持函数、不能跨 iframe/window 完全通用。

4. 使用第三方库(如 Lodash)

Lodash 提供 _.cloneDeep() 方法,功能强大且稳定。

 const _ = require('lodash'); const deep = _.cloneDeep(original); 

适合复杂项目,处理边界情况更完善。

如何选择合适的拷贝方式

根据实际需求权衡性能与兼容性:

  • 如果对象是纯数据(如配置、JSON响应),用 JSON.parse + stringify 最快
  • 需要兼容 Date、RegExp 或存在嵌套结构,推荐 structuredClone(现代环境)
  • 需支持函数或特殊类型,使用 手动递归Lodash
  • 仅复制第一层,可用 扩展运算符Object.assign

特别提醒:不要对 DOM 节点、window 对象等使用深拷贝,会导致意外行为或错误。

基本上就这些。理解深浅拷贝的本质,能避免很多隐蔽的 bug,尤其是在状态管理、表单编辑、撤销功能等场景中尤为重要。

上一篇
下一篇
text=ZqhQzanResources