[JavaScript知识库]浅拷贝&深拷贝

? ? ? ?深拷贝和浅拷贝主要是针对像Object 和 Array 这两种比较复杂的对象的。

一、浅拷贝

????????简单来说，就是一个变量赋值给另一个变量（内存地址相同），其中一个变量的值改变，两个变量的值都变了，这就叫做浅拷贝。

let a = {
   age: 1
}
let b = a;
b.age = 2;
console.log(a)//age 2

ES6语法 Object.assign(target, sources)

target：拷贝的目标
sources： 被拷贝的对象

let a = {
   age: 1,
   person: {
      tall: 2
   }
}

let c = Object.assign({}, a);
a.person.tall = 5;//对深层次是浅拷贝
a.age = 6;
console.log(c);//age:1 c.person.tall:66
console.log(c.person.tall);//5
c.person.tall = 66;
console.log(a);//age:6 tall 66

????????这就是一个浅拷贝的例子。总结来说就是， 浅拷贝只是将外层的值独立了出来，但是由于对象结构复杂，内部的引用类型值没有独立出来

二、深拷贝

????????深拷贝就是拷贝后， 新拷贝的对象内部所有数据都是独立存在的（内存地址不同），不会随着源对象的改变而改变。

深拷贝的话一共有两种方式： 递归拷贝 和 利用JSON函数深拷贝

递归拷贝
实现原理： 对变量中的每个元素进行获取，若遇到基本类型值，直接获取；若遇到引用类型值， 则继续对该值的内部每个元素进行获取。

function deepCopy(obj) {
   let newobj = null;   //声明一个变量用来储存拷贝之后的内容
   //判断数据类型是否是复杂类型，如果是则调用自己，再次循环，如果不是，直接赋值即可，
   //由于null不可以循环但类型又是object，所以这个需要对null进行判断
   if (typeof (obj) == 'object' && obj !== null) {
      //声明一个变量用以储存拷贝出来的值,根据参数的具体数据类型声明不同的类型来储存
      newobj = obj instanceof Array ? [] : {};
      //循环obj 中的每一项，如果里面还有复杂数据类型，则直接利用递归再次调用copy函数
      for (var i in obj) {
         newobj[i] = deepCopy(obj[i])
      }
   } else {
      newobj = obj
   }
   return newobj;//函数必须有返回值，否则结构为undefined
}

JSON函数深拷贝
实现原理： 将变量的值转变成字符串形式， 然后再转化成对象赋值给新的变量

let h = {
   age: 1,
   person: {
      tall: 2
   }
}

let b = JSON.parse(JSON.stringify(h))
h.person.tall = 7;
console.log(b)//b.person.tall = 2