javascript对象和数组的深拷贝与浅拷贝

深拷贝和浅拷贝是针对复杂数据类型来讲的，浅拷贝只拷贝一层，而深拷贝是层层拷贝。 这里区分一下深拷贝和浅拷贝，浅拷贝经过直接赋值的方式（arr2=arr1）来实现arr2数组的建立，实质上只是将arr2指向了数组数据[1,2,3,4,5]在堆内存中的保存地址。也就是说arr一、arr2保存的是同一个堆内存地址。所以改变一个数组，会引发另外一个数组同步改变，由于本质上只有一个数组。 深拷贝则是在堆内存另外开辟一片地址，将数组数据[1,2,3,4,5]存放进去，而后将arr2指向这个新的地址。所以改变一个数组不会影响另外一个数组，两个数组独立变化。由于本质是两个数组。

浅拷贝和深拷贝都是对于JS中的引用类型而言的，浅拷贝就只是复制对象的引用（堆和栈的关系，简单类型Undefined，Null，Boolean，Number和String是存入堆，直接引用，object array 则是存入桟中，只用一个指针来引用值），若是拷贝后的对象发生变化，原对象也会发生变化。只有深拷贝才是真正地对对象的拷贝。

一、浅拷贝

浅拷贝的意思就是只复制引用（指针），而未复制真正的值。

const originArray = [1,2,3,4,5];
const originObj = {a:'a',b:'b',c:[1,2,3],d:{dd:'dd'}};
 
const cloneArray = originArray;
const cloneObj = originObj;
 
console.log(cloneArray); // [1,2,3,4,5]
console.log(originObj); // {a:'a',b:'b',c:Array[3],d:{dd:'dd'}}
 
cloneArray.push(6);
cloneObj.a = {aa:'aa'};
 
console.log(cloneArray); // [1,2,3,4,5,6]
console.log(originArray); // [1,2,3,4,5,6]
 
console.log(cloneObj); // {a:{aa:'aa'},b:'b',c:Array[3],d:{dd:'dd'}}
console.log(originArray); // {a:{aa:'aa'},b:'b',c:Array[3],d:{dd:'dd'}}
复制代码

上面的代码是最简单的利用 = 赋值操做符实现了一个浅拷贝，能够很清楚的看到，随着 cloneArray 和 cloneObj 改变，originArray 和 originObj 也随着发生了变化。

二、深拷贝

就是对目标的彻底拷贝，不像浅拷贝那样只是复制了一层引用，就连值也都复制了。 只要进行了深拷贝，它们老死不相往来，谁也不会影响谁。

目前实现深拷贝的方法很少，主要是两种：

• 利用 JSON 对象中的 parse 和 stringify，可是这种简单粗暴的方法有其局限性。当值为undefined、function、symbol 会在转换过程当中被忽略

• ES6 中 引入了 Object.assgn 方法和 ... 展开运算符也能实现对对象的拷贝。

• 利用递归，递归的思想就很简单了，就是对每一层的数据都实现一次 建立对象->对象赋值 的操做，简单粗暴上代码：

function deepClone(source){
  const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组仍是对象
  for(let keys in source){ // 遍历目标
    if(source.hasOwnProperty(keys)){
      if(source[keys] && typeof source[keys] === 'object'){ // 若是值是对象，就递归一下
        targetObj[keys] = source[keys].constructor === Array ? [] : {};
        targetObj[keys] = deepClone(source[keys]);
      }else{ // 若是不是，就直接赋值
        targetObj[keys] = source[keys];
      }
    }
  }
  return targetObj;
}
复制代码

三、数组的深拷贝

• ES6方法 采用扩展运算符，扩展运算符就是将数组扩展为逗号隔开的序列。

let arr1 = [1,2,3,4,5];
let arr2 = [...arr1];
复制代码

• ES5方法slice 经过数组的slice方法，你们注意slice和splice的区别，slice的英文的意思是“切开”的意思，而splice在英文中是“拼接”的意思。字面意思不一样，能够引出用法的不一样。 两者区别：slice是从原数组切出一个新数组，原数组不变，返回切出的新数组。 splice经过先切后拼的方式实现原数组的增（先切0个数组元素再拼n个）、删（先切n个再拼0个）、改（先切n个再拼n个）功能，原数组改变，返回切掉的数组。 而下面所说的concat是真正的拼接，原数组未变，返回拼接后的新数组。

let arr1 = [1,2,3,4,5];
let arr2 = arr1.slice(0)
复制代码

• ES5方法concat

let arr1 = [1,2,3,4,5];
let arr2 = arr1.concat()
复制代码