深拷贝真难

深拷贝浅拷贝的原理我是已经懂了，之前也有分享过。只是深拷贝浅拷贝的方法却从来没有真的去了解过。

想想之前的面试，问到深拷贝浅拷贝的时候，都是说一下原理，问到方法，张口就来JSON.parse和JSON.stringify，如果有函数的话就递归循环拷贝。却从来没有写过递归或者循环拷贝的函数。

今天写了一下深拷贝数据的函数，发现深拷贝其实好难好难，单单一个数据的深拷贝就让我觉得脑壳都受不了了，更别说一些大佬们还提到了原型链、dom、RegExp、函数、浏览器内置函数之类的是否拷贝或者说怎么处理，再加上兼容，以后出去再也不敢说能写出深拷贝函数了。

今天也不是写个什么好的深拷贝函数，单纯的写一下数据处理的深拷贝，虽然对于json对象的深拷贝JSON.parse和JSON.stringify是最简单的，只是让自己稍微见见世面。

先上一个递归深拷贝的函数：

function clone(data) {
    var target = data;
    if(isObject(data)){
        target = {};
        for(var i in data) {
            target[i] = clone(data[i])
        }
    }
    if(isArray(data)){
        target = [];
        for (let i = 0; i < data.length; i++) {
            target[i] = clone(data[i])
        }
    }
    return target;
}
function isObject(x){
    return Object.prototype.toString.call(x) === '[object Object]';
}
function isArray(x){
    return Object.prototype.toString.call(x) === '[object Array]';
}

很简单，判断传进来的参数是否是数组或者对象，这边对数组或者对象的判断比较严格，如果是就分别循环递归拷贝子对象。这只是对对象和数组的深拷贝。for in我们都知道会遍历出自身和原型链上可枚举的属性，有时候我们是不想拷贝这些的。所以这边兼容就要在for in里面加上data.hasOwnProperty的判断。

基本上递归的拷贝都能理解，但是如果一个数据层级太多，会出现爆栈： Maximum call stack size exceeded 包括JSON.parse和JSON.stringify也会。

这时候就要循环深拷贝了，直接上代码：

function cloneLoop(x) {
    let target = '';
    if(isObject(x)){
        target = {};
    };
    if(isArray(x)){
        target = [];
    }
    const loopList = [
        {
            parent: target,
            key: undefined,
            data: x,
        }
    ];
    while(loopList.length) {
        const node = loopList.pop();
        const parent = node.parent;
        const key = node.key;
        const data = node.data;
        let res = parent;
        if(typeof key !== 'undefined'){
            if(isObject(data)) {
                res = parent[key] = {};
            };
            if(isArray(data)) {
                res = parent[key] = [];
            }
        }
        if(isObject(data)){
            for(let k in data) {
                initLoopList(data[k], k, res);
            }
        }
        if(isArray(data)){
            for (let i = 0; i < data.length; i++) {
                initLoopList(data[i], i, res);
            }
        }
    }
    function initLoopList(val, key, res) {
        if (isObject(val) || isArray(val)) {
            loopList.push({
                parent: res,
                key: key,
                data: val,
            });
        } else {
            res[key] = val;
        }
    }
    return target;
}
function isObject(val){
    return Object.prototype.toString.call(val) === '[object Object]'
}
function isArray(val){
    return Object.prototype.toString.call(val) === '[object Array]'
}

我自己都不知道要这么去注释这个函数，精华就是这两个引用： res = parent[key] = {}; res = parent[key] = []; 就是对引用稍微绕了一点，可以自己理解一下。

深拷贝暂时只能是了解到这种程度了，当然，一般来说数据不会有这么深的层级。这只是最简单的对数组对象的拷贝，没有涉及函数、dom或者原型链这些，连数据的引用都没考虑进去，比如： let a = {}; let b = {b:b, c:c}; 这种情况还得考虑是否保留引用还是创建新的。

最后提个序列化和反序列化的概念，今天分享的其实就是针对可以序列化和发序列化的数据。百度百科上面对序列化的定义：序列化是将对象的状态信息转换为可以存储或传输的形式的过程。在序列化期间，对象将其当前状态写入到临时或持久性存储区。以后，可以通过从存储区中读取或反序列化对象的状态，重新创建该对象。

不同语言有不同的方法，百度百科上面Java的序列化是转成二进制，反序列化是将二进制转成对象。而JavaScript我理解的序列化就是对象转成字符串，发序列化把字符串转成对象。

深拷贝真难