天池月下

Appearance

深浅拷贝 ​

在 JavaScript/TypeScript 中，深拷贝与浅拷贝的区别主要体现在对引用类型数据的处理方式上。以下是具体分类和示例：

一、浅拷贝（Shallow Copy） ​

特点：仅复制对象的第一层属性，嵌套的引用类型仍共享内存地址。
常见场景：

  1. 直接赋值

    javascript
    const obj = { a: 1, b: { c: 2 } };
const copy = obj; // 浅拷贝（实为引用传递）
copy.b.c = 3;     // 原对象 obj.b.c 同步变为 3

  2. 扩展运算符（...）

    javascript
    const arr = [1, [2, 3]];
const newArr = [...arr]; // 浅拷贝
newArr[1][0] = 99;       // 原数组 arr[1][0] 同步变为 99

  3. Object.assign()

    javascript
    const obj = { a: 1, b: { c: 2 } };
const copy = Object.assign({}, obj); // 浅拷贝
copy.b.c = 3;                       // 原对象 obj.b.c 同步修改

  4. 数组方法（slice()、concat()）

    javascript
    const arr = [1, [2, 3]];
const newArr = arr.slice(); // 浅拷贝
newArr[1][0] = 99;         // 原数组同步修改

二、深拷贝（Deep Copy） ​

特点：递归复制所有层级的属性，新旧对象完全独立。
常见场景：

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

    javascript
    const obj = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(obj)); // 深拷贝
copy.b.c = 3;                                // 原对象不受影响

    局限性：忽略 undefined、Symbol、函数和循环引用。

  2. 递归手动实现

    javascript
    function deepClone(obj) {
  if (typeof obj !== 'object' || obj === null) return obj;
  const copy = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    copy[key] = deepClone(obj[key]);
  }
  return copy;
}

  3. 第三方库（如 Lodash 的 _.cloneDeep()）

    javascript
    import _ from 'lodash';
const obj = { a: 1, b: { c: 2 } };
const copy = _.cloneDeep(obj); // 深拷贝

  4. structuredClone()（现代浏览器 API）

    javascript
    const obj = { a: 1, b: { c: 2 } };
const copy = structuredClone(obj); // 深拷贝

    支持：处理循环引用和更多数据类型（如 Date、Map）。

三、对比总结 ​

特性浅拷贝深拷贝
复制层级仅第一层所有嵌套层级
内存占用低（共享引用）高（独立内存）
修改影响原对象可能被影响原对象完全独立
适用场景单层结构数据多层嵌套或需隔离修改的数据

四、特殊注意事项 ​

  • 循环引用：浅拷贝无问题，深拷贝需特殊处理（如 WeakMap 缓存）。
  • 性能：深拷贝递归可能导致栈溢出，大数据量建议使用 structuredClone 或库函数。

引用链接： 1.JavaScript浅拷贝与深拷贝 - CSDN博客 2.JS深拷贝与浅拷贝 - 前端小巷子 3.JavaScript中的深拷贝与浅拷贝 - CSDN博客 4.总结JavaScript中的深拷贝与浅拷贝 - 阿里云开发者社区 5.js深拷贝、浅拷贝 - 晓晓 6.深拷贝和浅拷贝 - CSDN博客 7.浅拷贝和深拷贝及 JavaScript 实现 - 路漫漫 8.一文弄懂Javascript中的深拷贝和浅拷贝 - CSDN博客 9.面试京东,卡壳了。。 - 新浪新闻 10.什么是深拷贝;深拷贝和浅拷贝有什么区别;深拷贝和浅拷贝有哪些方法(详解) - CSDN博客 11.深拷贝与浅拷贝 - CSDN博客 12.深拷贝与浅拷贝:理解与实现 - CSDN博客 13.JS拷贝指南:浅拷贝与深拷贝详解 - 腾讯云 14.深入理解JavaScript中数据拷贝机制——深拷贝与浅拷贝 - 掘金开发者社区 15.什么是深拷贝,什么是浅拷贝 - 阿里云开发者社区 16.百度一面:你来谈谈JS中的浅拷贝与深拷贝 - 尚硅谷教育 17.JavaScript中深拷贝和浅拷贝 - 阿张 18.JS深拷贝、浅拷贝 和 使用场景 详解 - CSDN博客 19.JavaScript中的深拷贝和浅拷贝的实现讲解-阿里云开发者社区 - 阿里云开发者社区 20.js浅拷贝和深拷贝以及注意事项 - 腾讯云 21.快速掌握JavaScript深拷贝与浅拷贝 - 掘金开发者社区 22.JS 之浅拷贝与深拷贝 - 文江博客 23.JS基础知识总结(二):浅拷贝与深拷贝 - 腾讯云 24.js 浅拷贝和深拷贝的区别和应用 - 博客园 25.JavaScript 拷贝的深拷贝和浅拷贝有什么区别 - PingCode 26.一文带你理解javascript中的浅拷贝和深拷贝 - 做一个编程俗人 27.JavaScript中的浅拷贝与深拷贝 - 参圣 28.一篇文章彻底搞懂JavaScript中深拷贝和浅拷贝 - CSDN博客 29.JavaScript深浅拷贝区别 - 博客园 30.JavaScript 对象拷贝:浅拷贝与深拷贝的差异、应用及实现 - 掘金开发者社区 31.JavaScript深拷贝与浅拷贝的区别 - CSDN 32.在Javascript中深拷贝和浅拷贝的使用场景及二者的区别 - 博客园

Last updated: