JavaScript深拷贝和浅拷贝

数据类型和堆栈的关系

• 基本类型：undefined null Boolean Bumber String Symbol
• 应用类型：Object Array Date Function RegExp等

存储方式

• 基本类型：基本类型的值在内存中占据固定大小，保存在栈内存中。

  
  
  image.png

• 引用类型：引用类型的值是对象，保存在堆内存中。而栈内存中存储的是对象的变量标识符以及对象在堆内存中的存储地址，引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。

  
  
  image.png

注意：闭包中的变量存储在堆内存中，

赋值操作

基本数据类型的复制

    let foo = 'bar'
    let newFoo = foo
    newFoo = 'newBar'
    console.log(foo) //bar
    console.log(newFoo) //newBar

结论：在栈内存中的数据发生变化的时候，系统会自动为新的变量分配一个新的值在栈内存中，两者互不影响。

引用数据类型的复制

   let obj1 = {foo:'bar'}
    let obj2 = obj1
    obj1.foo = 'change bar'
    console.log(obj1)//{foo: "change bar"}
    console.log(obj2)//{foo: "change bar"}

引用类型数据的复制是复制对应变量的引用（地址），两个变量地址指针相同，指向堆内存中的对象。

浅拷贝

浅拷贝：新的对象复制已有的对象中非对象属性的引用。

Array.prototype.slice.实现浅拷贝

代码1

    var arr1 = [1, 2, 3, { a: 1 }]
    var arr2 = Array.prototype.slice.call(arr1)
    arr2[2] = 222
    console.log(arr1, arr2) // [1, 2, 3, { a: 1 }] [1, 222, 3, { a: 1 }]

输出结果可以看出，arr1[2]与arr2[2]在栈内存中的引用地址并不相同。

代码2

    var arr1 = [1, 2, 3, { a: 1 }]
    var arr2 = Array.prototype.slice.call(arr1)
    arr2[3].a = 1111
    console.log(arr1, arr2) // [1, 2, 3, { a: 1111 }] [1, 2, 3, { a: 1111 }]

输出结果可以看出，arr1[3]和arr2[3]在栈内存中的引用地址相同。

Object.assign.实现浅拷贝

    let source = {foo:'bar',obj:{name:'jack'}}
    let target = {}
    Object.assign(target,source)
    target.foo = 'change bar'
    target.obj.name = 'tom'
    console.log(source) //{foo:'bar',obj:{name:'tom'}}
    console.log(target) //{foo:'change bar',obj:{name:'tom'}}

Array.prototype.concat.实现浅拷贝

    let arr1 = [1,2,3,{a:1}]
    let arr2 = arr1.concat([])
    arr2[0] = 111
    arr2[3].a = 'aaa'
    console.log(arr1,arr2) //[1,2,3,{a:'aaa'}] [111,2,3,{a:'aaa'}]

...扩展运算符.实现浅拷贝

    let arr1 = [1, 2, 3, { a: 1 }]
    let arr2 = [...arr1]
    arr2[0] = 111
    arr2[3].a = 'aaa'
    console.log(arr1, arr2) //[1,2,3,{a:'aaa'}] [111,2,3,{a:'aaa'}

手动实现浅拷贝

function cloneShadow(source) {
      let result
      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          result[key] = source[key]
        }
      }
      return result
    }

深拷贝

定义：深拷贝会拷贝一份一个一模一样的对象，从堆内存中开辟一块新的内存存储新的对象，新对象跟原对象不共享内存，两者互不影响。

JSON.parse(JSON.stringify())实现深拷贝

    let source = { foo: 'bar', obj: { name: 'jack' } }
    let target = JSON.parse(JSON.stringify(source))
    target.foo = 'change bar'
    target.obj.name = 'tom'
    console.log(source)  // { foo: 'bar', obj: { name: 'jack' } }
    console.log(target)  // { foo: 'change bar', obj: { name: 'tom' } }

JSON.parse(JSON.stringify())，先把对象转换成字符串保存在磁盘中，再用JSON.parse()反序列化为对象。

注意点

• 如果原对象中存在symbol，undefined则经过序列化后不存在新对象中。
• 无法拷贝不可枚举的属性，无法拷贝原型链。
• 拷贝Date引用类型会变成字符串
• 拷贝RegExp引用类型会变成空对象

手写简易版深拷贝

function cloneDeep(source){
      let result
      if(typeof source !== 'object') return source
      for(var key in source){
        if(Object.prototype.hasOwnProperty(source,key)){
          if(typeof source[key] === 'object'){
            target[key] = cloneDeep(source[key])
          }else{
            target[key] = source[key]
          }
        }
      }
      return result
    }

第三方深拷贝库

lodash