如何在JS里进行深拷贝

什么是深拷贝?

深拷贝是指创建新对象的时候,对象拥有原始对象的所有属性的副本。

浅拷贝是指创建的新对象包含有原始对象的引用。也就是说浅拷贝仅复制对象的第一层结构,而不会递归地复制嵌套的对象数据。

如果仅使用浅拷贝创建对象的话,对新对象的更改,如果更改的是引用数据类型的属性时候,会改动原始对象。在实际应用中,我们期望对对象所做的修改不会影响到原对象,因此就需要使用深拷贝来复制对象。

深拷贝的方法

1. 使用 JSON.parse() 与 JSON.stringify()

这是一种简单的实现方式,先把对象使用stringify序列化,然后再用 parse 把它重新解析为对象,从而得到一个全新的对象。

javascript 复制代码
const original = { a: 1, b: 2, c: { d: 3 } };
const copied = JSON.parse(JSON.stringify(original));

一般不推荐使用这种方式进行深拷贝,原因有:

  • 无法复制函数,undefined,Symbol等
  • 性能比较低

2. 使用结构化克隆 structuredClone()

这是一个javascript原生支持的深拷贝方法,可以很方便地进行深拷贝。

看看它在各个浏览器以及node的支持情况:

javascript 复制代码
const original = { a: 1, b: 2, c: { d: 3 }};
const copied = structuredClone(original);
复制代码

如果浏览器或者node环境支持这个方法的话,推荐使用结构化克隆方案。

3. 使用递归

通过递归遍历对象各个属性进行拷贝。

javascript 复制代码
function deepClone(obj) {
    if (obj === null) return null;
    if (obj instanceof Date) return new Date(obj);
    if (obj instanceof RegExp) return new RegExp(obj);
    if (typeof obj !== 'object') return obj;

    const cloneObj = new obj.constructor();

    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            cloneObj[key] = deepClone(obj[key]);
        }
    }
    return cloneObj;
}

const original = { a: 1, b: 2, c: { d: 3, e: new Date() }, x: [1,2,3]};
const copied = deepClone(original);

4. 使用三方库 lodash.cloneDeep()

lodash 库提供了很多很有用的工具类,如果项目里面已经有使用lodash的话,直接使用它的深拷贝也是可以的。

如果单纯为了深拷贝而引入三方库的话,那就要斟酌斟酌了,毕竟引入一个三方库还是会导致安装包增大不少的。

javascript 复制代码
// 需要引入 Lodash 库
const _ = require('lodash');
const original = { a: 1, b: { c: 2 } };
const copied = _.cloneDeep(original);

总结

尽量使用结构化克隆 structuredClone,避免使用JSON方式。

相关推荐
nbsaas-boot1 小时前
Java 正则表达式白皮书:语法详解、工程实践与常用表达式库
开发语言·python·mysql
chao_7891 小时前
二分查找篇——搜索旋转排序数组【LeetCode】两次二分查找
开发语言·数据结构·python·算法·leetcode
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
风无雨1 小时前
GO 启动 简单服务
开发语言·后端·golang
斯普信专业组1 小时前
Go语言包管理完全指南:从基础到最佳实践
开发语言·后端·golang
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
我是苏苏3 小时前
C#基础:Winform桌面开发中窗体之间的数据传递
开发语言·c#
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js