1、为什么要对象拷贝?
- 对象作为函数参数的时候,返回一个全新的对象,不希望操作原对象,就时候就需要对象拷贝,也叫对象克隆
2、浅拷贝
- 只能拷贝第一层级的。深层的不能拷贝(就是里面属性也是一个对象),拷贝的属性仍然是指向同一个对象,数据改变时也会影响到原始对象的数据
// 对象拷贝(克隆):对象作为函数参数的时候,不希望操作原对象 let stu = { name: "jasmine", age: 18, friend: { name: "qiqi" } }; // 浅拷贝:只能拷贝第一层级的 // 深层的不能拷贝(就是属性值也是一个对象),仍然是指向同一个对象 function copyObject(obj) { let newObj = {}; for (let i in obj) { newObj[i] = obj[i]; } return newObj; } let newStu = copyObject(stu); newStu.age = 20; newStu.friend.name = "jasmine"; console.log(stu); console.log(newStu); /* 输出结果: stu = { name: "jasmine", age: 18, friend: { name: "jasmine" } }; newStu = { name: "jasmine", age: 20, friend: { name: "jasmine" } }; */
3、深拷贝
- 所有的层级的数据都拷贝过来,不放过一个属性,拷贝指向的对象都是一个全新的对象,不影响原始对象的数据
// 深拷贝:所有的层级的数据都拷贝过来,不放过一个属性 function copyObject(obj) { let newObj = {}; for (let i in obj) { // 递归(实现深度拷贝) if (obj[i] instanceof Object) { newObj[i] = copyObject(obj[i]); } else { newObj[i] = obj[i]; } } return newObj; } let newStu = copyObject(stu); newStu.name = "qiqi"; newStu.friend.name = "qiqi"; console.log(stu); console.log(newStu); /* 输出结果: stu = { name: "jasmine", age: 18, friend: { name: "jasmine" } }; newStu = { name: "jasmine", age: 20, friend: { name: "qiqi" } }; */
4、浅拷贝与深拷贝的区别
类型 | 区别 |
浅拷贝 | 只拷贝第一层级的数据,深层的属性对象仍然指向同一个对象,数据改变时影响原始对象 |
深拷贝 | 所有层级的数据都拷贝过来,数据改变时,不影响原始对象 |
4、深拷贝的两种方法(递归、转JSON)
<script> // 对象拷贝(克隆):对象作为函数参数的时候,不希望操作原对象 var stu = { name: "jasmine", age: 18, friend: { name: "jasmine" } }; // 深拷贝:所有的层级的数据都拷贝过来,不放过一个属性 function copyObject(obj) { let newObj = {}; // 1、递归(实现深度拷贝) for (let i in obj) { if (obj[i] instanceof Object) { newObj[i] = copyObject(obj[i]); } else { newObj[i] = obj[i]; } } // 2、转JSON let newStr = JSON.stringify(obj); newObj = JSON.parse(newStr); return newObj; } var newStu = copyObject(stu); newStu.name = "qiqi"; newStu.friend.name = "qiqi"; console.log(stu); console.log(newStu); /* 输出结果: stu = { name: "jasmine", age: 18, friend: { name: "jasmine" } }; newStu = { name: "jasmine", age: 20, friend: { name: "qiqi" } }; */ </script>