深拷贝还在用lodash吗?来试试原装的structuredClone()吧!

一直以来深拷贝是前端的一个必考科目,面试来个手写deepClone函数你麻不麻?现在2025年了,得站起来了,来看看原装的structuredClone()函数吧。

以前的深拷贝

基本就两个实现方式

  • JSON.parse(JSON.stringify(obj))
  • lodash 的 cloneDeep

JSON.parse(JSON.stringify(obj))的优点是简单清晰,原生方法,缺点对象存在循环引用会报错:

js 复制代码
const obj = { a: 1 }
obj.b = obj

const obj1 = JSON.parse(JSON.stringify(obj))

还有Date对象会转化成字符串,Set、Map、正则、Error 对象,该方法会将其转成空对象字面量 { } ,如果存在 undefined,该方法会直接忽略

js 复制代码
const obj = { date: new Date('2025-07-10') }
const obj1 = JSON.parse(JSON.stringify(obj))
obj1.date // '2025-07-10T00:00:00.000Z'

const obj = {
    set: new Set([1, 2, 3]),
    map: new Map([['key1', 'value1'],['key2', 'value2']]),
    regex: /abc/gi,
    error: new Error('error!'),
    undefined: undefined
}
const obj1 = JSON.parse(JSON.stringify(obj))
console.log(obj1)

至于lodash老问题了

就算按需引入体积也不小

对有的体积有严格要求的项目直接就PASS了。

现在的深拷贝

废话不多说直接看代码

js 复制代码
const obj = { name: 'John' };
const clonedObj = structuredClone(obj);
console.log(obj === clonedObj); // false
obj.itself = obj
const clonedObj2 = structuredClone(obj);
console.log(clonedObj2.itself === obj); // false
console.log(clonedObj2.itself === clonedObj2); // true

const complex = {
    map: new Map([["key", "value"]]),
    set: new Set([1, 2, 3]),
    date: new Date(),
    regex: /abc/gi
};
const clone = structuredClone(complex);
console.log(clone); 
console.log(clone === complex); // false

优雅,简洁,舒服,还得是原装的。

StructuredClone()方法使用结构化克隆算法将给定的值进行深拷贝,该方法还支持把原值中的可转移对象转移(而不是拷贝)到新对象上。可转移对象与原始对象分离并附加到新对象,它们将无法在原始对象中被访问。这是MDN上的定义,转移这个定义有点理解不了,这是官方示例

js 复制代码
// 创建一个给定字节大小的 ArrayBuffer
const buffer1 = new ArrayBuffer(16);

const object1 = {
  buffer: buffer1,
};

// 克隆包含 buffer 的对象,并将其转移
const object2 = structuredClone(object1, { transfer: [buffer1] });

// 从克隆后的 buffer 创建数组
const int32View2 = new Int32Array(object2.buffer);
int32View2[0] = 42;
console.log(int32View2[0]);

// 从原 buffer 创建数组将抛出 TypeError
const int32View1 = new Int32Array(object1.buffer);

我粗浅的理解是键值之间的连接打断了,把缓存区值的指向指向了新的克隆对象,大概这么个意思,评论如果有大神知道,欢迎交流讨论!

最后看一下兼容性:

可以看到基本主流浏览器(除了IE)都支持了这个方法,Node17版本也支持了,可以放心大胆的用起来了。

相关推荐
2501_915918412 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂3 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技3 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip3 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go4 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x4 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java4 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)4 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术5 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体