深浅拷贝

前言

说到深浅拷贝,必须先提到js的数据类型，js数据类型分为基本数据类型 和 引用类型，对于基本类型来说没有深浅拷贝之分，这里所说的深浅拷贝针对引用类型。

浅拷贝

浅拷贝的意思就是只复制引用，而未复制真正的值

const originArray = [1,2,3,4,5];
const originObj = {a:'a',b:'b',c:[1,2,3],d:{dd:'dd'}};

const cloneArray = originArray;
const cloneObj = originObj;

console.log(cloneArray); // [1,2,3,4,5]
console.log(originObj); // {a:'a',b:'b',c:Array[3],d:{dd:'dd'}}

cloneArray.push(6);
cloneObj.a = {aa:'aa'};

console.log(cloneArray); // [1,2,3,4,5,6]
console.log(originArray); // [1,2,3,4,5,6]

console.log(cloneObj); // {a:{aa:'aa'},b:'b',c:Array[3],d:{dd:'dd'}}
console.log(originArray); // {a:{aa:'aa'},b:'b',c:Array[3],d:{dd:'dd'}}

深拷贝

深拷贝是指对目标对象完全复制，复制后的两个数据相互无影响（复制的不是引用）。 目前主要通过下面几种方法实现深拷贝

• 利用JSON的parse和Stringify方法实现。JSON.parse(JSON.stringify(object))
  
• Array类型自身的方法实现深拷贝，const, slice (只能实现第一层深拷贝，后面详谈)
  
• 利用递归来实现每一层都重新创建对象并赋值 (最终版，兼容数组类型和对象类型)

1：利用JSON的parse和Stringify方法实现

代码演示

const originArray = [1,2,3,4,5];
const cloneArray = JSON.parse(JSON.stringify(originArray));
console.log(cloneArray === originArray); // false
const originObj = {a:'a',b:'b',c:[1,2,3],d:{dd:'dd'}};
const cloneObj = JSON.parse(JSON.stringify(originObj));
console.log(cloneObj === originObj); // false
cloneObj.a = 'aa';
cloneObj.c = [1,1,1];
cloneObj.d.dd = 'doubled';
console.log(cloneObj); // {a:'aa',b:'b',c:[1,1,1],d:{dd:'doubled'}};
console.log(originObj); // {a:'a',b:'b',c:[1,2,3],d:{dd:'dd'}};
确实是深拷贝，也很方便。但是，这个方法只能适用于一些简单的情况。比如下面这样的一个对象就不适用：

代码演示

const originObj = {
    name:'msc',
    sayHi() {
        console.log('hello')
    }
}
const cloneObj = JSON.parse(JSON.stringify(originObj))
console.log(cloneObj) // {name:'msc'} sayHi方法并没有打印出来。

问题出现了，当复制对象时，undefined、function、symbol 会在转换过程中被忽略。

2：利用数组自身的方法，实现对数组的深拷贝。

代码演示

const originArray = [1,2,3,4]
cosnt cloneArray = originArray.concat()
cloneArray.push(5)
console.log(originArray) // [1,2,3,4]
console.log(cloneArray) // [1,2,3,4,5]
看起来没有问题，但是当数组是多维数组并且元素中存在对象的情况，如下：

代码演示

const originArray = [1,[2,3],{name: 'msc'}]
const cloneArray = originArray.concat()
originArray[1].push(4)
originArray.push(5)
originArray[2].name = '马士春'
console.log(originArray) // [1,[2,3,4],{name: '马士春'},5]
console.log(cloneArray) // [1,[2,3,4],{name: '马士春'}]
问题出现，originArray追加属性4后没有影响cloneArray，但是originArray修改第二层属性时，cloneArray受到影响。说明concat只能深拷贝第一层。
slice 方法同上。

3：利用递归

代码演示

function clone (object) {
    //只对数组或者对象进行操作。
    if (typeof object !== 'object' || object === null) return;
    // 判读传进来的是数组还是对象，并初始化数据obj
    let obj = Array.isArray(object) ? [] : {};
    for (let key in object) {
        //hasOwnProperty 判断对象object中是否含有key这个key,(也可以这样 Object.hasOwnProperty(object,key))
        if (object.hasOwnProperty(key)) {
            // 若子元素是对象，使用递归
            if (typeof object[key] === 'object' ) {
                obj[key] = Array.isArray(object[key]) ? [] : {};
                obj[key] = clone(object[key]) //递归处理
            } else {
                obj[key] = object[key]
            }
        }
    }
    return obj
}
const originobj = {name: 'msc',list:[{name:'xx'},{name:'xx'}],syaHi(){console.log('hi')}}
const cloneobj = clone(originobj)
originobj.name = '马士春'
originobj.list.push({name:'张三'})
// {name: '马士春',list:[{name:'xx'},{name:'xx'},{name:'张三'}],syaHi(){console.log('hi')}}
console.log(originobj) 
//{name: 'msc',list:[{name:'xx'},{name:'xx'}],syaHi(){console.log('hi')}}
console.log(cloneobj) 
无论修改originobj或者cloneobj里的任意数据，对另一个数据都没有影响。
该方法是深度拷贝 兼容对象和数组。

总结

1: JavaScript 中数组和对象自带的拷贝方法都是“首层浅拷贝”；
2: JSON.stringify 实现的是深拷贝，但是对目标对象有要求;
3: 若想真正意义上的深拷贝，请递归