js基本数据类型和引用数据类型以及深浅拷贝

基本数据类型

• Number、String、Boolean、Null、Undefined、Symbol()六种

引用数据类型

• Object（Array、Function、Date、RegExp）

判断对象类型的方法？见博客https://blog.csdn.net/qq_38700448/article/details/100306197

区别：

• 基本数据类型存储在栈里面，引用数据类型存储在堆里面（指向堆的引用地址存储在栈中）
• 堆和栈的区别
  • 栈的内存空间大小是固定的，数据大小是固定的，并且用完后会被系统自动回收
  • 堆是动态分配内存，数据大小是不固定的并且不会被系统自动回收

浅拷贝和深拷贝：是相对于引用类型而言

• 对于基本数据类型，复制直接是值复制，栈中会开辟一个新空间来存储，所以相互不会产生影响

  var a = 2;
  b = a;
  b = 3;
  console.log(a,b)  //2 3
  //a b 是存储在栈中不同的位置，所以相互没有任何影响
  

• 对于引用数据类型，复制的是引用地址，共同指向堆中的数据，所以两者是相互联系的

  var obj = {name:'js'}
  var obj1 = obj;
  obj1.name = 'javaScript'
  obj1.age = '10'
  console.log(obj,obj1) 
  //{name: "javaScript"} {name: "javaScript"}
  
  //修改obj1对象，相当于是直接操作堆中的数据，而obj存储的引用地址指向的是同一堆，所以输出一样
  

• 针对引用类型的复制分为浅拷贝和深拷贝

  • 浅拷贝

    //实现浅拷贝的两种方式
    //1、var newObj = {...obj};
    //2、var newObj = Object.assign({},obj)
    
    var obj = {name:'浅拷贝',children:['vue','react']};
    var obj1 = {...obj}
    obj1.age = 18
    obj1.name = 'obj1浅拷贝'
    obj1.children.push('Angular'); //会改变obj、obj1、obj2的chi ldren
    var obj2 = Object.assign({},obj)
    obj2.age = 20
    
    console.log(obj.children) //['vue','react','Angular']
    console.log(obj1.children) //['vue','react','Angular']
    console.log(obj2.children)    //['vue','react']
    

    //Object.assign(target,source1,source2...sourceN)  
    //将所有源对象的可枚举属性合并到目标对象target中
    //并且后出现的同名属性会覆盖前面的
    var source1 = {name:'js'}, source2 = {name:'javaScript'}, source3 = {age: 18}, source4 = {hobby:'折磨人'}
    
    var newObj = Object.assign({},source1,source2,source3,source4)
    

    问题：浅拷贝可以实现一维对象深层拷贝，但是对于多维实现不了（浅拷贝顾名思义就是只能保证保证复制的第一层是相互独立的）

  • 深拷贝：实现深层拷贝，父子对象相互独立，互不影响

    //实现深层拷贝的两种方式
    //1、var newObj = JSON.parse(JSON.stringify(obj))
    //2、函数deepCopy实现
    
    function deepCopy(obj) {
      var result = Array.isArray(obj) ? [] : {};
      for(i in obj) {
        if(obj.hasOwnProperty(i)) {
          item = obj[i];
          if(item && item instanceof Object) {
            result[i] = deepCopy(item)
          } else {
            result[i] = item;
          }
        }
      }
      return result;
    }
    
    //同样用浅拷贝的数据，来对比一波
    var obj = {name:'浅拷贝',children:['vue','react']};
    
    var newObj = deepCopy(obj);
    newObj.children.push('Angular');
    
    console.log(newObj.children) //['vue','react','Angular']
    console.log(obj.children)    //['vue','react']
    
    //使用深拷贝，可以保证父子对象相互独立，互不影响