深浅克隆的实现方法

一、浅克隆

1.1 概述：如果克隆的数据是一个对象的话，浅克隆只克隆了堆中对象的地址，所以克隆出的新对象的修改会导致原对象的修改。
1.2 ES6实现浅克隆

  <script>
    let obj = {
    a: 100,
    b: [10, 20, 30],
    c: {
      x: 10
    },
    d: /^\d+$/
  }

  let newObj = {...obj}
  console.log(newObj);

改变浅克隆出的对象newObj中c属性中x的值时,原对象obj中c属性中x的值也发生了变化。

1.3 手动实现浅克隆

  <script>
    let obj = {
    a: 100,
    b: [10, 20, 30],
    c: {
      x: 10
    },
    d: /^\d+$/
  }

let newObj = {}
for(let key in obj) {
  // hasOwnProperty()方法返回一个布尔值，指示对象自身属性中是否具有指定的属性
  // 当obj对象实例上没有某个属性时，停止循环
  if(!obj.hasOwnProperty(key)) break
  // 当对象实例上有这个属性时，将这个属性赋值给新的对象实例
  newObj[key] = obj[key]
}
console.log(obj);
console.log(newObj);
  </script>

二、深克隆

2.1 克隆出的对象与原对象没有关系，两个对象相互独立，对自身的修改不会影响对方。
2.2 将对象转换成字符串再还原的方法实现深克隆

  <script>
    let obj = {
    a: 100,
    b: [10, 20, 30],
    c: {
      x: 10
    },
    d: /^\d+$/,
    e: function() {
      this.a++
    }
  }
// JSON.stringify()方法将一个 JavaScript 对象或值转换为JSON字符串
// JSON.parse()方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象
let newObj = JSON.parse(JSON.stringify(obj))
console.log(obj);
console.log(newObj);

执行结果

由上述执行结果可见，此种方法对对象中的函数，Date，正则表达式的深拷贝有问题，在没有以上三种对象属性时可用此种方法进行深拷贝。
2.3 递归实现深拷贝

  <script>
    let obj = {
    a: 100,
    b: [10, 20, 30],
    c: {
      x: 10
    },
    d: /^\d+$/,
    e: function() {
      this.a++
    }
  }

  function deepClone(obj) {
    //过滤一些特殊情况
    // 如果原对象为空，则返回空，null的typeof为object
    if (obj === null) return null;
    // 如果形参数据类型不为对象，返回原数据
    if(typeof obj !== "object") return obj
    // 如果形参为一个正则表达式，返回一个新的正则表达式实例
    if(obj instanceof RegExp) {
      return new RegExp(obj);
    }
     // 如果形参为一个正则表达式，返回一个新的函数对象实例
    if(obj instanceof Function) {
      return new Function(obj)
    }
    // 如果形参为一个Date类型，返回一个新的Date类型的实例
    if(obj instanceof Date) {
      return new Date(obj);
    }
    // 不直接创建空对象的目的：克隆的结果和之前保持相同的所属类
    let newObj = new obj.constructor
    for(let key in obj) {
      if(obj.hasOwnProperty(key)) {
        // 递归调用deepClone函数，实现更深层的克隆
        newObj[key] = deepClone(obj[key])
      }
    }
    return newObj
  }
console.log(obj);
let newObj = deepClone(obj)
console.log(newObj);