JS 的深克隆与浅克隆

👁 2021-02-26

如何实现JS中的深克隆与浅克隆

在项目开发中，可能会经常遇见克隆某个对象。

1 浅克隆方法

浅克隆：原始类型按值传递，对象类型按引用传递，与原对象共用一处内存，修改会使原对象也修改。

let obj = {
        a:100,
        b:[1,3,5],
        c:'name',
        d: {
            age:18,
            sex:'女'
        }
    }
    //浅克隆obj
    let obj2 = {}
    for(let key in obj){
        if(!obj.hasOwnProperty(key)){
          break ///判断是否是私有属性
       }
        obj2[key] = obj[key]
    }
    console.log(obj,obj2)  //修改obj2里面的属性值，obj对应的值也改了

2 深克隆方法

如果需要在克隆一个对象后不去修改原始对象，那么此时就需要进行深克隆。

深克隆：在内存中开辟一块新内存，将原对象中的所有值全部复制过去，与原对象完全脱离，修改新对象中的属性值不会影响原对象。

//如果想实现深克隆，可以先JSON.stringify，再JSON.parse，但是如果对象属性为function，正则，日期，会将在JSON.stringify是数据解析为{}，平时项目中可以这样用，因为基本上属性值不会接触到这种数据
// let obj3 = JSON.parse(JSON.stringify(obj))
// console.log(obj3)

//其他方式
function deepClone(obj){
    //判断数据类型，进行过滤
    if(obj === null){
        return null
    }
    if(typeof obj !=="object"){
        return obj
    }
    //判断是否为正则表达式
    if(obj instanceof RegExp){
        return new RegExp(obj)
    }
    if(obj instanceof Date){
        return new Date(obj)
    }
    let newObj = new obj.constructor //不直接创建空对象，这样写可以既克隆普通个对象，也可以克隆类的实例，那么克隆的结果还是实例
    for(let key in obj){
        if(obj.hasOwnProperty(key)){
            newObj[key] = deepClone(obj[key])
        }
    }
    return newObj
}
let obj2 = deepClone(obj)
console.log(obj2,obj)
console.log(obj2 === obj)
console.log(obj2.d === obj.d)