深浅拷贝实现原理_javascript对象操作-js教程-PHP中文网

深浅拷贝实现原理_javascript对象操作

夢幻星辰

发布： 2025-12-03 18:37:02

原创

188人浏览过

浅拷贝只复制对象第一层属性，引用类型共享内存，修改嵌套对象会影响原对象；深拷贝递归复制所有层级，生成完全独立的对象。常用浅拷贝方法有Object.assign、扩展运算符；深拷贝可用JSON.parse(JSON.stringify())或递归实现，但前者不支持函数、undefined等，后者更灵活但性能开销大。选择取决于数据结构复杂度和性能需求。

深浅拷贝实现原理_javascript对象操作

在JavaScript中，对象的拷贝分为浅拷贝和深拷贝，理解它们的实现原理对避免数据意外修改至关重要。当你复制一个对象时，如果只是复制了它的引用，那么无论你通过哪个变量修改对象，另一个都会受到影响。为了避免这种情况，就需要使用浅拷贝或深拷贝。

浅拷贝的实现原理

浅拷贝是指创建一个新对象，这个新对象拥有原对象属性的一层副本。如果是基本数据类型，直接复制值；如果是引用类型（如数组、对象），则只复制其引用地址。

这意味着，当原对象的嵌套对象被修改时，拷贝后的对象也会受到影响。

常见的浅拷贝方法包括：

立即学习“Java免费学习笔记（深入）”；

Live PPT

一款AI智能化生成演示内容的在线工具。只需输入一句话、粘贴一段内容、或者导入文件，AI生成高质量PPT。

299

查看详情

Object.assign()：将多个源对象的可枚举属性复制到目标对象
扩展运算符 {...}：语法简洁，常用于对象合并或复制
Array.prototype.slice() 或 concat()：适用于数组的浅拷贝

示例：

const obj = { a: 1, b: { c: 2 } };
const copy = { ...obj };
copy.b.c = 3;
console.log(obj.b.c); // 输出 3，说明是浅拷贝

登录后复制

深拷贝的实现原理

深拷贝会递归地复制对象的所有层级，生成一个完全独立的新对象。修改新对象不会影响原对象，哪怕嵌套多层也不会共享引用。

实现深拷贝有多种方式，各有优劣：

JSON.parse(JSON.stringify(obj))：简单快捷，但存在限制，比如不能处理函数、undefined、Symbol、循环引用等
递归遍历实现：手动遍历对象属性，对每个引用类型再进行深拷贝，可以处理大多数情况
使用结构化克隆算法（Structured Clone）：部分浏览器API支持，如 structuredClone()（现代浏览器支持）
借助第三方库：如 Lodash 的 _.cloneDeep()，功能完善且稳定

简易递归深拷贝实现：

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 clonedObj = {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        clonedObj[key] = deepClone(obj[key]);
      }
    }
    return clonedObj;
  }
}

登录后复制