JavaScript递归实现对象深拷贝

lunaticf 发布于2019-08-23 18:09 / 1229人阅读

摘要：递归实现对象深拷贝递归实现对象深拷贝是否存在如果不存在创建空对象判断是否为引用数据类型剥离原型链的数据判断是否为引用数据类型对象或数组辅助函数判定是否是对象深拷贝面的所有属性值到对象里面拷贝对象目标对象如果是值类型，那么就直接拷贝赋值如果是

1.JavaScript递归实现对象深拷贝

JavaScript递归实现对象深拷贝

        function deepClone(origin,target){
            //target是否存在如果不存在创建空对象
            let tar = target || {},
            //判断是否为引用数据类型
                toStr = Object.prototype.toString,
                arrType="[object Array]";

            for(let key in origin){
                //剥离原型链的数据
                if(origin.hasOwnProperty(key)){
                    //判断是否为引用数据类型 对象或数组
                    if(typeof(origin[key]) === "object" && origin[key] !== null){
                        if(toStr.call(origin[key]) === arrType ){
                            tar[key] = [];
                        }else{
                            tar[key] = {};
                        }
                        deepClone(origin[key],tar[key]);
                    }else{
                        tar[key] = origin[key];
                    }
                }
            }
            return tar;
        }

/**
 * 辅助函数, 判定是否是对象
 * @param obj
 * @returns {boolean}
 */
function isObj(obj) {
  return obj instanceof Object;
}
 
/**
 * 深拷贝fromObj面的所有属性/值, 到toObj对象里面
 * @param fromObj 拷贝对象
 * @param toObj  目标对象
 */
function deepCopyObj2NewObj(fromObj, toObj) {
  for (var key in fromObj) {
    if(fromObj.hasOwnProperty(key)){
      var fromValue = fromObj[key];
      // 如果是值类型，那么就直接拷贝赋值
      if (!isObj(fromValue)) {
        toObj[key] = fromValue;
      } else {
        // 如果是引用类型，那么就再调用一次这个方法，
        // 去内部拷贝这个对象的所有属性
        // fromValue是什么类型, 创建一个该类型的空对象
        var tmpObj = new fromValue.constructor;
 
        // console.log(tmpObj);
        // debugger;
        deepCopyObj2NewObj(fromValue, tmpObj);
        toObj[key] = tmpObj;
      }
    }
  }
}

GPU服务器云服务器 javascript深拷贝深拷贝深拷贝和浅拷贝 javascript浅拷贝

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104750.html

JavaScript：利用递归实现对象深拷贝

摘要：先来普及一下深拷贝和浅拷贝的区别浅拷贝就是简单的复制，用等号即可完成这就完成了一个浅拷贝但是当修改对象的时候，我们发现对象的值也被改变了这是因为浅拷贝只复制了指向对象的指针，新旧对象共用同一块内存，修改某一个对象的同时也会把另一个都一并修改先来普及一下深拷贝和浅拷贝的区别浅拷贝：就是简单的复制，用等号即可完成 let a = {a: 1} let b = a 这就完成了一个浅拷贝但是...

Airy 2019-08-23 10:49 评论0 收藏0
JavaScript中的浅拷贝和深拷贝

摘要：在中可以通过添加一个参数来实现递归，调用就可以实现一个深拷贝。利用序列化实现一个深拷贝在JavaScript中，对于Object和Array这类引用类型值，当从一个变量向另一个变量复制引用类型值时，这个值的副本其实是一个指针，两个变量指向同一个堆对象，改变其中一个变量，另一个也会受到影响。这种拷贝分为两种情况：拷贝引用和拷贝实例，也就是我们说的浅拷贝和深拷贝浅拷贝（shallow...

ernest.wang 2019-08-21 11:34 评论0 收藏0
JavaScript之浅、深拷贝

摘要：前言里面浅拷贝和深拷贝是非常关键的知识点，今天就来通过本文清楚的了解深浅拷贝以及该如何实现这两种拷贝方式。对象的拷贝又分为浅拷贝和深拷贝。印证了上述所说的对于所有的基本类型，简单的赋值已经是实现了深拷贝。前言 JavaScript里面浅拷贝和深拷贝是非常关键的知识点，今天就来通过本文清楚的了解深浅拷贝以及该如何实现这两种拷贝方式。深浅拷贝的区别拷贝：其实就是一个对象复制给另外...

leanxi 2019-08-26 10:37 评论0 收藏0
浅谈JavaScript 中深拷贝实现的方法

摘要：相信人很多学习的过程中都踩了深拷贝和浅拷贝的坑，深拷贝和浅拷贝的区别我就不再赘述了，今天我来写一下我自己实现深拷贝的各种方法。中的深拷贝也是用类似方法实现。相信人很多学习js的过程中都踩了深拷贝和浅拷贝的坑，深拷贝和浅拷贝的区别我就不再赘述了，今天我来写一下我自己实现深拷贝的各种方法。比较简单的拷贝方式可以借用浏览器的Json对象去实现，先把对象转化为json字符串，在解析回对...

Vicky 2019-08-20 13:50 评论0 收藏0
JavaScript基础心法——深浅拷贝

摘要：原文地址基础心法深浅拷贝欢迎。上面的代码是最简单的利用赋值操作符实现了一个浅拷贝，可以很清楚的看到，随着和改变，和也随着发生了变化。展开运算符结论实现的是对象第一层的深拷贝。原文地址：JavaScript基础心法——深浅拷贝欢迎star。如果有错误的地方欢迎指正。浅拷贝和深拷贝都是对于JS中的引用类型而言的，浅拷贝就只是复制对象的引用，如果拷贝后的对象发生变化，原对象也会发生...

keithxiaoy 2019-08-21 17:22 评论0 收藏0