JS进阶-深浅拷贝

浅拷贝和深拷贝只针对引用类型

浅拷贝

浅拷贝：拷贝的是地址

常见方法：

1.拷贝对象：Object.assgin()/展开运算符{...obj}拷贝对象

2.拷贝数组：Array.prototype.concat()或者[...arr]

如果是简单数据类型拷贝值，引用数据类型拷贝的是地址（简单理解：如果是单层对象，没问题，如果是多层就有问题）

    const obj = {
      uname: 'pink',
      age: 18
    }
    const o = {}
    function deepCopy(newObj, oldObj) {
      for (let k in oldObj) {
        newObj[k] = oldObj[k]
      }
    }
    deepCopy(o, obj)

直接赋值vs浅拷贝

1）直接赋值的方法，只要是对象，都会相互影响，因为是直接拷贝对象栈里面的地址

2）浅拷贝如果是一层对象，不相互影响，如果出现多层对象拷贝还会相互影响

深拷贝

深拷贝：拷贝的是对象，不是地址

常见方法：

1.通过递归实现深拷贝

    const obj = {
      uname: 'pink',
      age: 18
    }
    const o = {}
    function deepCopy(newObj, oldObj) {
      for (let k in oldObj) {
        //先Array后Object
        if (oldObj[k] instanceof Array) {
          newObj[k] = []
          deepCopy(newObj[k], oldObj[k])
        } else if (oldObj[k] instanceof Object) {
          newObj[k] = {}
          deepCopy(newObj[k], oldObj[k])
        } else {
          newObj[k] = oldObj[k]
        }
      }
    }
    deepCopy(o, obj)

函数递归：如果一个函数在内部可以调用其本身，那么这个函数就是递归函数

1）简单理解：函数内部自己调用自己，这个函数就是递归函数

2）递归函数的作用和循环效果类似

3）由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件return

案例：利用递归函数实现setTimeout模拟setInterval效果

setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。

setTimeout(func|code, delay)

 setInterval() 方法会不停地调用函数。

    function getTime() {
      document.querySelector('div').innerHTML = new Date().toLocaleString()
      setTimeout(getTime, 1000)
    }
    getTime()

2.JS库lodash里面cloneDeep内部实现了深拷贝

  <script src="lodash.js"></script>
  <script>
    const obj = {
      uname: 'pink',
      age: 18,
      hobby: ['篮球', '足球'],
      family: {
        baby: '小pink'
      }
    }
    const o = _.cloneDeep(obj)
  </script>

3.通过JSON.stringify()实现

    const obj = {
      uname: 'pink',
      age: 18,
      hobby: ['篮球', '足球'],
      family: {
        baby: '小pink'
      }
    }
    const o = JSON.parse(JSON.stringify(obj))//把对象转化为JSON字符串再转化为对象