深拷贝与浅拷贝

深拷贝与浅拷贝`

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
深浅拷贝由基本类型和引用类型,而基本类型分为值，引用类型分为
引用类型的地址和引用类型的值
则涉及到js中变量的存储方式,js中变量的存储方式分为栈(stack)和堆(heap)
而栈(stack)中存放的为基本类型的值和引用类型的地址
堆(heap)中放的是引入类型的值
而深浅拷贝则是相当于引入类型来说
深拷贝：传的为引入类型的值 浅拷贝：传的为引入类型的地址==

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

深拷贝与浅拷贝的分类
基本类型和引入类型的区别
js变量的两种存储方式
栈(stack)和堆(heap)存放的类型
深拷贝传的为引入类型的值
浅拷贝传的为引入类型的地址

---

一、深拷贝与浅拷贝的分类

深浅拷贝由基本类型和引用类型,而基本类型分为值，引用类型分为
引用类型的地址和引用类型的值

二、使用步骤

1.数组的拷贝–浅拷贝

代码如下（示例）：

 var arr = [1, 2, 3]
 console.log(arr);//Array(3)
 var arr_1 = arr;
 console.log(arr_1);//(3) [1, 2, 3]
 arr_1.push(4)
 console.log(arr_1);//(4) [1, 2, 3, 4]
 console.log(arr);//(4) [1, 2, 3, 4]
 // 打印arr_1和打印arr结果一致，所以更改arr_1也会更改arr
 // 证明数组的拷贝为浅拷贝，传的地址

2.for 循环----深拷贝

代码如下（示例）：

   var arr_2 = [2, 3, 4]
   var arr_3 = [];
   for (var i = 0; i < arr_2.length; i++) { // console.log(arr_2[i]);//2,3,4 
       arr_3.push(arr_2[i])
   }
   console.log(arr_3);//(3)[2, 3, 4]
   arr_3.unshift(1);
   console.log(arr_3);//(4) [1, 2, 3, 4] 
   console.log(arr_2);//(3) [2, 3, 4] 
   // 经过arr_3.unshift(1)打印arr_3,结果不一样，则证明传的为值，并不会影响arr_2
   // 则for循环为深拷贝，传的为引入类型的值 

3.slice()----深拷贝

 // slice()起到截取的作用，它会返回一个新数组，并不改变原数组 
 var arr_4 = [1, 2, 3];
 var arr_5 = arr_4.slice(0);
 console.log(arr_5);//3) [1, 2, 3]
 arr_5.shift()
 console.log(arr_5);//(2) [2, 3]
 console.log(arr_4);//(3) [1, 2, 3]
 /*则打印arr_5和arr_4结果不一样，将arr_4的值传给arr_5后，
      针对于arr_5进行操作，并不会影响arr_4,
      证明arr_4传给arr_5的为值，并不是地址
      所以slice()为深拷贝*/

4.concat()----深拷贝

var arr_6 = [1, 2, 3];
var arr_7 = arr_6.concat()
console.log(arr_7);//(3) [1, 2, 3]
arr_7.pop()
console.log(arr_7);//(2) [1, 2]
console.log(arr_6);//(3) [1, 2, 3]
// 打印arr_6和arr_7结果并不一样，则证明.......同上面的slice()
// 传递的为值，为深拷贝

5.对象-----深拷贝

// var obj = {
     name: "obj",
     age: 18
 }
 var obj_1 = {};
 // 针对对象遍历要用for in 循环
 for (var k in obj) {
     obj_1[k] = obj[k];
 }
 console.log(obj_1[k]);//18   异步
 console.log(obj[k]);//18  异步
 console.log(obj_1);//{name: 'obj', age: 18}
 console.log(obj);//{name: 'obj', age: 18}
 obj_1.age = 20;
 console.log(obj_1);//{name: 'obj', age: 20}
 console.log(obj);//{name: 'obj', age: 18}
 // 打印obj和obj_1的结果并不相同,则证明................同上;
 // 所以对象传递的为值，为深拷贝

附(常见的浅拷贝)

使用 Array.prototype.slice() 方法：

var shallowCopy = originalArray.slice();

2.使用 Array.prototype.concat() 方法：

var shallowCopy = [].concat(originalArray);

3.使用 ES6 的扩展运算符（…）：

var shallowCopy = [...originalArray];

附(常见的深拷贝)

1.使用 JSON 对象的方法：

var deepCopy = JSON.parse(JSON.stringify(originalArray));

##2. 使用递归进行深拷贝：

function deepClone(source) {
  if (typeof source !== 'object' || source === null) {
    return source;
  }
  
  var target = Array.isArray(source) ? [] : {};
  
  for (var key in source) {
    if (source.hasOwnProperty(key)) {
      target[key] = deepClone(source[key]);
    }
  }
  
  return target;
}

var deepCopy = deepClone(originalArray);

---

总结

提示：这里对文章进行总结：

例如：以上就是今天要讲的内容，本文仅仅简单介绍了深浅拷贝的使用，而且还提供了大量能使我们快速便捷地处理数据的函数和方法。