原生JS实现深度克隆

最新推荐文章于 2024-12-09 21:56:24 发布

原创最新推荐文章于 2024-12-09 21:56:24 发布 · 346 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

25 篇文章

订阅专栏

本文深入探讨了JavaScript中实现深拷贝的一种方法，通过递归遍历对象和数组，确保了原始数据与拷贝数据之间的独立性。文章详细解释了hasOwnProperty()方法的作用以及如何使用Object.prototype.toString()来区分数组和对象，避免了typeof操作符在处理null、数组和对象时的局限性。

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

function myDeepClone(origin, target) {
       var target = target || {},
           toStr = Object.prototype.toString,
           arrStr = '[object Arrary]';
       for (var prop in origin) {
       //避免拿到原型上的属性
           if (origin.hasOwnProperty(prop)) {
           // 区分null、[]、{}
              if (origin[prop] !== null && typeof origin[prop] === 'object') {
                    if (toStr.call(origin[prop]) === arrStr) {
                       target[prop] = [];
                    } else {
                       target[prop] = {};
                    }
                    myDeepClone(origin[prop], target[prop])
               } else {
                  target[prop] = origin[prop];
               }
           }
       }
      return target;
}

var obj = {
    name: "Tylor",
    age: "22",
    card: {
       name1: "blank",
       name2: "zhifubao",
       name3: {
           snn: {
             c: "jkdsflk"
           }
       }
    }
};

var obj1 = {};
        
myDeepClone(obj,obj1);

克隆成功！！！

拓展：

hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是是否有指定的键）

obj.hasOwnProperty(prop)

object.prototype.toString()区别数组和对象

Object.prototype.toString.call([]) //---> "[object Array]"

Object.prototype.toString.call({}) //---> "[object Object]"

typeof 无法区别null、[ ]、{ }

详情请见，本人其它博客https://blog.youkuaiyun.com/weixin_43821550/article/details/96105266