JS深浅拷贝

原网址:https://www.cnblogs.com/dengyao-blogs/p/11466598.html

1：深拷贝只是从源数据中拷贝一份出来进行操作，而不是改变源数据；改变源数据的那是浅拷贝；

2：原生js方法slice、concat都不是真正意义上的深拷贝，都仅只适用于一维数组，拷贝的属性不够彻底；

3：实现js深拷贝我们可以通过JSON.parse(JSON.stringify())、递归以及JQuery库的extend方法来实现；

---

基本类型复制：

var a = 1;
var b = a;//复制
console.log(b)//1
a = 2;//改变a的值
console.log(b)//1
console.log(a) //2

• 因为a，b都是属于基本类型，基本类型的复制是不会影响对方的，因为基本类型是每一次创建变量都会在栈内存中开辟一块内存，用来存放值，所以基本类型进行复制是不会对另外一个变量有影响的；

引用类型复制：

• 引用类型的复制我们分为数组的复制和对象的复制两个方面来进行讲解

---

js的浅拷贝

var arr1 = ['red','green'];
var arr2 = arr1;      //复制
console.log(arr2)   //['red','green'];
arr1.push('black') ;   //改变color1的值
console.log(arr2)    //['red','green','black']
console.log(arr1)    //["red", "green", "black"]

• arr1.push('black')添加了一个新的子项，var arr2=arr1这行代码是将两个引用类型数据的地址指针指向了同一块堆内存区域
• 不管是arr1还是arr2修改，任何一个改动两个数组都是会互相产生影响
• 直接赋值方式的复制就是引用类型的浅拷贝

---

• slice方法实现浅拷贝

var arr1 = ['red','green'];
var arr2 = arr1.slice(0);//复制
console.log(arr2)//['red','green'];
arr1.push('black') ;//改变color1的值
console.log(arr2)//["red", "green"]
console.log(arr1)//["red", "green", "black"]

• js原生的方法slice会返回一个新的数组，上述代码乍一看会以为是深拷贝，因为arr2和arr1相互复制和牵引，
• 而当arr1调用了push方法添加了新数组子项的时候，arr2没有发生变化
• 这是符合深拷贝的特性，但是拷贝的不够彻底，所以slice只能被称为浅拷贝
• slice方法只适用于一维数组的拷贝，在二维数组中就会破绽百出
• 下面我们再来看一下二维数组的例子：

var arr1=[1,2,3,['1','2','3']];
var arr2=arr1.slice(0);
 arr1[3][0]=0;
 console.log(arr1); //[1,2,3,['0','2','3']]
 console.log(arr2); //[1,2,3,['0','2','3']]

• 上述代码是一个二维数组，当我们在arr1[3][0]里面进行更改arr1的值的时候，我们发现arr1、arr2两个数组的值都发生了变化；所以事实证明slice不是深拷贝

---

• concat方法实现浅拷贝

var arr1 = ['red','green'];
var arr2 = arr1.concat();//复制
console.log(arr2)//['red','green'];
arr1.push('black') ;//改变color1的值
console.log(arr2)//["red", "green"]
console.log(arr1)//["red", "green", "black"]

var arr1=[1,2,3,['1','2','3']];
var arr2=arr1.concat();
 arr1[3][0]=0;
 console.log(arr1);//[1,2,3,['0','2','3']]
 console.log(arr2);//[1,2,3,['0','2','3']]

• concat方法在一维数组中是不会影响源数组的数据的，而在二维数组中concat的表现和slice是一样的

---

js的深拷贝

• js数组中实现深拷贝的方法都多种，比如JSON.parse(JSON.stringify())和递归以及JQuery库的extend方法（extend方法需要依赖JQuery库）

---

• 方法一: JSON.parse(JSON.stringify())

var arr1 = ['red','green'];
var arr2 = JSON.parse(JSON.stringify(arr1));//复制
console.log(arr2)//['red','green'];
arr1.push('black') ;//改变color1的值
console.log(arr2)//["red", "green"]
console.log(arr1)//["red", "green", "black"]

• 上述代码中我们可以清晰的看到JSON.parse(JSON.stringify())是真正意义上实现了深拷贝

---

• 方法二: 递归实现深拷贝

<script>
  const oldobj = {
   name:'zs',
   number:{
    num1:1,
    num2:2
   }
  }
  const newobj = {}  //创建一个新的对象
  function deepClone(newobj,oldobj) {
   for (const key in oldobj){
     let val = oldobj[key]
     if (val instanceof Array){ //如果是数组那就创建一个空数组
      newobj[key] =[]
      deepClone(newobj[key],val) 
     } else if (val instanceof Object){ //如果是对象那么就创建一个空对象
      newobj[key] ={}
      deepClone(newobj[key],val)
     } else  (
      newobj[key] = oldobj[key] //基础类型单纯复制
     )
   }
  }
  deepClone(newobj,oldobj) //传入新对象和旧对象
  oldobj.number.num1 = 3
  console.log(newobj)
 </script>