浅拷贝:只拷贝对象的基础属性值,两个对象指向同一个内存地址。
深拷贝:拷贝对象的所有属性作为一个全新的对象。两个对象指向不同内存地址。
一、浅拷贝
1.使用Object.assign() 对象合并的方法。
var obj = {
x:20
}
var newObj = Object.assion({},obj);
console.log(newObj===obj);//true
newObj.x = 22;
console.log(obj.y)//22
var obj = {
x:18,
y:{
a:10
}
}
var newObj = Object.assign({}, obj);
console.log(newObj === obj);//false
newObj.y.x = 20;
理解:上述代码将原始对象拷贝到一个空对象,就得到原始对象的克隆,原对象和拷贝对象指向不同的内存地址,修改原对象和克隆对象,互不影响。
缺点: 只能深拷贝一级属性,二级以上属性(引用类型)就是浅拷贝
- 拓展运算符
var obj = {
x:{
y:10
}
}
var newObj = {...obj};
newObj.x.y = 20;
console.log(obj.x.y)//20
缺点:只能深拷贝一级属性,二级以上属性(引用类型)就是浅拷贝
2、深拷贝
- JSON.parse()和JSON.stringify()
//利用json两个api进行深拷贝
function deepClone(obj){
return JSON.parse(JSON.Stringify(obj));
}
理解:通过对象符串化和字符串对象化进行对象的拷贝。此方法只使用与纯JSON对象的深拷贝
缺点:数据类型为function或者为undefined情况无法复制
2.递归遍历(比较完美的解决方法)
function deepClone(obj){
if(obj===null) return null;
if(typeof obj!=='object') return obj;
let newObj = Array.isArray(obj)?[]:{};
for(let key in obj){
if(obj.hasOwnProperty(key)){
newObj[key] = typeof obj[key] === 'object' ? arguments.callee(obj[key]) : obj[key];
}
}
return newObj;
}
理解:
(1)用obj.hasOwnProperty(key)来判断属性是否来自原型链上,因为for…in…也会遍历其原型链上的可枚举属性。
(2)函数用到递归算法,在函数有名字,而且名字以后也不会变的情况下,这样定义没有问题。但问题是这个函数的执行与函数名 factorial 紧紧耦合在了一起。为了消除这种紧密耦合的现象,需要使用 arguments.callee。