美文网首页
JS的深克隆和浅克隆(深拷贝、浅拷贝)

JS的深克隆和浅克隆(深拷贝、浅拷贝)

作者: Cherry丶小丸子 | 来源:发表于2019-08-29 17:52 被阅读0次

    什么是深克隆?

    我们都知道,JavaScript有六种基本的数据类型。
    五种基本的数据类型:string,number,undefined,boolean,null
    (在内存中表现为一个值,保存在栈内存中)

    一种复杂的数据类型(引用类型):object 【function,array,object】
    (在内存中表现为一个指针,保存在堆内存中)

    第一种:递归完成深克隆

    // 定义一个深拷贝函数  接收目标target参数
    function deepClone(target) {
        // 定义一个变量
        let result;
        // 如果当前需要深拷贝的是一个对象的话
        if (typeof target === 'object') {
            // 如果是一个数组的话
            if (Array.isArray(target)) {
                result = []; // 将result赋值为一个数组,并且执行遍历
                for (let i in target) {
                    // 递归克隆数组中的每一项
                    result.push(deepClone(target[i]))
                }
            // 判断如果当前的值是null的话;直接赋值为null
            } else if(target===null) {
                result = null;
            // 判断如果当前的值是一个RegExp对象的话,直接赋值    
            } else if(target.constructor===RegExp){
                result = target;
            }else {
                // 否则是普通对象,直接for in循环,递归赋值对象的所有值
                result = {};
                for (let i in target) {
                    result[i] = deepClone(target[i]);
                }
            }
        // 如果不是对象的话,就是基本数据类型,那么直接赋值
        } else {
            result = target;
        }
        // 返回最终结果
        return result;
    }
    

    第二种:利用JSON

    var arr = [1,2,3,4];
    var newarr = JSON.parse(JSON.stringify(arr));
    

    第三种:扩展运算符

    const arr1 = ['a', 'b', 'c', 'd', 'e'];
    const arr2 = [...arr1];
    

    总结:
    浅拷贝(shallow copy):只复制指向某个对象的指针,而不复制对象本身,新旧对象共享一块内存;
    深拷贝(deep copy):复制并创建一个一摸一样的对象,不共享内存,修改新对象,旧对象保持不变;实现深拷贝主要有2种方法
    (1)递归
    (2)JSON.stringify结合JSON.parse (不可以拷贝 undefined , function, RegExp 等等类型的)
    (3)扩展运算符(对多层嵌套数据无效)

    相关文章

      网友评论

          本文标题:JS的深克隆和浅克隆(深拷贝、浅拷贝)

          本文链接:https://www.haomeiwen.com/subject/czfwectx.html