Maison > interface Web > js tutoriel > Exemples de code de clonage superficiel et de clonage profond d'objets JS

Exemples de code de clonage superficiel et de clonage profond d'objets JS

不言
Libérer: 2019-01-18 11:03:59
avant
3114 Les gens l'ont consulté

Cet article vous apporte des exemples de code sur le clonage superficiel et le clonage profond d'objets JS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Clonage superficiel

Regardez d'abord le code :

/**
 * 浅克隆 克隆传入对象,只克隆一层
 * @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;
}
Copier après la connexion

Exécuter le 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);
Copier après la connexion

Le code du test définit un objet auto-référentiel

a===a.a4[0];    // true
a===a.b.a;    // true
Copier après la connexion

Exécuter la méthode ShallowClone pour obtenir un objet Copie d'un newa

a === newa;              // false
newa ===  newa.a4[0];    // false
newa ===   newa.b.a;     // false
a === newa.a4[0];        // true
a === newa.b.a;          // true
Copier après la connexion

Vitesse d'exécution du test :

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

示例:
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;
}
Copier après la connexion

Exemples de code de clonage superficiel et de clonage profond dobjets JS

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;
}
Copier après la connexion

Exécuter le 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);
Copier après la connexion
a === newa;            // false
newa === newa.a4[0]    // true
newa === newa.b.a;     // true
a === newa.a4[0];      // false
a === newa.b.a;        // false
Copier après la connexion

Exemples de code de clonage superficiel et de clonage profond dobjets JS

Vitesse d'exécution des tests :

Exemples de code de clonage superficiel et de clonage profond dobjets JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:cnblogs.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal