深拷贝和浅拷贝的区别

一.深拷贝

深拷贝开辟一个新的栈，两个对象属完成相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性

常见的深拷贝方式有：

• _.cloneDeep()

• jQuery.extend()

• JSON.stringify()

• 手写循环递归

_.cloneDeep()

const _ = require('lodash')
const obj1 = {
  a: 1,
  b: { f: { g: 1 } },
  c: [1, 2, 3],
}
const obj2 = _.cloneDeep(obj1)
console.log(obj1.b.f === obj2.b.f) // false

jQuery.extend()

const $ = require('jquery')
const obj1 = {
  a: 1,
  b: { f: { g: 1 } },
  c: [1, 2, 3],
}
const obj2 = $.extend(true, {}, obj1)
console.log(obj1.b.f === obj2.b.f) // false

JSON.stringify()

const obj = JSON.parse(JSON.stringify(obj1))

循环递归

var obj = {   //原数据，包含字符串、对象、函数、数组等不同的类型
    name:"test",
    main:{
        a:1,
        b:2
    },
    fn:function(){
        
    },
     friends:[1,2,3,[22,33]]
}

function copy(obj){
     let newobj = null;   //声明一个变量用来储存拷贝之后的内容
     
  //判断数据类型是否是复杂类型，如果是则调用自己，再次循环，如果不是，直接赋值即可，
  //由于null不可以循环但类型又是object，所以这个需要对null进行判断
     if(typeof(obj) == 'object' && obj !== null){ 
     
 //声明一个变量用以储存拷贝出来的值,根据参数的具体数据类型声明不同的类型来储存
         newobj = obj instanceof Array? [] : {};   
         
 //循环obj 中的每一项，如果里面还有复杂数据类型，则直接利用递归再次调用copy函数
         for(var i in obj){  
             newobj[i] = copy(obj[i])
         }
     }else{
         newobj = obj
     }    
   return newobj;    //函数必须有返回值，否则结构为undefined
}

 var obj1 = copy(obj)
 obj1.name = '修改成功'
 obj1.main.a = 100
console.log(obj,obj1)

二.浅拷贝

如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址

即浅拷贝是只拷贝一层，深层次的引用类型则共享内存地址

在JavaScript中，存在浅拷贝的现象有：

• Object.assign
• Array.prototype.slice(), Array.prototype.concat()
• 拓展运算符

Object.assign

var obj = {
  age: 18,
  nature: ['smart', 'good'],
  names: {
    name1: 'fx',
    name2: 'xka',
  },
  love: function () {
    console.log('fx is a great girl')
  },
}
var newObj = Object.assign({}, fxObj)

slice()

const fxArr = ['One', 'Two', 'Three']
const fxArrs = fxArr.slice(0)
fxArrs[1] = 'love'
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]

concat()

const fxArr = ['One', 'Two', 'Three']
const fxArrs = fxArr.concat()
fxArrs[1] = 'love'
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]

拓展运算符

const fxArr = ['One', 'Two', 'Three']
const fxArrs = [...fxArr]
fxArrs[1] = 'love'
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]

三.区别

前提为拷贝类型为引用类型的情况下：

• 浅拷贝是拷贝一层，属性为对象时，浅拷贝是复制，两个对象指向同一个地址

• 深拷贝是递归拷贝深层次，属性为对象时，深拷贝是新开栈，两个对象指向不同的地址