浅拷贝与深拷贝的区别

时间:2023-01-19 19:48:37
1、数据类型:
    * 数据分为基本的数据类型(String, Number, boolean, Null, Undefined)和对象数据类型
    - 基本数据类型:
      特点: 存储的是该对象的实际数据
    - 对象数据类型:
      特点: 存储的是该对象在栈中引用,真实的数据存放在堆内存里


2、复制数据
    - 基本数据类型存放的就是实际的数据,可直接复制
      let number2 = 2;
      let number1 = number2;

    - 对象数据存放的是对象在栈内存的引用,直接复制的是对象的引用
      let obj = {username: 'kobe'}
      let obj1 = obj; // obj1 复制了obj在栈内存的引用


3、为什么要分深浅拷贝

浅拷贝:原始类型为值传递,对象类型仍为引用传递。

深拷贝(对象/数组):所有元素或属性均完全复制,与原对象完全脱离,也就是说所有对于新对象的修改都不会反映到原对象中。

     显然,浅拷贝会带来一个很大的问题。就是,如果我复制的值是一个引用地址,那么我通过一个变量去修改这个对象,会导致所有该对象的引用都发生变化。

// Object.assign() 并不是深拷贝

4、常用的拷贝技术
    1). arr.concat(): 数组浅拷贝
    2). arr.slice(): 数组浅拷贝
    3). JSON.parse(JSON.stringify(arr/obj)): 数组或对象深拷贝, 但不能处理函数数据
    4). 浅拷贝包含函数数据的对象/数组
    5). 深拷贝包含函数数据的对象/数组


1.基本数据类型的浅拷贝

        let a = 'abc'
          let b = a
          b = '123'
          console.log(a)
          console.log(b)          // 没有对原来的数据影响
          
2.对象数据类型的浅拷贝
          let obj = {
        name: 'MsYagyang',
        age: 18
        }
       let obj2 = obj           // 保存的是obj的地址值
       obj2.name = 'Li'          // 本质上修改了原对象的属性值
       console.log(obj)


3.函数的克隆
        let fun1 = function () {
        console.log('1111')
       }
        let fun2 = fun1
        fun2 = function () {
           console.log('2222')
        }
        fun1()              // 没有对原来的对象产生影响 :函数的克隆会在堆空间单独开辟一片空间  与原来的对象互不影响
        fun2()
          
深拷贝
// 准备工作 :如何正确判断判断数据的类型?
  let obj3 = []
  console.log(Object.prototype.toString.call(obj3))

  // 创建一个用来判断数据类型的函数
  function getObjClass(obj) {
    let result = Object.prototype.toString.call(obj).slice(8, -1)  //Array
    if (result === 'Undefined') {
      return 'Undefined'
    }else if (result === 'Null') {
      return 'Null'
    }else {
      return result
    }
  }

  // 创建一个深度遍历对象/数组的函数

  function deepClone(obj) {
    let objClass = getObjClass(obj)
    let result
    if(objClass === 'Object') {
      result = {}
    }else if (objClass === 'Array') {
      result = []
    }else {
      return obj       // 如果是其他数据类型就直接返回 不进行复制
    }

    // 遍历目标对象
    for(let key in obj) {
      let value = obj[key]
      if (getObjClass(value) === 'Object') {
        result[key] = deepClone(value)
      }else if (getObjClass(value) === 'Array') {
        result[key] = deepClone(value)
      }else {
        result[key] = obj[key]
      }
    }
    return result
  }

  let obj4 = {
    name: 'haha',
    age: 20,
    sex: {
      option1: '男',
      option2: '女'
    }
  }

  let obj5 = deepClone(obj4)
  console.log(obj5, 'obj5')
  obj5.sex.option1 = '不男不女'
  console.log(obj4, 'obj4')