Deep Clone in Javascript Object

发表于 | 分类于

Continue with the last post, issue about deep clone in Javascript object.

Here is a test code snippet for shallow clone or deep clone.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/**
 * Test clone for array
 */
var cloneArray = function(element) {
    var result = [];
    for (var i in element) {
        result.push(element[i]);
    }
    return result;
};

var deepCloneArray = function(element) {
    var result = [];
    for (var i in element) {
        if (typeof element[i] == "object") {
            result.push(deepCloneArray(element[i]));
        } else {
            result.push(element[i]);
        }
    }
    return result;
};

/**
 * Test clone for object
 */
var cloneObject = function(element) {
    var result = {};
    for (var i in element) {
        result[i] = element[i];
    }
    return result;
};

var deepCloneObject = function(element) {
    var result = {}; // Trap 1
    for (var i in element) {
        if (typeof element[i] == "object") {
            result[i] = deepCloneObject(element[i]);
        } else {
            result[i] = element[i];
        }
    }
    return result;
};

For testing array code part, I am really amazed that the cloned array is independent from the original array.

Maybe there is no deep or shallow clone difference in Javascript array objects.

However, for testing object code part, the difference does exist.

Trap 1

In this place, a type check should be added. This version is simplified.

Among objects, there are mainly three sub types that need attention.

1
2
3
4
5
6
7
typeof [1,2,3]; // object
typeof {}; // object
typeof function() {}; // function

[1,2,3] instanceof Array; // true
(function() {}) instanceof Function; // true
Function instanceof Object; // true

Therefore, for trap 1 case, an instanceof check should be added, to decide whether the result structure should be array or object.