JS之深浅拷贝

1.深拷贝与浅拷贝的区别

如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝。如果B没变，那就是深拷贝。

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象

2.栈堆、基本数据类型、引用数据类型
栈堆：存放数据的地方
基本数据类型：number,string,boolean,null,undefined.
引用数据类型(Object类)有常规名值对的无序对象{a:1}，数组[1,2,3]，以及函数等。

3.1.浅拷贝

 浅拷贝只是拷贝基本类型的数据，如果父对象的属性等于数组或另一个对象，那么实际上，子对象获得的只是一个内存地址，因此存在父对象被篡改的可能，浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存

例1：

let a= [0,1,2,3,4],b=a;
console.log(a===b);
a[0] = 1
console.log(a,b)

例2：

var Nation = {　　
            nation: '中国'
        };function extendCopy(p) {　　
            var c = {};　　
            for (var i in p) {　　　　
                c[i] = p[i];　　
            }　　
            return c;
        }
        var Doctor = extendCopy(Nation);
        Doctor.career = '医生';
        Doctor.nation = '美国';
        console.log(Doctor.nation); // 美国
        console.log(Nation.nation); // 中国
        console.log(Doctor.career); // 医生
        console.log(Doctor.__proto_ === Nation.__proto_) // true　　　　　// 这里涉及到使用拷贝父对象的属性实现继承

例3：

var obj = {
          a: "hello",
          b:{
              a: "world",
              b: 21
            },
          c:["Bob", "Tom", "Jenny"],
          d:function() {
              alert("hello world");
            }
        }
       
        var obj1 = simpleClone(obj);
        console.log('obj1=>>>',obj1);
 // 1、

         obj1.c = ['mm', "Tom", "Jenny"]; // 一层，作为整体，重写，全改变；改变属性值，不改变原对象 console.log('obj=>>>',obj); //obj.c => ["Bob", "Tom", "Jenny"] 　　　　　

// 2、 　　

         obj1.c[0] = 'mm'; // 浅拷贝时，改变属性的属性值，改变原对象 console.log('obj=>>>',obj); //obj.c => ["mm", "Tom", "Jenny"]

3.2.深拷贝

 深拷贝就是能够实现真正意义上的数组和对象的拷贝。递归调用"浅拷贝"。（深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象）

3.2.1

function deepClone(obj){
  let objClone = Array.isArray(obj)?[]:{};
  if(obj && typeof obj==="object"){
    for(key in obj){
      if(obj.hasOwnProperty(key)){
         //判断ojb子元素是否为对象，如果是，递归复制
          if(obj[key]&&typeof obj[key] ==="object"){
              objClone[key] = deepClone(obj[key]);
          }else{
              //如果不是，简单复制
              objClone[key] = obj[key];
          }
       }
     }
  }
  return objClone;
} 

let a=[1,2,3,4],b=deepClone(a);
a[0]=2;
console.log(a,b);
 

3.2.2

// jquery 有提供一个$.extend可以用来做 Deep Copy。
        var $ = require('jquery');
        var obj1 = {
            a: 1,
            b: { f: { g: 1 } },
            c: [1, 2, 3]
        };
        var obj2 = $.extend(true, {}, obj1);
        console.log(obj1.b.f === obj2.b.f);
        // false
        
        // 函数库lodash，有提供_.cloneDeep用来做 Deep Copy。
        var _ = require('lodash');
        var obj1 = {
            a: 1,
            b: { f: { g: 1 } },
            c: [1, 2, 3]
        };
        var obj2 = _.cloneDeep(obj1);
        console.log(obj1.b.f === obj2.b.f);
        // false

4.引用类型和基本类型栈内存储

4.1基本类型

 4.2引用类型

5.JS中拷贝Array的slice和concat方法

5.1.slice拷贝

 var a = [1,2,3];
var b = a.slice(); //slice
console.log(b === a);
a[0] = 4;
console.log(a);
console.log(b);

5.2.concat拷贝 

var a = [1,2,3];
var b = a.concat();  //concat
console.log(b === a);
a[0] = 4;
console.log(a);
console.log(b);
 

 看到结果，如果你觉得，这两个方法是深拷贝，那就恭喜你跳进了坑里！
来看看有意思的例子吧

var a = [[1,2,3],4,5];
var b = a.slice();
console.log(a === b);
a[0][0] = 6;
console.log(a);
console.log(b);
 

 可以看到slice和contact对于第一层是深拷贝，但对于多层的时候，是复制的引用，所以是浅拷贝
6.JSON 对象的 parse 和 stringify都是深拷贝

var obj = {name:'cancan',age:23,company : { name : '阿里', address : '杭州'} };
var obj_json = JSON.parse(JSON.stringify(obj));
console.log(obj === obj_json);
obj.company.name = "cancan82";
obj.name = "haha";
console.log(obj);
console.log(obj_json);