JavsScript对象的克隆

Posted 2021-02-03 splendid

JS对象的数据类型分为两大类：原始类型（string, boolean, number,undefined, function）和 对象类型（array, object, null）。

1、浅度克隆

浅度克隆原始类型为值传递，对象类型为引用传递（即修改数组或对象值会同时修改另一个数组或对象相应的值）

function clone(origin, target) {
    var target = target || {};
    for (var prop in origin) {
        target[prop] = origin[prop];
    }
    return target;
}

2、深度克隆

所有数据类型均为复制，两个对象完全独立，修改其中一个对象值不会影响另一个。 

function deepClone(origin, target) {
    var target = target || {}; // 目标对象
        toStr = Object.prototype.toString, // 简化toString方法
        isArr = ‘[object Array]‘; // toString方法返回的数组类型
    
    for (var key in origin) { // 遍历原对象
        if (origin.hasOwnProperty(key)) { //判断是否是自身属性
            if (typeof(origin[key]) == ‘object‘ && origin[key] !== null) { // 是引用类型且不是null
                if (toStr.call(origin[key]) == isArr) { // 判断是否是数组
                    target[key] = []; // 数组
                } else { 
                    target[key] = {}; // 对象
                }
                deepClone(origin[key], target[key]); // 递归
            } else {
                target[key] = origin[key]; // 原始值或null
            }
        }
    }
    return target;
}