深拷贝与浅拷贝的深度理解

本文主要讲一下 js 的基本数据类型以及一些堆和栈的知识和什么是深拷贝、什么是浅拷贝、深拷贝与浅拷贝的区别，以及怎么进行深拷贝和怎么进行浅拷贝。

堆和栈的区别

其实深拷贝和浅拷贝的主要区别就是其在内存中的存储类型不同。

堆和栈都是内存中划分出来用来存储的区域。

在将深拷贝和浅拷贝之前，我们先来重新回顾一下 ECMAScript 中的数据类型。主要分为

基本数据类型主要是：undefined，boolean，number，string，null。    基本数据类型值不可变     基本数据类型存放在栈中  基本类型的比较是值的比较  基本类型的赋值的两个变量是两个独立相互不影响的变量。

引用类型（object）是存放在堆内存中的，引用类型值可变   引用类型的比较是引用的比较（对象在堆内存的引用地址）

浅拷贝 ：只复制一层对象的属性    对于 简单数据类型的数据 （直接复制）   所以拷贝前后没有影响       对于复杂数据类型  由于只拷贝了引用地址     所以复制后 对新对象进行修改 可  能会影响原对象

深拷贝   ：开辟一个新的内存空间，存储空新对象(与源对象无关),然后递归遍历源对象结构(直到源对象都为基本数据类型)，然后进行给空对象的复制操作

深拷贝的代码

// 旧对象
let oldObj = {
  name: "张三",
  age: 18,
  sex: "男",
  hobbies: { weight: 175 },
  color: ["pink", "red", "blue"],
};
// 新对象
let newObj = {};
// 定义deepCopy函数
function deepCopy(newObj, oldObj) {
  for (var key in oldObj) {
    //   拿到属性值
    var item = oldObj[key];
    // 判断属性值是不是数组  ---先判断数组 再判断对象
    if (item instanceof Array) {
      // 递归调用 遍历结构
      newObj[key] = [];
      deepCopy(newObj[key], item);
    } else if (item instanceof Object) {
      // 判断属性值是不是对象
      newObj[key] = {};
      deepCopy(newObj[key], item);
    } else {
      // 值类型为基本类型了  进行赋值操作
      newObj[key] = item;
    }
  }
  //   返回新的数据对象
  return newObj;
}
// 调用深度拷贝函数
deepCopy(newObj, oldObj);
console.log(newObj);

浅拷贝的代码

// 旧的对象
let obj = {
  name: "zhangsan",
  age: 18,
  hobbies: {
    weight: 175,
  },
};
// 新的对象
let o = {};

// es6语法糖 浅拷贝
let res = Object.assign(o, obj);
console.log(res);

// for in可实现浅拷贝
for (var key in obj) {
  // k是属性名 obj[k] 属性值
  o[key] = obj[key];
}

console.log(o);