Home > Web Front-end > JS Tutorial > Code examples of shallow cloning and deep cloning of JS objects

Code examples of shallow cloning and deep cloning of JS objects

不言
Release: 2019-01-18 11:03:59
forward
3113 people have browsed it

This article brings you code examples about shallow cloning and deep cloning of JS objects. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Shallow Clone

Look at the code first:

/**
 * 浅克隆 克隆传入对象,只克隆一层
 * @param {any} source
 */
function shallowClone(source) {
    var tiaget = createEctype(source);  //创建一个副本
    // 将原对象的所有属性值赋值到新对象上
    for (var property in source) {
        if (source.hasOwnProperty(property)) {
            tiaget[property] = source[property];
        }
    }
    /**
    * 创建副本
    * @param {any} source
    */
    function createEctype(source) {
        var newObject = {};
        if (Array.isArray(source))
            newObject = [];
        return newObject;
    }

    return tiaget;
}
Copy after login

Execute the test:

var a={a1:1,a2:2,a3:[1,2,3]};
 var b={b1:1,b2:2,b3:[4,5,6]}
 a.b=b;
 b.a=a;
 a.a4=[a,b];
 b.b4=[a,b];
 a.fn=function(){console.log(this.b);};
 
 var newa=shallowClone(a);
Copy after login

The test code defines a self-referential object

a===a.a4[0];    // true
a===a.b.a;    // true
Copy after login

Execute the shallowClone method to obtain a copy of object a newa

a === newa;              // false
newa ===  newa.a4[0];    // false
newa ===   newa.b.a;     // false
a === newa.a4[0];        // true
a === newa.b.a;          // true
Copy after login

Test execution speed:

/**
获取传入方法在规定时间内执行次数

示例:
var test = function(){

};
runTime(test,1)
表示test方法 在1秒中执行了6819005次
**/

/**
 * 获取传入方法在规定时间内执行次数
 * @param {any} fn 执行的方法
 * @param {any} time 规定的时间,单位为秒
 */
function runTime(fn, time) {
    var startTime = Date.now();
    var count = 0;
    while (Date.now() - startTime < time * 1000) {
        fn.call();
        count++;
    }
    return count;
}
Copy after login

Code examples of shallow cloning and deep cloning of JS objects

Deep Clone

Code:

/**
 * 深克隆
 * 
 * 示例:
 * var a={a1:1,a2:2,a3:[1,2,3]};
 * var b={b1:1,b2:2,b3:[4,5,6]}
 * a.b=b;
 * b.a=a;
 * a.a4=[a,b];
 * b.b4=[a,b];
 * a.fn=function(){console.log(this.b);return this.b;};
 * 
 * var newa=deepClone(a);
 * newa.a1=123;
 * newa.fn();
 */
function deepClone(source) {
    this.objKeyCache = [];      // 对象缓存
    this.objValueCache = [];    // 对象克隆缓存

    this.clone = function (source) {
        var target = createEctype.call(this, source);
        for (var property in source) {
            if (source.hasOwnProperty(property)) {
                var value = source[property];
                if (typeof value === "number"
                    || typeof value === "boolean"
                    || typeof value === "symbol"
                    || typeof value === "string"
                    || typeof value === "function"
                    || typeof value === "undefined"
                    || value === null)
                    target[property] = value;
                else if (typeof value === "object") {
                    // 如果源对象在对象缓存中存在,就用对象克隆缓存中的值赋值
                    var index = this.objKeyCache.indexOf(value);
                    if (index >= 0)
                        target[property] = this.objValueCache[index];   
                    else {
                        target[property] = this.clone( value);
                    }
                }
                else
                    throw "未知数据类型" + (typeof value);
            }
        }

        return target;
    };
    /**
     * 创建副本
     * @param {any} source
     */
    function createEctype(source) {
        var target = {};
        if (Array.isArray(source))
            target = [];
        this.objKeyCache.push(source);
        this.objValueCache.push(target);
        return target;
    }
    var newObject = this.clone(source);
    // 释放缓存,防止内存溢出
    this.objKeyCache = [];
    this.objValueCache = [];
    return newObject;
}
Copy after login

Execution test:

var a={a1:1,a2:2,a3:[1,2,3]};
var b={b1:1,b2:2,b3:[4,5,6]}
a.b=b;
b.a=a;
a.a4=[a,b];
b.b4=[a,b];
a.fn=function(){console.log(this.b);return this.b;};

var newa=deepClone(a);
Copy after login
a === newa;            // false
newa === newa.a4[0]    // true
newa === newa.b.a;     // true
a === newa.a4[0];      // false
a === newa.b.a;        // false
Copy after login

Code examples of shallow cloning and deep cloning of JS objects

##Test execution speed:

Code examples of shallow cloning and deep cloning of JS objects

The above is the detailed content of Code examples of shallow cloning and deep cloning of JS objects. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:cnblogs.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template