深度克隆

深度克隆详解

最新推荐文章于 2025-02-06 21:55:07 发布

原创最新推荐文章于 2025-02-06 21:55:07 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了JavaScript中深度克隆的实现方式，包括基于JSON字符串的克隆方法和使用递归函数实现的深度克隆。通过实例展示了如何避免对象属性的引用共享，确保克隆后的对象独立于原对象。

基本类型(值类型)没有指向空间地址,所以基本类型没有深度浅度克隆之说,引用类型才有深度浅度克隆之说

1.引用类型基于json字符进行深度克隆

let obj1 = {name:'fuheng'}
let obj2 = JSON.parse(JSON.stringify(obj1))
console.log(obj1 === obj2);//false
obj2.name='fuyi';
console.log(obj1);//{ name: 'fuheng' }

let arr1=[1,2,3,{name:'fuarr'}]
let arr2 = JSON.parse(JSON.stringify(arr1))
arr2[3].name='fuNewArray';
console.log(arr1[3].name);//fuarr

2.基于Object.prototype.toString.call(obj)判断数据类型,进行递归赋值

//获取传入变量的类型 例如[Object Array] => Array
function getObjClass(obj) {
    let result = Object.prototype.toString.call(obj).slice(8, -1);
    if (result === 'Null') {
        return 'Null';
    } else if (result === 'Undefined') {
        return 'Undefined';
    } else {
        return result;
    }
}

function deepClone(obj) {
    let result, objType = getObjClass(obj);
    if (objType === 'Object') {
        result = {};//如果是对象,定义为对象类型
    } else if (objType === 'Array') {
        result = [];//如果是数组,定义为数组类型
    } else {
        return obj; // 如果是其他数据类型不复制，直接将数据返回
    }
    // 遍历目标 对象/数组
    for (let key in obj) {
        let value = obj[key];
        if (getObjClass(value) === "Object" || getObjClass(value) === 'Array') {
            result[key] = deepClone(value);
        } else {
            result[key] = obj[key];
        }
    }
    return result;
}


let obj3 = {username: 'fuheng',age: 18, sex: {option1: '男', option2: '女'}};
let obj4 = deepClone(obj3);
console.log(obj4 === obj3);//false
obj4.sex.option1 = '不男不女'; // 修改复制后的对象不会影响原对象
console.log(obj4);
console.log(obj3);