Lodash cloneDeep、JSON.parseJSON.stringify、... 扩展运算符、Object.assign 深拷贝的区别；

已于 2022-07-22 11:07:11 修改
阅读量1.1k 收藏
点赞数
分类专栏： JavaScript 文章标签： json javascript 前端
于 2022-07-22 10:56:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40314318/article/details/125927014
版权

Preface

在新项目中的 utils 中发现他们在引用 Lodash 的情况下手写了一个 深拷贝.
彡(-_-;)彡
于是就突然好奇，这几种深拷贝有什么区别。
在这里插入图片描述

测试内容

测试中不包含 Lodash
声明一个 Object 类型变量，obj 中放置多种类型属性，进行深拷贝对比其结果
在这里插入图片描述

结论

JSON.parse JSON.stringify 这组的数据异常 缺失、转换

function undefined 类型直接丢失.

Date Error regExp NaN infinity 被转换
在这里插入图片描述
注： 扩展运算符 Object.assign 的 string 属性是在深拷贝后进行修改

如果只是简单的数据拷贝，可以使用 JSON.parse(JSON.stringify()) 来进行拷贝

建议使用 后者 ... Object.assign()

JSON.Stringify报错: Uncaught TypeError: Converting circular structure to JSON

我看刑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript对象拷贝与Object.assign用法实例分析
12-02
本文实例讲述了JavaScript对象拷贝与Object.assign用法。分享给大家供大家参考，具体如下： 深拷贝与浅拷贝 在 JavaScript 中，对于基本数据类型（undefined、null、boolean、number、string）来说，在变量中存储的就是这个变量本身的值，复制是对值的复制，不存在深浅之说。但C系语言的共同特点中有，存储引用类型（对象），实际中在变量里存的是它的地址。因此对 JavaScript 中的复杂数据类型（object）来说，也会有浅拷贝和深拷贝的概念：浅拷贝指两个不同的变量存的是同一个对象的地址，即两个变量指向同一块内存区域；深拷贝则是重新分配了一块内
深拷贝使用cloneDeep和JSON.parse(JSON.stringify())的区别
最新发布
qq_56918166的博客
08-21 1018
cloneDeep
JSON.stringify() 与 JSON.parse()的区别以及用法
qq_47443027的博客
03-24 1147
简单概括 1、JSON.parse(“要转换的数据”) 2、JSON.stringify(“要转化的数据”) 3、首先，两个方法的用法是有差别的： ①.JSON.stringify是从一个对象中解析出字符串 ②.JSON.parse是从一个字符串中解析出json(键值对) 4、所以在使用的时候如果参数不对应，就不能正确转换： JSON.stringify() 从一个对象中解析出字符串 JSON.stringify({"a":"1","b":"2"}) // 结果是："{"a":"1..
深克隆的实现方法---lodash、递归函数、json.parse(json.stringfy)
频繁记录
06-28 1763
深克隆的实现方法---lodash、递归函数、json.parse(json.stringfy)
lodash入门
weixin_42246997的博客
04-20 1610
简介 Lodash是一个著名的javascript原生库，不需要引入其他第三方依赖。是一个意在提高开发者效率,提高JS原生方法性能的JS库。简单的说就是，很多方法lodash已经帮你写好了，直接调用就行，不用自己费尽心思去写了，而且可以统一方法的一致性。Lodash使用了一个简单的 _ 符号，就像Jquery的 $ 一样，十分简洁。 类似的还有Underscore.js和Lazy.js ...
踩坑记：JSON.parse和JSON.stringify
大香蕉的博客
06-27 2620
在项目中很多人为求简单、方便在进行数据的深拷贝时会采用JSON.parse(JSON.stringify(...))的方式，殊不知，这两个组合的深克隆方式存在很多弊端，要慎用！ 当被序列化的数据中有Function 或 undefined 时，序列化后，Function 和 undefined 会丢失.........
javascript中的对象相关方法四(深拷贝)
weixin_47359038的博客
03-26 3203
文章目录前言lodash.cloneDeep()JSON.parse(JSON.stringify())自己封装深拷贝总结 前言 在开发中涉及到对象或数组的深拷贝，推荐使用lodash库中的cloneDeep方法，我在github上看这个方法已经好几年没更新了，说明已经很成熟了。哪怕自己封装，封装到最完善也和这个方法一样，重复造轮子！这里主要理一下深拷贝函数的封装思路。 lodash.cloneDeep() 使用很简单，就是引库调函数。 var _ = require('lodash'); var obj
从lodash源码看数组扁平化实现
狂想曲
03-28 2951
lodash源码 import isFlattenable from './isFlattenable.js' /** * The base implementation of `flatten` with support for restricting flattening. * * @private * @param {Array} array The array to flatten. * @param {number} depth The maximum recursion depth.
js之深拷贝与浅拷贝
weixin_44395929的博客
06-03 372
一、拷贝是什么? 从生活中理解,拷贝就是用u盘中复制一份文件到电脑中,或者是将某个文件夹的快捷方式发到桌面上。 拷贝分为两种 浅拷贝 深拷贝 二、产生浅拷贝与深拷贝的原因 浅拷贝就是类似于将一个文件夹的快捷方式发送到桌面上,无论是从桌面上打开还是从路径中打开都是对同一个文件夹的操作。 1)从js理解,因为js有基本类型和引用类型之分。 基本类型存放在栈内存中 引用类型放在堆内存中 当我们调用一个变量时,实际上是在栈内存中查询该变量, 此时堆内存中的引用类型将地址放在栈内存中。如果我们调用该引用类型,是
浅拷贝与深拷贝发现 JSON.stringify
qq_45591403的博客
08-29 354
浅拷贝与深拷贝 JSON.stringify 基本类型 基本数据类型有7种：Number、String、Boolean、Null、Undefined、Symbol（ES6）、BigInt（ES10）。变量均按值存放于栈中，赋值直接用=即可。 引用类型 引用数据类型有1种：Object。变量内存地址存放于栈中，值存在堆中，引用类型的赋值与下面讨论的浅拷贝与深拷贝密切相关。 浅拷贝 首先声明 浅拷贝 ≠ 赋值。 赋值=赋的是对象的内存地址，两个对象指向堆中同一份存储空间，互相影响。 let obj1 = {
js中的深拷贝和浅拷贝总结
chaopingyao的博客
04-11 627
一、概念 JavaScript中的数据分为基本类型和引用类型，一般基本类型的数据占用内存大小确定，保存于栈中；引用类型的数据由于在创建之初数据占用内存的大小不确定，但是保存数据的地址占用内存大小确定，因此引用类型的数据实体保存于堆中，按需分配，引用类型在堆中保存数据实体的起始地址保存于栈中。当解释器寻找引用类型的值时，会首先检索其在栈中的地址，取得地址后再从堆中获得数据实体。 一般来说，浅拷贝...
JOSN.parse(JSON.stringify())实现深拷贝的缺点
天渺(喵)工作室
01-23 2270
​ 首先推荐在项目中引用lodash三方工具库cloneDeep方法用来做数据深拷贝。 // import { cloneDeep } from 'lodash'; import cloneDeep from 'lodash/cloneDeep';// 只引用一个 推荐这样写 let a = cloneDeep(1); 案例数据 var obj = { name: 'zhangsan', date: new Date(), regExp: new RegE
lodash常用api之Array数组方法篇
热门推荐
喵大嗷的博客
05-07 1万+
_.flattenDeep(array)：将array递归为一个一维数组 如果不用lodash，个人的思路就是将array使用JSON.stringify转化为字符串，然后使用字符串的replace方法将字符'['和']'去除掉 使用这个方法会方便很多 _.flattenDeep([1, [2, [3, [4]], 5]]); // => [1, 2, 3, 4, 5] ...
json方法实现拷贝有什么问题?_关于js深拷贝与浅拷贝的区别，实现深拷贝的几种方法...
weixin_35544490的博客
02-03 682
数据深拷贝是实际项目中你总有一天或者必然会遇到的问题，甚至很多人可能对这两个概念并不是很清晰。简单来说，深拷贝就是把一条数据A复制出来个副本B，修改副本B数据并不会影响原来数据A，浅拷贝则反之，修改数据B会影响到原来的A数据。下面总结下有些处理深拷贝的方法(下列方法demo均来自于互联网，本文章主要用于总结归档，方便后人查阅)浅拷贝let a=[0,1,2,3,4], b=a;co...
转：关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
weixin_30333885的博客
03-09 150
1. JSON.parse(jsonString): 在一个字符串中解析出JSON对象 ? 1 2 3 var str = '[{"href":"baidu.com","text":"test","orgId":123,"dataType":"curry","activeClass":"haha"}]'; JSON.parse(str)...
js对JSON的操作
qq_36939013的博客
06-22 581
var flightVideo = JSON.parse([[${flightVideo}]]);
你所不知道的JSON.parse() 和 JSON.stringify() – 高级用法
AlbenXie的博客
05-10 1835
这里介绍一下，我主要介绍一下 JSON.parse() 和 JSON.stringify() 的高级用法，可以在实际应用中给我们带来一些方便。JSON.parse()JSON.parse() 可以接受第二个参数，它可以在返回之前转换对象值。比如这例子中，将返回对象的属性值大写：JavaScript 代码:const user = { name: 'John', email: 'john@awe...
深拷贝与浅拷贝
roman
10-12 466
2、深拷贝与浅拷贝 看这一篇的时候建议先看一下上一篇关于数据类型的文章。 直接赋值 直接赋值:把对象a赋值给对象b,实际上是把对象b的地址指向对象a的对象。a与b的地址指针一样，指向同一个对象，所以修改b时，a也会跟着发生改变。注意，修改b的无论是对象属性（引用数据类型）还是非对象属性（基本数据类型），a都会跟着发生改变。 let a = { name:'a', arr:[1,2] } let b = a; b.name = 'b'; console.log(a.name); // b b.arr
Object.assign()深拷贝的例子
06-02
Object.assign()方法可以用于浅拷贝对象。如果要进行深拷贝，需要先使用JSON.stringify()将对象转化为JSON字符串，再使用JSON.parse()将JSON字符串转化为新的对象。以下是一个深拷贝的例子： ```javascript let obj = { name: 'Alice', age: 20, address: { city: 'Beijing', country: 'China' } }; let newObj = JSON.parse(JSON.stringify(obj)); newObj.name = 'Bob'; newObj.address.city = 'Shanghai'; console.log(obj); // { name: 'Alice', age: 20, address: { city: 'Beijing', country: 'China' } } console.log(newObj); // { name: 'Bob', age: 20, address: { city: 'Shanghai', country: 'China' } } ``` 注意，这种方法虽然可以进行深拷贝，但是如果对象中含有函数、正则表达式等特殊类型的属性，会失去它们的特殊性，变成普通的对象属性。同时，如果对象中有循环引用的情况，会出现无限递归的问题。在实际应用中，需要根据具体情况选择更合适的深拷贝方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值