2.深拷贝和浅拷贝

  • 浅拷贝 只拷贝第一层
let obj = {
        a: 100,
        b: [10, 20, 30],
        c: {
          x: 10,
        },
        d: /^\d+$/,
      };
// ES6出的
      let obj2 = {
        ...obj
      };
let obj = {
        a: 100,
        b: [10, 20, 30],
        c: {
          x: 10,
        },
        d: /^\d+$/,
      };

        let obj2 = {};
      for (let key in obj) {
  // hasOwnProperty()方法可以检测对象是否有某个属性,比如检测obj是否有a,b,c,d,这些属性
        if (!obj.hasOwnProperty(key)) break;
        obj2[key] = obj[key];
      }
let obj = {
        a: 100,
        b: [10, 20, 30],
        c: {
          x: 10,
        },
        d: /^\d+$/,
      };
let obj2 = JSON.parse(JSON.stringify(obj));
      //=>弊端?
      //如何对象中有 正则表达式 函数 日期对象 会导致出现问题,
      // JSON.stringify(obj)的结果是空白或者异常
  • 深拷贝拷贝 每一层都拷贝
let obj = {
        a: 100,
        b: [10, 20, 30],
        c: {
          x: 10,
        },
        d: /^\d+$/,
      };
//封装一个方法
function deepClone(obj) {
        //=>过滤特殊情况
        if (obj === null) return null;
        if (typeof obj !== "object") return obj;
        if (obj instanceof RegExp) {
          return new RegExp(obj);
        }
        if (obj instanceof Date) {
          return new Date(obj);
        }
        //=>不直接创建空对象目的:克隆的结果和之前保持相同的所属类
        let newObj = new obj.constructor();
        for (let key in obj) {
          if (obj.hasOwnProperty(key)) {
            newObj[key] = deepClone(obj[key]);
          }
        }
        return newObj;
      }

// 调用和测试
      let obj2 = deepClone(obj);
      console.log(obj, obj2);
      console.log(obj === obj2);
      console.log(obj.c === obj2.c);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.浅拷贝浅拷贝将原对象或原数组的引用直接赋给新对象,新数组,新对象/数组只是原对象的一个引用(拷贝后的引用都是指...
    Pluto_dbec阅读 286评论 0 0
  • 目录1.浅拷贝2.深拷贝 1.浅拷贝 1.1 "="拷贝 list_dest = list_src完全同步,引用指...
    Stone_説阅读 404评论 0 5
  • 浅拷贝和深拷贝都是对于JS中的引用类型而言的,浅拷贝就只是复制对象的引用(堆和栈的关系,简单类型Undefined...
    却忘不掉你心言阅读 532评论 0 0
  • 简介 注:浅拷贝和深拷贝都只针对于像Object, Array这样的复杂对象。浅拷贝:浅拷贝只是复制了内存地址,如...
    agamgn阅读 369评论 0 1
  • 之前,我们讲过js的数据类型与堆内存、栈内存以及数据类型,了解该知识点以后,我们来进一步学习 浅拷贝与深拷贝。 在...
    YINdevelop阅读 598评论 0 0