js递归方式实现深拷贝

上篇文章提到了对象的浅拷贝和深拷贝,当时深拷贝使用的是最简单的方法,如下
JSON.parse(JSON.stringify(obj))
这个方法能实现简单数据的深拷贝,但是对于复杂对象还是有局限性的,比如说会把时间对象转化成字符串,会丢失函数等等。
今天亲自封装一个方法,来实现深拷贝。原理就是先判断各个字段类型,然后用递归解决嵌套数据。

// 获取数据类型, js获取数据类型也有很多方法,我用了比较严谨的方法。
const getObjType = obj => {
  var toString = Object.prototype.toString;
  // toString() 是 Object 的原型方法,调用该方法,默认返回当前对象的 [[Class]] 。这是一个内部属性,其格式为 [object Xxx] ,其中 Xxx 就是对象的类型。
  var map = {
    '[object Boolean]': 'boolean',
    '[object Number]': 'number',
    '[object String]': 'string',
    '[object Function]': 'function',
    '[object Array]': 'array',
    '[object Date]': 'date',
    '[object RegExp]': 'regExp',
    '[object Undefined]': 'undefined',
    '[object Null]': 'null',
    '[object Object]': 'object'
  };
  if (obj instanceof Element) {
    return 'element';
  };
  // 对于 Object 对象,直接调用 toString()  就能返回 [object Object] 。而对于其他对象(如RegExp),则需要通过 call / apply 来调用才能返回正确的类型信息。
  return map[toString.call(obj)];
}

// 对象深拷贝
const deepClone = data => {
  var type = getObjType(data);
  var obj;
  if (type === 'array') {
    obj = [];
  } else if (type === 'object') {
    obj = {};
  } else {
    // 不再具有下一层次
    return data;
  };
  if (type === 'array') {
    for (var i = 0, len = data.length; i < len; i++) {
      obj.push(deepClone(data[i]));
    };
  } else if (type === 'object') {
    for (var key in data) {
      obj[key] = deepClone(data[key])
    }
  };
  return obj;
}

你可能感兴趣的:(前端,javascript)