js实现数组、对象深度克隆的两种办法

1.深度克隆的原理

JS中的深度克隆，指的是原对象改变了，克隆出来的新对象也不会改变，原对象与新对象是完全独立的关系。

实现深度克隆的原理得从对象是一种引用类型说起

众所周知，对象是一种引用类型，对象的地址指针存放于栈中，而对象实际的数据存放于堆中。

因此当我们简单地执行复制操作时，实际是把地址指针进行了复制操作，因此在对象的实际数据改变之后，新老对象都会受到影响。

那么如何让他不受到影响呢？

答案是利用基本数据类型的特点，基本类型在执行复制操作后，新老数值之间不会互相产生影响

所以，我们要对对象不断进行分解，直到其是基本数据类型之后，再进行复制操作。

2.实现方法

2.1 硬刚法（迭代法，适用于所有）

// 方法一 利用迭代
// 思路是：判定要克隆的对象是不是引用类型，如果是引用类型，则继续迭代,如果该项是基本类型，则直接复制。
function deepClone(obj){
    let newObj=Array.isArray(obj)?[]:{}

    if(obj&&typeof obj ==="object"){
        for(let key in obj){
            if(obj.hasOwnProperty(key)){
                newObj[key]=(obj && typeof obj[key]==='object')?deepClone(obj[key]):obj[key];
            }
        }
    }
    return newObj
}

let a=[{c:1},2,3,4],
b=deepClone(a);
a[0]={c:2};
console.log(a,b);

2.2 投机取巧法（Json方法，适用于部分）

//方法2  利用JSON对象的方法
//主要是利用JSON.stringify和JSON.parse,这种办法只能实现纯数据的克隆，如果存在function则会直接忽略，不会进行复制操作

function deepClone2(obj){
    return JSON.parse(JSON.stringify(obj))
}

let a1={a: 1, b: function() {}}
b1=deepClone2(a1);
console.log(a1,b1);

转载于:https://www.cnblogs.com/60late/p/9626336.html