Deep copy is hard

The principle of deep copy shallow copy I have understood, also shared before. Just deep copy shallow copy of the method but never really to understand.

Parse and json. stringify, if there are any functions, are copied recursively. I’ve never written a recursive or circular copy of a function.

Today wrote the function of deep data, found deep in fact is very difficult, only a deep copy data let I can’t stand the feel skulls, not to mention some bosses also mentioned the prototype chain, dom, RegExp browser, function, built-in functions such as whether a copy, or how to deal with, plus compatible, I can’t say I can write a deep-copy function anymore.

Parse and json.stringify are the easiest deep copies of JSON objects, just to give yourself a glimpse of the world.

Let’s start with a recursive deep-copy function:

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]';
}
Copy the code

Very simple, check whether the parameter passed in is an array or an object, here the array or object judgment is more strict, if so, each recursive copy of the child object. This is just a deep copy of objects and arrays. For in we all know that we iterate through enumerable properties on our own and prototype chains, and sometimes we don’t want to copy those. To cure so compatible in the for in combined with the data. The hasOwnProperty judgment.

Parse and json.stringify are also included in the Maximum Call stack size exceeded.

This is the time to loop deep copy, directly to the code:

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]' }Copy the code

I didn’t even know I was going to comment this function this way, but the essence of it is these two references: res = parent[key] = {}; res = parent[key] = []; It’s just a little bit of a detour of the reference, so you can make sense of it.

Deep copy can only be as deep as this for now, of course, but data generally doesn’t go that far. This is just a simple copy of an array object. It doesn’t involve functions, DOM, or prototype chains. It doesn’t even take into account references to data, such as: let a = {}; let b = {b:b, c:c}; In this case, you have to consider whether to keep the reference or create a new one.

Finally, the concept of serialization and deserialization. Today’s talk is about serialization and deserialization. Serialization is the process of converting the state information of an object into a form that can be stored or transmitted. During serialization, an object writes its current state to a temporary or persistent store. Later, you can recreate the object by reading or deserializing its state from the store.

Java serialization is converted to binary, deserialization is converted to object. In JavaScript, I understand serialization as converting an object to a string, and serialization is converting a string to an object.