浅拷贝:仅仅是指针给了另一个对象
深拷贝 两个对象之间没有任何关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 浅拷贝:仅仅是指针给了另一个对象
var obj = {
name: '小甜甜', age: 24,
say() {
console.log('bebebeautiful');
}
}
// var obj1 = obj;
// console.log(obj1);
// obj1.name = 'xiaolajiao';
// console.log(obj);
// 深拷贝 两个对象之间没有任何关系
// 1. 通过json实现 属性可以深拷贝 但是会造成方法丢失
// var obj1 = JSON.stringify(obj);
// obj1 = JSON.parse(obj1);
// // console.log(obj1); //小甜甜
// obj1.name = '小番茄';
// 此时打印obj 它感受不到变化
// console.log(obj); //小甜甜
// //2. 通过for-in遍历循环 实现
// var obj1 = {};
// for (var attr in obj) {
// obj1[attr] = obj[attr]
// }
// console.log(obj1);
// obj1.say();
// 修改obj1 obj不能感受到
// obj1.name = '呵呵';
// console.log(obj);
// 3.使用Object.assign()实现
var obj1 = {};
Object.assign(obj1, obj);
// 这是将obj合并到obj1上
console.log(obj1);
obj1.age = 66; //obj感受不到变化
console.log(obj);
// 4.用...实现对象的深拷贝
//...叫做扩展运算符 ES6新增
// 使用场景 在函数调用 或数组构造时,将数组表达式或者string在语法层面展开
var obj = { name: 'xtt', age: 18 };
// console.log(...obj); //报错
var obj1 = { ...obj };
// console.log(obj1);
obj1.age = 66; //改变obj1,不影响obj
// console.log(obj);
</script>
</body>
</html>
以上就是今天的分享,欢迎补充探讨~~