深拷贝浅拷贝

JavaScript的数据类型

基本类型: undefined、null、Boolean、number、string、NaN。变量直接按指存放在栈区内,可以直接访问,所以我们平时把字符串、数字的值赋值给新变量,相当于把值完全复制过去,新变量的改变不会影响旧变量。

引用类型: 存放在堆区的对象,变量在栈区中保存的是一个指针地址。

浅拷贝

浅拷贝拷贝引用

 function shallowClone (source){
    if(!source || typeof source != 'object'){
        throw new Error ('error');
    }
    var targetObj = source.constructor === Array ? [] : {};
    for(var keys in source) {
       if(source.hasOwnProperty(keys)){
            targetObj[keys] = source[keys];
        }
    }
    return targetObj;
 }

深拷贝

  1. 使用JSON.parse
let deepClone = JSON.parse(JSON.stringify(params))

缺点:

  • 无法实现对函数 、RegExp等特殊对象的克隆
  • 会抛弃对象的constructor,所有的构造函数会指向Object
  • 对象有循环引用,会报错
  1. 函数实现深拷贝
function cloneDeep(obj){
    if(typeof obj !== 'object' || Object.keys(obj).length === 0 ){
        return obj;
    }
    let resultData = {};
    return recurison(obj, resultData);
}

function recurison(obj, data = {}){
    for(key in obj){
        if(typeof obj[key] == 'object' && Object.keys(obj[key].length > 0 )){
            data[key] = recurison(obj[key]);
        }else{
            data[key] = obj[key];
        }
    }
    return data;
}

var o3 = cloneDeep(o1);
console.log(o3 === o1);//false
console.log(o3.obj === 01.obj);//false
console.log(o3.func === o1.func);//true

你可能感兴趣的:(深拷贝浅拷贝)