登录
首页 >  文章 >  前端

JavaScript深浅拷贝详解与实现方法

时间：2025-10-30 23:21:50 393浏览 收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JavaScript深浅拷贝方法解析》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

浅拷贝只复制对象第一层属性，深层仍共享引用；深拷贝递归复制所有层级，完全断开引用。常用浅拷贝方法有Object.assign()、扩展运算符、slice()/concat()；深拷贝可使用JSON.parse(JSON.stringify())（有限制）、递归实现、structuredClone()或Lodash的cloneDeep()。示例表明浅拷贝修改嵌套属性会影响原对象，而深拷贝不会。手动实现深拷贝需处理对象、数组、基本类型及特殊类型，但简单递归未解决循环引用，生产环境推荐成熟库。选择方式应根据数据类型、性能需求和兼容性综合考虑。

JavaScript深拷贝与浅拷贝的几种方式_javascript技巧

JavaScript中的深拷贝和浅拷贝主要针对引用类型（如对象、数组）在赋值时的行为差异。浅拷贝只复制对象的第一层属性，深层嵌套仍共享同一引用；而深拷贝会递归复制所有层级，完全断开引用关系。下面介绍几种常见的实现方式。

浅拷贝的常用方法

浅拷贝适用于只需复制第一层属性的场景，修改嵌套属性时仍会影响原对象。

  • Object.assign()：将源对象的所有可枚举属性复制到目标对象。注意仅复制一层。
  • 扩展运算符 {...} ：语法简洁，常用于对象或数组的浅复制。
  • Array.prototype.slice() / concat()：适用于数组，生成新数组但不深拷贝内部元素。

示例：

// 对象浅拷贝
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = Object.assign({}, obj1);
obj2.b.c = 3;
console.log(obj1.b.c); // 输出 3，说明是浅拷贝

深拷贝的基本方法

深拷贝能彻底隔离新旧对象，适合复杂嵌套结构。

  • JSON.parse(JSON.stringify())：最简单的方法，但有局限性，无法处理函数、undefined、Symbol、循环引用等。
  • 递归实现深拷贝：手动遍历对象属性，对引用类型递归调用拷贝函数，可控性强。
  • 使用结构化克隆算法（Structured Clone）：部分浏览器支持，如 structuredClone()，支持多数数据类型。
  • 第三方库（如 Lodash）：提供成熟的 _.cloneDeep() 方法，兼容性好。

示例：JSON方式

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = JSON.parse(JSON.stringify(obj1));
obj2.b.c = 3;
console.log(obj1.b.c); // 输出 2，成功深拷贝

手动实现一个简易深拷贝函数

通过类型判断和递归，可以处理大多数情况。

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof Array) return obj.map(item => deepClone(item));
  if (typeof obj === 'object') {
    const cloned = {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        cloned[key] = deepClone(obj[key]);
      }
    }
    return cloned;
  }
}

这个版本能处理对象、数组、基本类型和嵌套结构，但未解决循环引用问题。生产环境建议使用成熟库。

注意事项与适用场景

选择拷贝方式需结合实际需求。

  • 若对象不含函数、日期、Symbol 等特殊类型，JSON方法最快捷。
  • 需要完整支持各种类型时，推荐使用 Lodash 的 cloneDeep。
  • 频繁操作且性能敏感，可考虑优化的递归实现或 structuredClone（现代浏览器）。
  • 注意循环引用会导致递归爆栈或JSON报错，需额外检测。

基本上就这些，理解原理后可根据项目需求灵活选择。

今天关于《JavaScript深浅拷贝详解与实现方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

JavaScript 引用类型 对象 浅拷贝 深拷贝
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>