浅拷贝和深拷贝

基本数据类型和引用数据类型的区别

JavaScript的基本数据类型有Number、Null、Undefined、String、Boolean、Symbol。
基本数据类型的值是直接存储在栈（stock）内存中的。
而引用数据类型就是对象类型(Object type),包括了array、object、function等等，引用数据类型，变量是存储在栈（stock）内存中，值是存储在堆内存中，栈内存会提供一个引用地址（也就是指针），指向堆内存的值。

1. 什么是浅拷贝

对于引用数据类型，浅拷贝就是复制某个引用数据类型的指针，拷贝的结果和被拷贝的对象都是指向同一内存地址，改变其中一个引用数据类型的值，另一个值也随之改变。
引用拷贝都是浅拷贝

实现浅拷贝
Object.assign(target, source1, source2)方法是浅拷贝，用于对象的合并，将源对象(source)的所有可枚举属性，复制到目标对象上。

let obj1 = { a: 1, b: 2 }
let obj2 = { c: 3, d: 4, e: { f: 5 } }
let res = Object.assign(obj1, obj2)
console.log(obj1, obj2)
//如果对象的属性值不是一个对象的话，那么就不会影响该值
obj2.c = 33
console.log(obj1, obj2)
obj1.a = 11
console.log(obj1, obj2)
//如果源对象某个属性的值是对象，那么目标对象拷贝的是这个对象的引用
obj2.e.f = 55
console.log(obj1, obj2)
console.log(obj1 === res)

{ a: 1, b: 2, c: 3, d: 4, e: { f: 5 } } { c: 3, d: 4, e: { f: 5 } }
{ a: 1, b: 2, c: 3, d: 4, e: { f: 5 } } { c: 33, d: 4, e: { f: 5 } }
{ a: 11, b: 2, c: 3, d: 4, e: { f: 5 } } { c: 33, d: 4, e: { f: 5 } }
{ a: 11, b: 2, c: 3, d: 4, e: { f: 55 } } { c: 33, d: 4, e: { f: 55 } }
true

2. 什么是深拷贝

深拷贝就是在内存中开辟新的栈，来存储拷贝的值。拷贝的结果和被拷贝的对象的指针分别指向不同的内存地址，改变其中一个对象的值，另一个对象的值不会改变。

怎么实现深拷贝

3.1 使用JSON.stringify和JSON.parse方法

JSON.stringify()方法将某个对象转换成 JSON 字符串形式，
JSON.parse() 方法将数据转换为 JavaScript 对象

const obj = {
  name: 'Nikki',
  address: {
    x: 1,
    y: 2
  }
}
let copyObj = JSON.parse(JSON.stringify(obj))
console.log(copyObj)    //{ name: 'Nikki', address: { x: 1, y: 2 } }
console.log(copyObj.address === obj.address)  //false

3.2 手写一个深拷贝函数

function depClone(source) {
    let res = source.constructor === Array ? [] : {} //判断是数组还是对象
    for (let items in source) {
        if (source.hasOwnProperty(items)) {
        //为对象时
        if (source[items] && typeof(source[items]) === 'object') {
            res[items] = source[items].constructor === Array ? [] : {}//可不写，相当于是为数据申请一个空间
            res[items] = depClone(source[items])//递归调用
        } else {
            res[items] = source[items]//为基本数据类型时直接赋值
        }
        }
    }
    return res
}

let a = {
    name: 'qq',
    age: 34,
    hobby: ['跑步', '羽毛球', '乒乓球'],
    else: {
        marrige: 'no',
        num: 24
    }
}
let b = depClone(a)
b.age = 24
console.log(a, b)

输出结果：
{
  name: 'qq',
  age: 34,
  hobby: [ '跑步', '羽毛球', '乒乓球' ],
  else: { marrige: 'no', num: 24 }
} {
  name: 'qq',
  age: 24,
  hobby: [ '跑步', '羽毛球', '乒乓球' ],
  else: { marrige: 'no', num: 24 }
}

3.3 使用第三方库lodash

解构赋值是深拷贝还是浅拷贝：
如果所解构的原对象是一维数组或对象，其本质就是对基本数据类型进行等号赋值，那它就是深拷贝；
如果是多维数组或对象，其本质就是对引用类型数据进项等号赋值，那它就是浅拷贝；

let arr1 = [1, 2, 3, 4]
let arr2 = [...arr1]
arr2.push(5)
console.log(arr1, arr2)
//[ 1, 2, 3, 4 ] [ 1, 2, 3, 4, 5 ]

let arr3 = [1, 2, 3, 4, [5, 6]]
let arr4 = [...arr3]
arr4[4].push(7)
arr4.push(8)
console.log(arr3, arr4)
//[ 1, 2, 3, 4, [ 5, 6, 7 ] ] [ 1, 2, 3, 4, [ 5, 6, 7 ], 8 ]