js基础知识——深浅拷贝

一、什么是深浅拷贝？

• 通常是指将一个引用数据类型，拷贝到另一个变量中，但是根据拷贝的方法不同，展示出的效果也不同

二、浅拷贝

• 将一份数据拷贝到另外一个变量中,修改拷贝后的对象的属性值，只有第一层的数据不会被影响，其他层的值会改变

      let obj = {
      name:'萧瑟',
      age:20,
      info:{
        width:100,
        height:180
      }
    }

    let newObj = {}
    for(let key in obj){
      newObj[key] = obj[key]
    }

    newObj.age = 999
    newObj.info.width = 666
    console.log('obj',obj)   
    console.log('newObj',newObj)  //二者age相同，width不同

三、深拷贝

• 将一份数据拷贝到另外一个变量中, 不管修改哪一层数据, 两个对象之间都不会互相影响

面试使用的方法（需要会手写）

      let obj1 = {
        name:'无心',
        age:22,
        info:{
          width:120,
          height:185
        }
      }
      
    
    需求：将原始对象(origin)内的所有属性 拷贝到目标对象(target)中
    
    let newObj1 = {}
    function deepClone(target,origin){    //封装一个函数 
      // 1.通过for ...in 遍历对象，拿到对象所有的key与value
      for(let key in origin){
        // 2.根据遍历到的属性值是什么类型的，决定执行什么代码
        if (Object.prototype.toString.call(origin[key]) === '[object Object]')//判断key的值是否为一个对象
        {
          target[key] = {}
          deepClone(target[key],origin[key])

        }else if (Object.prototype.toString.call(origin[key]) === '[object Array]') //判断key的值是否为一个数组
        {
          target[key] = {}
          deepClone(target[key],origin[key])

        }else{  //表明当前这个 key 的值 一定不是对象或者数组
          target[key] = origin[key]
        }
      }
    }
      deepClone(newObj1,obj1) //调用
      newObj1.name = '雷无桀'
      newObj1.info.width = 200
      console.log('obj1',obj1)
      console.log('newObj1',newObj1)

工作时使用

      let obj1 = {
        name:'无心',
        age:22,
        info:{
          width:120,
          height:185
        }
      }
      
  newObj2 = JSON.parse(JSON.stringify(obj1))

  newObj2.name = '司空千落'
  newObj2.age = 20
  newObj2.info.height = 170
  console.log('obj1',obj1)
  console.log('newObj2',newObj2)