JS深拷贝：JSON.parse、_.copyDeep、structuredClone() 优缺点对比

已于 2023-02-21 11:45:06 修改
阅读量649 收藏 3
点赞数
文章标签： javascript 开发语言 ecmascript Powered by 金山文档
于 2023-02-01 15:38:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37889268/article/details/128835048
版权

  • JSON.parse(JSON.stringify(obj)) 方法使用简单，且兼容性好，可以处理简单数据类型的深拷贝。缺点： 如果你的 obj 对象中存在 Set、Map、正则、Error 对象，该方法会将其转成空对象字面量 { } ，如果存在 undefined，该方法会直接忽略，不会拷贝undefined。

  • _.copyDeep 兼容性好，功能强大，对于 Function 类型不会报错，但是缺点是需要注意处理 tree-shaking 否则会有性能损耗。

  • structuredClone 方法是浏览器原生支持的，对于 Function 类型会报错。缺点：兼容性问题，无法拷贝proxy类型的对象，所以在vue3中基本无法使用。

菠萝小包
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
destr:JSON.parse的更快，安全和方便的替代方法
05-26
Node.js 使用npm或yarn进行安装： npm i destr # or yarn add destr 导入到您的Node.js项目中： // CommonJS const destr = require ( 'destr' ) // ESM import destr from 'destr' 天野 import destr from '...
StringNumber:JSON.parse stringify将大数字转换为字符串
04-28
序列化可能不符合IEEE 754整数精度的值作为JSON API中的字符串是一个好主意，但是{ "value" : 9223372036854775807}例如仍然是有效的RFC4627 JSON字符串，并且在大多数JS运行时中JSON.parse的对象是此对象： { ...
structuredClone() 详解
LiamHong_的博客
03-01 1793
不能。
JSON.parse(JSON.stringify())实现深拷贝的缺点
m0_54566205的博客
03-15 3333
JSON.parse(JSON.stringify())方法是一种简单易用的实现深拷贝的方法，但它并不完美，使用时需要注意其缺陷。对于需要处理函数、循环引用等复杂情况的对象，可以使用其他方法来实现深拷贝。
pdf structuredClone is not defined 解决
最新发布
HHH917的博客
06-15 503
部分手机系统的浏览器 pdf v2版本会出现 structuredclone is not defined 的报错，这是因为浏览器过低。网站下方有个 polyfill的网址入口 可以解决低版本的兼容问题。
结构化克隆API的前世今生：从深拷贝到原生力量structuredClone()
球球不吃虾WHR2349博客
04-27 840
并且，相比 JSON.parse() ，structuredClone API 的性能更好，特别是在处理一些更大复杂的对象的时候，所以我们可以用它来作为代码里深拷贝的默认方法啦，为了兼容性考虑，可以用 JSON.stringify 或者其他工具函数作为备用。与浅拷贝相对的就是深拷贝，深拷贝算法也会一个一个地拷贝一个对象的属性，但是当它拷贝对另一个对象的引用时会递归调用，同时创建该引用类型的一个副本，这可以有效避免我们在代码里共享一个意想不到的对象引用。当然，大部分实际的需求场景中，我们没必要拷贝这些东西。
【你不知道的事】JavaScript 中用一种更先进的方式进行深拷贝：structuredClone
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
03-11 1008
本文我们要介绍的是 `structuredClone` 函数，它是内置在 JavaScript 运行时中的,它可以帮助我们进行深拷贝。
JSON深拷贝可能出现的问题有哪些
weixin_48723799的博客
03-20 1566
对象中存在 undefined、NaN 和 Infinity：在使用 JSON.stringify() 方法将对象转换为 JSON 字符串时，这些特殊的值会被转换为 null，因此在深拷贝后，这些值将丢失原来的特殊含义。构造函数和原型链的丢失：使用 JSON.stringify() 和 JSON.parse() 方法进行深拷贝时，会丢失原对象的构造函数和原型链信息，即新对象会失去与原对象的继承关系。
JavaScript： 常用的深拷贝的三种方式
Hr_ving的博客
01-05 434
JSON.parse( JSON.stringify( )) JSON.parse( ) 用于将 JSON 格式的字符串 转为 对象或数组 JSON.stringify( ) 用于将 对象或数组 转为 JSON 格式的字符串 缺点： 如果拷贝的内容含有 symbol ，map 等类型的时候，会自动忽略掉这些内容 let arr = [1,2,3,4,5]; let arr2 = JSON.parse(JSON.stringify(arr)); Object.assign( ) 参数
secure-json-parse:JSON.parse() 替代原型中毒保护
07-23
JSON.parse()替代原型中毒保护。 介绍 考虑一下： > const a = '{"__proto__":{ "b":5}}' ; '{"__proto__":{ "b":5}}' > const b = JSON . parse ( a ) ; { __proto__ : { b : 5 } } > b . b ; undefined > const...
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
10-17
主要介绍了JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能,结合实例形式分析了JSON.parse()与JSON.stringify()方法实现深拷贝的相关实现技巧与操作注意事项,需要的朋友可以参考下
json.zip_JSON_Json::Value_c++ Key Value_jsoncpp
09-24
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，被广泛用于Web服务和应用程序之间的数据传输。它易于人阅读和编写，同时也易于机器解析和生成。在C++环境中，处理JSON数据通常需要借助第三方库，如...
深拷贝，浅拷贝
m0_73462002的博客
02-01 222
如有问题 欢迎留言 共同进步 奥里给
猿创征文｜【vue3学习】vue3中实现深拷贝
m0_61486963的博客
09-02 7664
Vue3 中实现响应式数据深拷贝（针对ref 和 reactive）
深拷贝的五种实现方式
Z_J_CSDN的博客
07-08 3万+
深拷贝的几种实现方式
ReferenceError: XXX is not defined
天涯明月刀的博客
04-10 7674
前言 在react项目里我已经犯这个错误无数遍了，写出来以供大家差错。 原因 在react项目里，相信很多人会在constructor构造器里利用 this.func = this.func.bind(this)的方式来绑定上下文，在这个时候比较写成:this.func = this,funcbind(this)。差异很小吧，但是这个原因就导致了错误：ReferenceError: func i...
JSON.parse(JSON.stringify(obj))实现深拷贝的缺点
树上骑个猴的博客
01-10 4605
我们经常用JSON.parse(JSON.stringify(obj))来实现深拷贝，但是有一天出了问题，才发现JSON.stringify的时候容易导致一些特殊类型的数据丢失和损坏。 javaScript存储对象都是存地址的，所以浅拷贝会导致 obj1 和obj2 指向同一块内存地址。改变了其中一方的内容，都是在原来的内存上做修改会导致拷贝对象和源对象都发生改变，而深拷贝是开辟一块新的内存地址，将原对象的各个属性逐个复制进去。对拷贝对象和源对象各自的操作互不影响。 深拷贝和浅拷贝 深拷贝和浅拷贝是只针.
ReferenceError: XXX is not defined 错误及解决办法
热门推荐
A_Zeng_的博客
06-08 6万+
ReferenceError: XXX is not defined 错误及解决办法 我这里是报错是忘记了引入此方法所在的js文件 ， 解决办法： 引入所需的js文件， 此错误 另外一种情况就是 jQuery引入先后顺序不对，要先引入jQuery文件 ...
浏览器兼容性：JavaScript polyfill
薛定谔的猫-前端领域
05-30 1071
出于为 CSS 属性添加前缀的相同原因，浏览器也在实验阶段为 JavaScript API 添加前缀。因此，我们必须提供 API 的补丁版本，以确保它仍然可以在不原生支持它的浏览器上运行。这种补丁称为 polyfill。由于 JavaScript API 有自己的规范，因此并非所有浏览器都同时支持特定规范。比如为 Safari 15.4 之前提供 Array 的。又比如在Safari 15.4 之前。
解释这段代码 goods: JSON.parse(wx.getStorageSync('goods') || '[]'), flog: JSON.parse(wx.getStorageSync('flog') || 'false'), address: JSON.parse(wx.getStorageSync('address') || '{}'), postId: wx.getStorageSync('postId'), singleGood:JSON.parse(wx.getStorageSync('singleGood') || '{}'), isCart:JSON.parse(wx.getStorageSync('isCart') || '1'), user:JSON.parse(wx.getStorageSync('user') || '{}'),
06-03
这段代码用于从小程序本地缓存中读取数据，并将读取到的数据赋值给相应的变量。具体解释如下： 1. `goods`变量用于存储购物车中的商品信息，通过`wx.getStorageSync('goods')`方法从本地缓存中读取数据，并使用`JSON.parse`方法将读取到的数据转为JavaScript对象。 2. `flog`变量用于标记用户是否登录，通过`wx.getStorageSync('flog')`方法从本地缓存中读取数据，并使用`JSON.parse`方法将读取到的数据转为JavaScript布尔值。 3. `address`变量用于存储用户的收货地址信息，通过`wx.getStorageSync('address')`方法从本地缓存中读取数据，并使用`JSON.parse`方法将读取到的数据转为JavaScript对象。 4. `postId`变量用于存储某个帖子的ID，通过`wx.getStorageSync('postId')`方法从本地缓存中读取数据。 5. `singleGood`变量用于存储用户查看的单个商品信息，通过`wx.getStorageSync('singleGood')`方法从本地缓存中读取数据，并使用`JSON.parse`方法将读取到的数据转为JavaScript对象。 6. `isCart`变量用于标记用户当前是否在购物车页面，通过`wx.getStorageSync('isCart')`方法从本地缓存中读取数据，并使用`JSON.parse`方法将读取到的数据转为JavaScript布尔值。 7. `user`变量用于存储用户信息，通过`wx.getStorageSync('user')`方法从本地缓存中读取数据，并使用`JSON.parse`方法将读取到的数据转为JavaScript对象。 最终，这段代码的作用是从小程序本地缓存中读取数据，并将读取到的数据保存在相应的变量中，以供小程序的其他部分使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值