首页 > 建站教程 > JS、jQ、TS >  js deepClone 深拷贝实现方法正文

js deepClone 深拷贝实现方法

js deepClone 深拷贝主要用于对象、数组等拷贝后,操作拷贝的数据不影响原数据。下面分享两种方法,都可实现:


1、通过Object.create和Object.defineProperty取对象的所有属性,返回一个新的对象:

function deepClone(orig) {
  var copy = Object.create(Object.getPrototypeOf(orig))
  copyOwnPropertiesFrom(copy,orig);
  return copy;
}
function copyOwnPropertiesFrom(target, source) {
  Object.getOwnPropertyNames(source)
    .forEach(ele =>{
      // 获取到每个属性的所有描述,然后重新定义对象的属性并返回此对象。
      var desc = Object.getOwnPropertyDescriptor(source,ele);
      Object.defineProperty(target,ele,desc)
    });
  return target;
}
deepClone(obj)


2、递归遍历对象的属性,返回一个新的对象

function deepClone(obj) {
  // 方法一
  // let newObj = obj.constructor === Array ? [] : {}
  // if(typeof obj !== 'object') {
  //   return obj
  // }else{
  //   for(var i in obj) {
  //     if(typeof obj[i] === 'object'){
  //       newObj[i] = deepClone(obj[i])
  //     }else{
  //       newObj[i] = obj[i]
  //     }
  //   }
  // }
  // return newObj;
  
  // 方法二
  if (!obj && typeof obj !== "object") {
    throw new Error("error arguments", "deepClone");
  }
  const targetObj = obj.constructor === Array ? [] : {};
  Object.keys(obj).forEach(keys => {
    if (obj[keys] && typeof obj[keys] === "object") {
      targetObj[keys] = deepClone(obj[keys]);
    } else {
    targetObj[keys] = obj[keys];
    }
  });
  return targetObj;
}


注:此方法对new Date()、/\s|\n/g 等这种时间和正则对象无效


当然还有其他方法实现,这里仅介绍这两种比较简单的实现方式。