【 JS 进阶 】深浅拷贝

深浅拷贝

浅拷贝

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

浅拷贝:拷贝的是地址

常见方法:

  1. 拷贝对象:Object.assgin() / 展开运算符 {…obj} 拷贝对象
  2. 拷贝数组:Array.prototype.concat() 或者 […arr]

如果是简单数据类型拷贝值,引用数据类型拷贝的是地址 (简单理解: 如果是单层对象,没问题,如果有多层就有问题)

深拷贝

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

深拷贝:拷贝的是对象,不是地址

常见方法:

  1. 通过递归实现深拷贝
  2. lodash/cloneDeep
  3. 通过JSON.stringify()实现
递归实现深拷贝

函数递归:

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

  • 简单理解:函数内部自己调用自己, 这个函数就是递归函数
  • 递归函数的作用和循环效果类似
  • 由于递归很容易发生“栈溢出”错误(stack overflow),所以必须要加退出条件 return
<body>
  <script>
    const obj = {
      uname: 'minifan',
      age: 30,
      hobby: ['乒乓球', '足球'],
      family: {
        baby: '小fan'
      }
    }
    const o = {}
    // 拷贝函数
    function deepCopy(newObj, oldObj) {
      debugger
      for (let k in oldObj) {
        // 处理数组的问题  一定先写数组 在写 对象 不能颠倒
        if (oldObj[k] instanceof Array) {
          newObj[k] = []
          //  newObj[k] 接收 []  hobby
          //  oldObj[k]   ['乒乓球', '足球']
          deepCopy(newObj[k], oldObj[k])
        } else if (oldObj[k] instanceof Object) {
          newObj[k] = {}
          deepCopy(newObj[k], oldObj[k])
        }
        else {
          //  k  属性名 uname age    oldObj[k]  属性值  30
          // newObj[k]  === o.uname  给新对象添加属性
          newObj[k] = oldObj[k]
        }
      }
    }
    deepCopy(o, obj) // 函数调用  两个参数 o 新对象  obj 旧对象
    console.log(o)
    o.age = 32
    o.hobby[0] = '篮球'
    o.family.baby = '老fan'
    console.log(obj)
    console.log([1, 23] instanceof Object) // true
  script>
body>
js库lodash里面cloneDeep内部实现了深拷贝
<body>
  
  <script src="./lodash.min.js">script>
  <script>
    const obj = {
      uname: 'minifans',
      age: 30,
      hobby: ['乒乓球', '足球'],
      family: {
        baby: '小fan'
      }
    }
    const o = _.cloneDeep(obj)
    console.log(o)
    o.family.baby = '老fan'
    console.log(obj)
  script>
body>
JSON序列化
<body>
  <script>
    const obj = {
      uname: 'minifans',
      age: 18,
      hobby: ['乒乓球', '足球'],
      family: {
        baby: '小fans'
      }
    }
    // 把对象转换为 JSON 字符串
    // console.log(JSON.stringify(obj))
    const o = JSON.parse(JSON.stringify(obj))
    console.log(o)
    o.family.baby = '123'
    console.log(obj)
  script>
body>

你可能感兴趣的:(#,JS,javascript,前端,开发语言)