原生JS实现浅拷贝与深拷贝

2016年10月07日Web前端0

前面，使用jQ中的extend方法实现了js中对象的深浅拷贝，现在我们使用原生的JS来实现一下。

一、浅拷贝

function shallowCopy(obj) {
    var result = {};

    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            result[i] = obj[i]
        }
    }
    return result;
}

我们用in遍历obj下的属性，然后用hasOwnProperty方法（IE9+）过滤掉obj原型链上的属性，此方法可以浅拷贝对象中的属性，但是无法拷贝数组中的属性，修改原函数。

function shallowCopy(obj) {
    var result = obj.constructor === Array ? \[\] : {};
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            result\[i\] = obj\[i\]
        }
    }
    return result;
}

我们只需要判断传入的参数的类型，将拷贝至的对象进行改变就行了。如此便可以兼容对象和数组了。

二、深拷贝

function deepCopy(obj){
    var str, result = obj.constructor === Array ? \[\] : {};
    if (window.JSON){
        str = JSON.stringify(obj),
        result = JSON.parse(str); 
    } else {
        for (var i in obj){
            result \[i\] = typeof obj\[i\] === 'object' ? deepCopy(obj\[i\]) : obj\[i\]; 
        }
    }
    return result ;
};

当内层是对象时，我们只需要再一次的循环赋值就行了，在这用的是递归。该函数和shallowCopy一样，可以兼容数组和对象。

JavaScript

目录