经典面试题之赋值和深浅拷贝的区别

1.区别

**赋值：**基本数据直接拷贝，互不影响，引用数据把地址赋值给新对象，新旧对象指向同一个地址。
**浅拷贝: **基本类型之间互不影响，对象只会复制对象的第一层基本数据和引用类型的地址，对象内部嵌套的引用类型会共享内存地址。所以，浅拷贝对象的第一层数据是互相不影响的，但是内部嵌套的引用类型会共享内存地址
**深拷贝: **基本数据和对象都互不影响。改变新对象不会影响旧对象，新旧对象互不影响。

2.详解

1-赋值

赋值操作（简称赋值）：赋值操作符 **= **右边的表达式会先被求值，然后将结果赋给左边的变量或属性。
基本数据直接拷贝，互不影响，引用数据把地址赋值给新对象，新旧对象指向同一个地址。

// 赋值给变量
let a = 1;
let b = a;
a = 2;
b = 3;
console.log(a, b); // 2 3 ->基本数据互不影响// 赋值对象
const obj = { a: 1 };
const obj1 = obj;
obj.b = 0;
obj1.b = 1;
console.log(obj.b, obj1.b); // 对象把地址赋值给新对象，新旧对象指向同一个地址

2-浅拷贝

拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 。
浅拷贝方法

• concat(）
• slice()
• 扩展运算符

const obj1 = {name: "zbt",age: 18,dog: {name: "旺财",age: 3}
}
// Object.assign()方法
const objAssign = Object.assign({}, obj1);
objAssign.dog.name = "assign";
obj1.name = "法外狂徒";
objAssign.name = "张三";
console.log(obj1.name, objAssign.name); // 法外狂徒 张三 基本数据类型精确拷贝，互不影响
console.log(obj1.dog.name, objAssign.dog.name);  //assign assign 内存引用数据拷贝的是内存地址，数据共享，互相影响。// 扩展运算符方法
const objExtend = { ...obj1 }
objExtend.dog.name = "extend";
obj1.name = "出道两年半";
objExtend.name = "哥哥";
console.log(obj1.name, objExtend.name); // 出道两年半 哥哥 基本数据类型互不影响
console.log(obj1.dog.name, objExtend.dog.name); // extend extend 同理

3-深拷贝

深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象, 故新旧数据互不影响。

// 1.直接stringify + parse
const a = {};
const b = JSON.parse(JSON.stringify(a));// 2.直接使用回调函数。
//使用递归的方式实现数组、对象的深拷贝
function deepClone(obj) {//判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝var objClone = Array.isArray(obj) ? [] : {};//进行深拷贝的不能为空，并且是对象或数组if (obj && typeof obj === "object") {for (key in obj) {if (obj.hasOwnProperty(key)) { // 过滤掉原型链上继承的对象属性,for in 不能遍历出非可枚举属性if (obj[key] && typeof obj[key] === "object") { // obj[key]->用来判断null,undefinedobjClone[key] = deepClone(obj[key]);} else {objClone[key] = obj[key];}}}}return objClone;
}
let obj1 = { name: '张三', action: { say: 'hi'},'': undefined }
obj1[Symbol(66)] = 999;
console.log(obj1);
let newObj = deepClone(obj1)console.log(newObj);

3-扩展

stringify深拷贝和循环回调深拷贝的对比。

对象在stringify在拷贝过程中，以下几种情况需要注意：

1. 对象中有undefined类型或function类型的数据时 — undefined和function会直接丢失。
2. 对象中有NaN、Infinity和-Infinity这三种值的时候 — 会变成null。
3. 对象允许嵌套任意深度，但是不能构成引用循环,否则stringify会抛出错误。

const obj = {name:"我是一个外部对象"
}
const oldObj = {name:"BUG海",notDefined:undefined,foo(){console.log("我会被stringfy哥哥丢掉嘛"); //真会丢},one:NaN,two:Infinity,three:-Infinity,
};
// oldObj.objInterior = oldObj; //加上这个引用循环stringify,真的会抛出错误
const newObj = JSON.parse(JSON.stringify(oldObj));
console.log("🚀 ~ file: test.js:12 ~ newObj:", newObj)   

所以推荐使用递归的方式进行深拷贝或者第三方工具库的方式 immutale，Lodash ，fast-copy等