JavaScript中的深克隆

最新推荐文章于 2023-01-05 18:45:14 发布

Surrin1999

最新推荐文章于 2023-01-05 18:45:14 发布

阅读量401

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习笔记文章标签： JavaScript 克隆深克隆递归前端

本文链接：https://blog.youkuaiyun.com/Surrin1999/article/details/84677972

前端学习笔记专栏收录该内容

8 篇文章

订阅专栏

本文探讨了JavaScript中深克隆的必要性，详细解释了深克隆与浅克隆的区别，以及如何通过递归方式实现深克隆，避免引用类型在克隆过程中对原数据的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文是前端学习笔记的第八篇，对应的是web前端开发JavaScript精英课js的第23课时，this部分由于没什么难度，这里就直接就直接忽略了，直接写本课时的难点，深克隆

JavaScript和其他面向对象的语言一样，在克隆方面也一样有克隆引用类型会影响原数据的问题，因为引用类型复制复制的是内存地址指向，修改克隆体的引用类型数据时操作的数据与原数据地址相同,而所谓深克隆就是不断递归到是原始值类型为止，再复制

废话少说，直接上代码

<script>
        var deepClone = (function () {
           return function (origin,target) {
               var target = target || {};
               var toStr = Object.prototype.toString;
               var arrStr = '[object Array]';
               for (var prop in origin) {
                   // 如果对象的值为null，直接赋值就行
                   if ((origin[prop] !== null) && (typeof(origin[prop]) === 'object')) {
                       if (toStr.call(origin[prop]) === arrStr) {
                           target[prop] = [];
                       } else {
                           target[prop] = {};
                       }
                       arguments.callee(origin[prop],target[prop]);
                   } else {
                       target[prop] = origin[prop];
                   }
               }
               return target;
           };
        }());
</script>

最后来个精简版

<script>
        var deepclone = (function () {
            return function (origin) {
                var target = origin instanceof Array ? [] : {};
                for (var prop in origin) {
                    target[prop] = typeof(origin[prop]) === 'object' ? arguments.callee(origin[prop]) : origin[prop];
                }
                return target;
            };
        }());
<script>