前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【JS面试题】深克隆 和 浅克隆 有了解过吗?能手写深克隆吗?

【JS面试题】深克隆 和 浅克隆 有了解过吗?能手写深克隆吗?

作者头像
程序员法医
发布2022-08-11 16:03:21
1.5K0
发布2022-08-11 16:03:21
举报
文章被收录于专栏:vue全家桶vue全家桶

深克隆 和 浅克隆 有了解过吗?能手写深克隆吗?

什么是克隆?克隆其实就是拷贝,就是把一个对象中的属性复制一份,放到另一个对象中的过程。而属性的数据是有原始值和引用值之分。

  • 浅克隆:当我们复制对象中属性的时候,如果是原始值,则两个对象中的变量随意修改,两者互不影响(敌动我不动)。如果是引用值,一个对象的变量改变,则另一个对象跟着变(敌动我便动)。
  • 深克隆:深克隆就是解决拷贝引用值时“敌动我便动”的问题,无论数据怎么修改,两者互不影响。

深克隆的实现有两种方式:递归拷贝JSON函数拷贝,我会用这两种方式分别来实现深拷贝

  1. 递归拷贝:将obj克隆到newObj中
代码语言:javascript
复制
    let obj = {
        name: "前端猎手",
        des: "好好学习,天天向上",
        like: ["琴", "棋","书", "画"],
        idol: {
          name: "乔布斯",
          des:"神一样的男人",
          achievement:["苹果公司","皮克斯"]
        },
      };
      
    let newObj = {};

      function deepClone(origin, target) {
        var target = target || {}, //容错处理,防止用户不传target值
          toStr = Object.prototype.toString,
          arrAtr = "[object Array]";
        for (let prop in origin) {
          //遍历对象
          if (origin.hasOwnProperty(prop)) {
            //防止拿到原型链属性
            if (origin[prop] !== "null" && typeof origin[prop] == "object") {
              //判断是不是原始值
              target[prop] = toStr.call(origin[prop]) == arrAtr ? [] : {}; //建立相对应的数组或对象
              deepClone(origin[prop], target[prop]); //递归,为了拿到引用值里面还有引用值
            } else {
              target[prop] = origin[prop]; //是原始值,直接拷贝
            }
          }
        }
        return target;
      }
      deepClone(obj,newObj)

代码验证

  1. JSON函数拷贝:将obj克隆到newObj中
代码语言:javascript
复制
    let obj = {
        name: "前端猎手",
        des: "好好学习,天天向上",
        like: ["琴", "棋","书", "画"],
        idol: {
          name: "乔布斯",
          des:"神一样的男人",
          achievement:["苹果公司","皮克斯"]
        },
      };
      
     let newObj = JSON.parse(JSON.stringify(obj));
     
     obj.idol.achievement[0] = "green apple";
     newObj.idol.achievement[0] = "red apple";
     console.log(obj);
     console.log(newObj);
     

代码验证

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-03-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端猎手 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 深克隆 和 浅克隆 有了解过吗?能手写深克隆吗?
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档