大家好,又见面了,我是你们的朋友全栈君。
一、 “深拷贝” 与 “浅拷贝” 的区别
对于这个问题,可以考虑从深拷贝和浅拷贝的使用或者起源说起,也就是为什么会出现这个问题。
首先了解一些javascript的基本知识。
【1】javascript变量包含两种不同数据类型的值:基本类型和引用类型。
①基本类型值指的是简单的数据段,包括es6里面新增的一共是有6种,具体如下:
String、Number、Boolean、Null、Undefined、Symbol
②引用类型值指那些可能由多个值构成的对象,具体如下:
Object(Object、Array、Function)
在将一个值赋给变量时,解析器必须确定这个值是基本类型值还是引用类型值。基本数据类型是按值访问的,因为可以操作保存在变量中的实际的值。
引用类型的值是保存在内存中的对象。与其他语言不同,JavaScript 不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间。 在操作对象时, 实际上是在操作对象的引用而不是实际的对象。
【2】javascript的变量的存储方式–栈(stack)和堆(heap)
栈:自动分配内存空间,系统自动释放,里面存放的是基本类型的值和引用类型的地址
堆:动态分配的内存,大小不定,也不会自动释放。里面存放引用类型的值。
【3】javascript值传递与址传递
基本类型与引用类型最大的区别实际就是传值与传址的区别
值传递:基本类型采用的是值传递。
let a = 10; // 定义一个变量a并赋值为10
let b = a; // 将a的值10赋值给b (a、b都是基本类型,值传递)
b++; // b自加
console.log(a, b) // 10, 11复制代码
址传递:引用类型则是地址传递,将存放在栈内存中的地址赋值给接收的变量。
let a = ['a', 'b', 'c']; // 定义一个数组a并赋值
let b = a; // 数组是引用类型,采用地址传递,将a的地址赋值给b
b.push('d'); // 给b数组增加一个'd'元素
console.log(a) // ['a', 'b', 'c', 'd']
console.log(b) // ['a', 'b', 'c', 'd']复制代码
分析:由于a和b都是引用类型,采用的是址传递,即a将地址传递给b,那么a和b必然指向同一个地址(引用类型的地址存放在栈内存中),而这个地址都指向了堆内存中引用类型的值。当b改变了这个值的同时,因为a的地址也指向了这个值,故a的值也跟着变化。
举例:就好比是a租了一间房,将房间的地址给了b,b通过地址找到了房间,那么b对房间做的任何改变(添加了一些绿色植物)对a来说肯定同样是可见的。那么如何解决上面出现的问题,就是使用浅拷贝或者深拷贝了。 JS的基本类型不存在浅拷贝还是深拷贝的问题,主要是针对于引用类型
【4】浅拷贝和深拷贝区别总结
字面意思:
浅拷贝—拷贝的级别浅。
深拷贝—拷贝级别更深。
具体:
浅拷贝—浅拷贝是指复制对象的时候,只对第一层键值对进行独立的复制,如果对象内还有对象,则只能复制嵌套对象的地址
深拷贝—深拷贝是指复制对象的时候完全的拷贝一份对象,即使嵌套了对象,两者也相互分离,修改一个对象的属性,也不会影响另一个。其实只要递归下去,把那些属性的值仍然是对象的再次进入对象内部一 一进行复制即可。
浅拷贝案例
浅拷贝解决就是先设置一个新的对象obj2,通过遍历的方式将obj1对象的值一 一赋值给obj2对象。
// 数组的浅拷贝
let arr1 = [1, 2, 3]
let arr2 = []
for (let i in arr1) {
arr2[i] = arr1[i]
}
arr2.push(4)
console.log(arr1) // [1, 2, 3]
console.log(arr2) // [1, 2, 3, 4]
// 对象的浅拷贝
let obj1 = {
a: '1',
b: '2',
c: '3'
}
let obj2 = {}
for (let i in obj1) {
obj2[i] = obj1[i]
}
obj2.d = '4'
console.log(obj1) // {a: "1", b: "2", c: "3"}
console.log(obj2) // {a: "1", b: "2", c: "3", d: "4"}
// 浅拷贝函数封装
function shallowCopy(obj1, obj2) {
for(var key in obj1) {
obj2[key] = obj1[key]
}
}复制代码
但上面代码只能实现一层的拷贝,无法进行深层次的拷贝,封装函数再次通过对象数组嵌套测试如下:
// 浅拷贝函数封装
function shallowCopy(obj1, obj2) {
for(var key in obj1) {
obj2[key] = obj1[key]
}
}
// 对象的浅拷贝
let obj1 = {
a: '1',
b: '2',
c: {
name: 'Demi'
}
}
let obj2 = {}
shallowCopy(obj1, obj2) //将obj1的数据拷贝到obj2
obj2.c.name = 'dingFY'
console.log(obj1) // {a: "1", b: "2", c: {name: 'dingFY'}}
console.log(obj2) // {a: "1", b: "2", c: {name: 'dingFY'}}复制代码
结果证明,如果对象内还有对象,则只能复制嵌套对象的地址,无法进行深层次的拷贝,当改变obj2嵌套对象c的值后,obj1嵌套对象c的值也跟着变了
这个时候我们可以使用深拷贝来完成,所谓深拷贝,就是能够实现真正意义上的数组和对象的拷贝,我们通过递归调用浅拷贝的方式实现。
深拷贝案例
// 深拷贝函数封装
function deepCopy(obj) {
// 根据obj的类型判断是新建一个数组还是对象
let newObj = Array.isArray(obj)? [] : {};
// 判断传入的obj存在,且类型为对象
if (obj && typeof obj === 'object') {
for(key in obj) {
// 如果obj的子元素是对象,则进行递归操作
if(obj[key] && typeof obj[key] ==='object') {
newObj[key] = deepCopy(obj[key])
} else {
// // 如果obj的子元素不是对象,则直接赋值
newObj[key] = obj[key]
}
}
}
return newObj // 返回新对象
}
// 对象的深拷贝
let obj1 = {
a: '1',
b: '2',
c: {
name: 'Demi'
}
}
let obj2 = deepCopy(obj1) //将obj1的数据拷贝到obj2
obj2.c.name = 'dingFY'
console.log(obj1) // {a: "1", b: "2", c: {name: 'Demi'}}
console.log(obj2) // {a: "1", b: "2", c: {name: 'dingFY'}}复制代码
结果证明上面的代码可以实现深层次的克隆。
数组的浅拷贝
如果是数组,我们可以利用数组的一些方法比如:slice、concat 返回一个新数组的特性来实现拷贝。
【1】Array.concat()
let arr = ['one', 'two', 'three'];
let newArr = arr.concat();
newArr.push('four')
console.log(arr) // ["one", "two", "three"]
console.log(newArr) // ["one", "two", "three", "four"]复制代码
【2】Array.slice()
let arr = ['one', 'two', 'three'];
let newArr = arr.slice();
newArr.push('four')
console.log(arr) // ["one", "two", "three"]
console.log(newArr) // ["one", "two", "three", "four"]复制代码
数组的深拷贝
这里介绍一个技巧,不仅适用于数组还适用于对象!不过存在一个问题,就是不能拷贝函数
let arr = {
a: 'one',
b: 'two',
c: {
name: 'Demi'
}
};
let newArr = JSON.parse( JSON.stringify(arr) );
newArr.c.name = 'dingFY'
console.log(arr); // {a: "one", b: "two", c: {name: 'Demi'}}
console.log(newArr); // {a: "one", b: "two", c: {name: 'dingFY'}}
// 测试函数能否复制
let arr = {
a: 'one',
b: ()=>{
console.log('test')
}
};
let newArr = JSON.parse( JSON.stringify(arr) );
console.log(arr); // {a: "one", b: ()=>{console.log('test')}}
console.log(newArr); // {a: "one"} // 函数没有复制成功复制代码
对象的浅拷贝
Object.assign()方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。但是 Object.assign() 进行的是浅拷贝
let arr = {
a: 'one',
b: 'two',
c: 'three'
};
let newArr = Object.assign({}, arr)
newArr.d = 'four'
console.log(arr); // {a: "one", b: "two", c: "three"}
console.log(newArr); // {a: "one", b: "two", c: "three", d: "four"}复制代码
浅拷贝封装方法
原理:遍历对象,然后把属性和属性值都放在一个新的对象
let shallowCopy = function (obj) {
// 只拷贝对象
if (typeof obj !== 'object') return;
// 根据obj的类型判断是新建一个数组还是对象
let newObj = obj instanceof Array ? [] : {};
// 遍历obj,并且判断是obj的属性才拷贝
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = obj[key];
}
}
return newObj;
}复制代码
深拷贝封装方法
原理:我们在拷贝的时候判断一下属性值的类型,如果是对象,我们递归调用深拷贝函数就好了
let deepCopy = function (obj) {
// 只拷贝对象
if (typeof obj !== 'object') return;
// 根据obj的类型判断是新建一个数组还是对象
let newObj = obj instanceof Array ? [] : {};
// 遍历obj,并且判断是obj的属性才拷贝
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
// 如果obj的子属性是对象,则进行递归操作,否则直接赋值
newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
}
}
return newObj;
}复制代码
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/106856.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...