JavaScript数组对象的浅拷贝与深拷贝(二)实现对象深拷贝的方法(5种)

知识回调(不懂就看这儿!)

知识专栏 专栏链接
JavaScript知识专栏 https://blog.csdn.net/xsl_hr/category_12024214.html?spm=1001.2014.3001.5482
JavaScript深浅拷贝的区别+图解原理 https://blog.csdn.net/XSL_HR/article/details/129838095?spm=1001.2014.3001.5501

有关JavaScript的相关知识可以前往JavaScript知识专栏查看复习!!

场景复现

在上期文章中,我们从底层原理方面对JavaScript数组对象的浅拷贝和深拷贝进行了详细的介绍,看完上期文章之后,想必大家对浅拷贝与深拷贝都有了一定的认识,而本期文章将分享五个非常实用的深拷贝方法和三个实用的浅拷贝方法

好的深拷贝方法有什么作用

  • 首先,深拷贝的学习对于我们在项目开发中进行数据处理是非常有用的。
  • 深拷贝原理和方法的学习能够帮助我们规范代码,提高代码的有效性。
  • 通知深拷贝方法的学习能够更好地帮助我们解决因为拷贝方式不当而产生的bug。节约更多debug的时间。

下面我们来通过代码示例来详细介绍五种深拷贝的方法。 👇👇👇

实现对象深拷贝的五种方法

1.json暴力转化

通过JSON.stringify()JSON.parse() 将对象转为字符串之后在转为对象。

var obj = {
   name:'123'}
var obj2 = JSON.parse(JSON.stringify(obj))
var arr = ['old', 1, true, ['old1', 'old2'], {
   old: 1}]
var new_arr = JSON.parse(JSON.stringify(arr))
console.log(new_arr);
  • 这种简单粗暴的方式有局限性,当值为undefinedfunctionsymbol会在转换过程中被忽略。
  • JSON.stringify()不仅可拷贝数组还能拷贝对象(但不能拷贝函数,也不能解决循环引用问题)

2.es6扩展运算符

var obj = {
   name:'123',age:13};
var obj2 = {
   ...obj}

只能深度拷贝对象的第一层如果对象

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Dorable_Wander

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值