JavaScript数组及非数组对象的深浅克隆详解原理

2022-04-15 1,030
目录
  • 什么是浅克隆、深克隆
  • 1.对数组进行克隆
    • 1.1 浅克隆
    • 1.2 深克隆
  • 2.对非数组对象进行克隆
    • 2.1 浅克隆
    • 2.2 深克隆
  • 3.整合深克隆函数

    什么是浅克隆、深克隆

    浅克隆:直接将存储在栈中的值赋值给对应变量,如果是基本数据类型,则直接赋值对应的值,如果是引用类型,则赋值的是地址。
    深克隆:将数据赋值给对应的变量,从而产生一个与源数据不相干的新数据(数据地址已变化)。即对象各个层级的属性。
    JavaScript中基本数据类型使用符号“=”可以进行克隆,引用数据类型使用符号“=”只是改变了变量的指向,并没有进行真正的克隆操作。

    1.对数组进行克隆

    1.1 浅克隆

    使用for循环进行浅克隆。

    var arr1 = ['demo', 1, 2];
    var arr2 = [];
    // 数组的浅克隆
    for (var i = 0; i < arr1.length; i++) {
        arr2[i] = arr1[i];
    }
    console.log(arr2);
    console.log(arr1 == arr2);
    

    输出结果:

    Array(3)0: “demo”1: 12: 2length: 3[[Prototype]]: Array(0)
    false

    1.2 深克隆

    使用递归进行深克隆。

    function deepClone(o) {
    	var result = [];
    	for (var i = 0; i < o.length; i++) {
    		result.push(deepClone(o[i]));
    	}
    	return result;
    }
    

    2.对非数组对象进行克隆

    2.1 浅克隆

    使用for循环进行浅克隆。

    var obj1 = { a: 1, b: 2, c: 3, d: [4, 5, { e: 'demo' }] };
    var obj2 = {};
    // 对象的浅克隆
    for (var i in obj1) {
        obj2[i] = obj1[i];
    }
    console.log(obj2);
    console.log(obj1 == obj2);
    

    输出结果:

    {a: 1, b: 2, c: 3, d: Array(3)}
    false

    2.2 深克隆

    使用递归进行深克隆。

    function deepClone(o) {
    	var result = {};
    	for (var i in o) {
    		result[i] = deepClone(o[i]);
    	}
    	return result;
    }
    

    3.整合深克隆函数

    var obj1 = { a: 1, b: 2, c: 3, d: [4, 5, { e: 'demo' }] };
    var arr1 = ['demo', 1, 2];
    // 深克隆
    function deepClone(o) {
        if (Array.isArray(o)) {
            // 是数组
            var result = [];
            for (var i = 0; i < o.length; i++) {
                result.push(deepClone(o[i]));
            }
        } else if (typeof o == 'object') {
            // 非数组,是对象
            var result = {};
            for (var i in o) {
                result[i] = deepClone(o[i]);
            }
        } else {
            // 基本类型值
            var result = o;
        }
        return result;
    }
    console.log(deepClone(arr1));
    console.log(deepClone(obj1));
    

    到此这篇关于JavaScript数组及非数组对象的深浅克隆详解原理的文章就介绍到这了,更多相关JavaScript 数组内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码!

    免责声明:
    1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

    2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
    如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
    如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

    NICE源码网 JavaScript JavaScript数组及非数组对象的深浅克隆详解原理 https://www.niceym.com/18203.html

    已是最后文章
    常见问题
    • 请您联系网站客服QQ,79024519,将第一时间处理您的问题,咨询请提供会员ID以及资源编号!
    查看详情
    • 本站发布的压缩包如遇需要解压密码请尝试本站域名:www.niceym.com (通常为小写,如不对可试试大写) 或者:niceym.com 如遇无法解压,请您提供资源编号发送给本站客服!
    查看详情