在讲深拷贝和浅拷贝的时候先说一下js的数据类型,因为在我理解而言只有引用类型才有深浅拷贝的概念
基本数据类型
首先说一下js的五大基本数据类型,String,Number,undefind,Boolean,null
基本数据类型赋值的方式是直接赋值,直接在栈内存中完成
所以不存在赋值之后,改变一个另一个也会变动的情况
var a = 10
var b = a
b = 25
console.log(b) // 25
console.log(a) //10
引用类型
引用类型 Object,Date,Array,Function...
Function比较特殊,想要赋值的话需要用变量的方式申明,这个时候赋值相当于基本数据类型
抛开Function,其余引用类型,用‘=’赋值的时候其实赋给的是堆中的引用
var obj1 = {
name: "xiaoming",
age: 25
}
var obj2 = obj1
obj2.age = 26
console.log(obj1.age) //26
console.log(obj2.age) //26
这个时候obj1,obj2指向一个引用,所以两者中任何一个值发生改变都会改变对内存得值,那么指向这个堆引用得都会改变
这个时候需要说明一个问题,有的人也是赋值,但是效果和上图不同看一下代码
var obj1 = {
name: "xiaoming",
age: 25
}
var obj2 = obj1
obj2 = {
name : "xiaoming",
age: 26
}
console.log(obj1.age) //25
console.log(obj2.age) //26
所以他就很纳闷,感觉‘=赋值给的是地址’是不对的,这里我要解释一下,其实是对象申明的语法糖在搞怪
//语法糖模式
var obj = {
name: 'xiaoming',
age: 25
}
上面是语法糖模式,实际声明是这样的
var obj = new Object()
obj.name = "xiaoming"
obj.age = 25
这时再看上面的代码,obj2被赋值后,又通过语法糖的模式,在堆内存中重新声明可一块内存,所以这个时候obj1,obj2不是同一个引用,所以修改一个值的时候,另一个不会变,互不干涉
深拷贝,浅拷贝
深拷贝和浅拷贝的概念其实是针对引用类型而言的
浅拷贝:拷贝引用(原对象)
浅拷贝类似于上面的‘=’赋值,共用一个引用
深拷贝:拷贝实例,拷贝的是值(可以看作是对每个属性进行基本类型赋值)
如果一个对象没有对象嵌套,用 let copy = Object.assign({},obj)可以实现深拷贝
如果有对象嵌套上述的方法就不行了,因为内部的对象,会把引用拷贝给新对象,如下
let obj = {
name: 'lilei',
age: 28,
pingjia:{
good: 25,
bad: 44
}
}
let copy = Object.assign({},obj)
//这个时候会拷贝第一层的值,但是对象里面的对象是浅拷贝,拷贝的是引用,测试一下
copy.name = 'laowang'
copy.age = 28
copy.pingjia.good = 55
console.log(obj)
输出结果如下
copy和obj都变成了55
深拷贝的方法
1.直接对每个属性赋值(麻烦)
var obj1 = {
name: "xiaoming",
age: 25
}
var obj2 ={
name: obj1.name,
age: obj1.age
}
2.Object.assign()函数(只能进行一层深拷贝,无法做到真正的深拷贝),上面已经介绍过了
3.转成 JSON 再转回来
缺点:但是这种方法也有不少坏处,譬如它会抛弃对象的constructor,不管这个对象原来的构造函数是什么,在深拷贝之后都会变成Object。这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象,即那些能够被 json 直接表示的数据结构。RegExp对象是无法通过这种方式深拷贝。
也就是说,只有可以转成JSON格式的对象才可以这样用,像function没办法转成JSON。
var obj1 = {
name: "xiaoming",
age: 25
}
var obj2 = JSON.parse(JSON.stringify(obj1))
obj2.name = "xiaoliu"
console.log(obj1.name) //xiaoming
console.log(obj2.name) //xiaoliu
4.递归方法
function deepClone(initalObj, finalObj) {
var obj = finalObj || {};
for (var i in initalObj) {
var prop = initalObj[i]; // 避免相互引用对象导致死循环,如initalObj.a = initalObj的情况
if(prop === obj) {
continue;
}
if (typeof prop === 'object') {
obj[i] = (prop.constructor === Array) ? [] : {};
arguments.callee(prop, obj[i]);
} else {
obj[i] = prop;
}
}
return obj;
}
var obj = {name:'xiaoming',age:25}
var copy = deepClone(obj,{})
console.log(copy) //{name:'xiaoming',age:25}
copy.name = "xiaohong"
console.log(obj.name) //xiaoming
当然还有别的方法,就不一一赘述了