js-数据类型及浅拷贝深拷贝

参考链接： https://www.jianshu.com/p/1c142ec2ca45

                   https://blog.csdn.net/sinat_34531165/article/details/83861997

Js中的八种数据类型

JS中有 Number , String , null , undefined , Boolean ,  Object , BigInt, Symbol 八种数据类型,而JS的变量,根据指向数据类型的不同,也分为两种类型,一种基本类型,一种引用类型.

BigInt数据类型的目的是比Number数据类型支持的范围更大的整数值。在对大整数执行数学运算时，以任意精度表示整数的能力尤为重要。使用BigInt，整数溢出将不再是问题。

此外，可以安全地使用更加准确时间戳，大整数ID等，而无需使用变通方法。 BigInt目前是第3阶段提案， 一旦添加到规范中，它就是JS 第二个数字数据类型，也将是 JS 第8种基本数据类型：

• Boolean
• Null
• Undefined
• Number
• BigInt
• String
• Symbol
• Object

typeof函数返回结果与值对应表如下：

类型	结果
Undefined	"undefined"
Null	"object"
Boolean	"boolean"
Number	"number"
BigInt	"bigint"
String	"string"
Symbol (ECMAScript 2015 新增)	"symbol"
宿主对象（由 JS 环境提供）	取决于具体实现
Function 对象 (按照 ECMA-262 规范实现 [[Call]])	"function"
其他任何对象	"object"

基本类型

Number , String , null , undefined , Boolean , Symbol

基本类型的访问是按值访问的，即可以操作保存在变量中的实际的值。

1. 值类型：在从一个变量向另一个变量赋值基本类型时，会在该变量上创建一个新值，然后再把该值复制到为新变量分配的位置上，即基本类型在赋值操作后，两个变量是相互不受影响的。变量的交换等于在一个新的地方按照连锁店的规范标准（统一店面理解为相同的变量内容）新开一个分店，这样新开的店与其它旧店互不相关、各自运营。
2. 基本类型的变量是存放在栈区的（栈区指内存里的栈内存）

var a='sdsdd'
var b=false

栈区
a	'sdsdd'
y	false

var x='dsfsdf'
var y=x
x=x+'+' //"dsfsdf+"
console.log(x,y) //dsfsdf+  dsfsdf

引用类型

javascript中除了基本类型之外就是引用类型了，即为对象。对象是属性和方法的集合。也就是说引用类型可以拥有属性和方法，属性又可以包含基本类型和引用类型。

1. 引用类型：在从一个变量向另一个变量赋值引用类型时，会将该变量的引用地址赋值给变量，不会重新开辟一块新的存储空间。即引用类型在赋值操作后，两个变量是相互受影响的。变量的交换等同于把现有一间店的钥匙（变量引用地址）复制一把给了另外一个老板，此时两个老板同时管理一间店，两个老板的行为都有可能对一间店的运营造成影响。
2. 引用类型的值是同时保存在栈内存和堆内存中的对象

var obj1={a:1,b:2,c:{d:'sdsd'}}
var obj2=obj1
obj2.a=5
console.log(obj1,obj2) // {a: 5, b: 2, c: {d: "sdsd"}} {a: 5, b: 2, c: {d: "sdsd"}}

    3.引用类型比较

var x={};
var y={};
console.log(x==y);//false
console.log(x===y);//false

引用类型是按引用访问的，即就是比较两个对象的堆内存中的地址是否相同，那很明显，x和y在堆内存中地址是不同的。

引用类型的存储需要内存的栈区和堆区（堆区是指内存里的堆内存）共同完成，栈区内存保存变量标识符和指向堆内存中该对象的指针，也可以说是该对象在堆内存的地址。 

栈区			堆区
x	堆内存地址1	--------------------------->	{}
y	堆内存地址1	--------------------------->	{}

浅拷贝

浅拷贝：复制基本类型的属性；引用类型的属性复制，复制栈中的变量 和 变量指向堆内存中的对象的指针，不复制堆内存中的对象。

深拷贝

深拷贝是指复制对象的所有层级，不仅仅是复制对象最外层的属性

 （1）采用递归去拷贝所有层级属性

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象，如果是，递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    
let a=[1,2,3,4],
    b=deepClone(a);
a[0]=2;
console.log(a,b);

（2） 通过JSON对象来实现深拷贝

function deepClone2(obj) {
  var _obj = JSON.stringify(obj),
    objClone = JSON.parse(_obj);
  return objClone;
}

缺点： 无法实现对对象中方法的深拷贝，会显示为undefined

（3）手动实现深拷贝

let obj1 = {
   a: 1,
   b: 2
}
let obj2 = {
   a: obj1.a,
   b: obj1.b
}
obj2.a = 3;
alert(obj1.a); // 1
alert(obj2.a); // 3

（4）如果对象的value是基本类型的话，也可以用Object.assign来实现深拷贝，但是要把它赋值给一个空对象

var obj = {
    a: 1,
    b: 2
}
var obj1 = Object.assign({}, obj); // obj赋值给一个空{}
obj1.a = 3;
console.log(obj.a)；// 1

（5）使用扩展运算符实现深拷贝

// 当value是基本数据类型，比如String，Number，Boolean时，是可以使用拓展运算符进行深拷贝的
// 当value是引用类型的值，比如Object，Array，引用类型进行深拷贝也只是拷贝了引用地址，所以属于浅拷贝
var car = {brand: "BMW", price: "380000", length: "5米"}
var car1 = { ...car, price: "500000" }
console.log(car1); // { brand: "BMW", price: "500000", length: "5米" }
console.log(car); // { brand: "BMW", price: "380000", length: "5米" }