深拷贝、浅拷贝的区别？怎么实现深拷贝？

一、浅拷贝

浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝。如果属性值是基本类型，拷贝的就是基本类型的值；如果属性是引用类型，拷贝的就是内存地址。

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

• Object.assign

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

• Array.prototype.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']

• Array.prototype.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']

二、深拷贝

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

常见的深拷贝方法有：

• _.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.extent()

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()

这种方式存在弊端，会忽略undefined、symbol和函数

const obj = {
    name: 'A',
    name1: undefined,
    name3: function() {},
    name4: Symbol('A')
}
const obj2 = JSON.parse(JSON.stringfy(obj));
console.log(obj2); //{name: "A"}

• 手写循环递归

三、区别

浅拷贝和深拷贝都创建出一个新的对象，但在复制对象属性的时候，行为就不一样。浅拷贝只复制属性指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存，修改对象属性会影响原对象；但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会修改到原对象。