浅拷贝&深拷贝

本文详细介绍了JavaScript中的浅拷贝和深拷贝概念,通过实例解析了Object.assign()方法的浅拷贝特性,并探讨了两种深拷贝实现方式:递归拷贝和JSON函数转换。浅拷贝仅复制外层值,内部引用类型未独立;深拷贝确保新对象所有数据独立,不会随源对象变化。
摘要由CSDN通过智能技术生成

       深拷贝和浅拷贝主要是针对像Object 和 Array 这两种比较复杂的对象的。


一、浅拷贝

        简单来说,就是一个变量赋值给另一个变量(内存地址相同),其中一个变量的值改变,两个变量的值都变了,这就叫做浅拷贝。

let a = {
   age: 1
}
let b = a;
b.age = 2;
console.log(a)//age 2


ES6语法 Object.assign(target, sources)

target:拷贝的目标
sources: 被拷贝的对象

let a = {
   age: 1,
   person: {
      tall: 2
   }
}

let c = Object.assign({}, a);
a.person.tall = 5;//对深层次是浅拷贝
a.age = 6;
console.log(c);//age:1 c.person.tall:66
console.log(c.person.tall);//5
c.person.tall = 66;
console.log(a);//age:6 tall 66

        这就是一个浅拷贝的例子。总结来说就是, 浅拷贝只是将外层的值独立了出来,但是由于对象结构复杂,内部的引用类型值没有独立出来


二、深拷贝

        深拷贝就是拷贝后, 新拷贝的对象内部所有数据都是独立存在的(内存地址不同),不会随着源对象的改变而改变。

深拷贝的话一共有两种方式: 递归拷贝 和 利用JSON函数深拷贝

递归拷贝
实现原理: 对变量中的每个元素进行获取,若遇到基本类型值,直接获取;若遇到引用类型值, 则继续对该值的内部每个元素进行获取。

function deepCopy(obj) {
   let newobj = null;   //声明一个变量用来储存拷贝之后的内容
   //判断数据类型是否是复杂类型,如果是则调用自己,再次循环,如果不是,直接赋值即可,
   //由于null不可以循环但类型又是object,所以这个需要对null进行判断
   if (typeof (obj) == 'object' && obj !== null) {
      //声明一个变量用以储存拷贝出来的值,根据参数的具体数据类型声明不同的类型来储存
      newobj = obj instanceof Array ? [] : {};
      //循环obj 中的每一项,如果里面还有复杂数据类型,则直接利用递归再次调用copy函数
      for (var i in obj) {
         newobj[i] = deepCopy(obj[i])
      }
   } else {
      newobj = obj
   }
   return newobj;//函数必须有返回值,否则结构为undefined
}

JSON函数深拷贝
实现原理: 将变量的值转变成字符串形式, 然后再转化成对象赋值给新的变量

let h = {
   age: 1,
   person: {
      tall: 2
   }
}

let b = JSON.parse(JSON.stringify(h))
h.person.tall = 7;
console.log(b)//b.person.tall = 2

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

WebCsDn_TDCode

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

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

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

打赏作者

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

抵扣说明:

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

余额充值