深拷贝与浅拷贝

135 阅读1分钟

js的数据类型

再讲一个值赋值给变量时,解析器必须确定这个值是基本数据类型还是引用数据类型

  • 基本数据类型 String number boolean null undefined
  • 引用数据类型 Object(Array Object Function Map Set)
  • 两种数据类型在浏览器中有着不同的存储方式
  • 基础数据类型存储在栈中,变量名和变量值一一对应,如图
栈 var a = 1
变量名
a1
  • 引用数据类型在栈内存储的信息为变量名与地址,地址指向引用数据类型的值,如下
栈 var obj = { a :3}
变量名地址
obj地址

地址指向堆中存放的引用数据类型值的存储地

浅拷贝实际举例

 let obj = {
      a : 1,
      b : 3
    }
    let obj1 = obj
    console.log(obj);
    console.log(obj1);

深拷贝代码举例:

// 不引入lodash
let obj2 = {};
    for(var i in obj){
      obj2[i] = obj[i]
    }
    obj2.a = 3
    console.log(obj2.a === obj.a); // false
// 引入lodash
 let obj = {
      a : 1,
      b : 3
    }
    let obj2 = _.cloneDeep(obj) // 调用lodash的深拷贝方法
    console.log(obj2);
    obj2.a = 3
    console.log(obj2.a === obj.a); // false

赋值仅会将obj的地址赋值给obj1,这样在改变obj1的值时将会影响到obj的值;然而深拷贝是重新开辟新的地址空间然后完全赋值内存关系如图所示:

未命名文件.png