数据类型及隐式转换原理

数据类型

了解 JS 的小伙伴 ES6 开始新增了两个基本类型，即改变为 “五基两空一对象”

基础类型
- string、number、boolean、null、undefined、symbol、bigint
对象类型
- Object对象
- Array、RegExp、Date、Error、Math、ArrayBuffer…..

除了 symbol 和 bigint 其他的数据类型对前端小伙伴并不陌生，那什么时候才会用到这两个新增属性呢？

symbol 的使用场景

当我们需要一个唯一值，并且该值永不重复的时候

let key = Symbol();
let obj = {
    [key]:"this is SybolValue"
}

上面的代码此时的 key 就是对象 obj 中的唯一属性；

bigint 的使用场景

在一些开发场景中，不少人会遇到后端人员会传给客户端一些大数位的内容，这些内容在浏览器中出现数据错乱。而针对于这种问题常用的方案是让后端将内容转换为字符串类型。但是如果这个大数需客户端计算时任然会出现数据错乱的问题。

来看使用 bigint 后的运算结果

let num = BigInt("999984531345678951324") //999984531345678951324n
console.log(num - 1n) // 999984531345678951323n
num.toString() // 999984531345678951323

上面的代码使用 bigint 进行大数运算就不会出现数据错乱，但使用方式值得注意的是需要在后面加上 n

小数计算精度丢失的问题

说起数据错乱就会让人想到小数计算时精度丢失如何处理，来看下面图

在小数计算时给所有小数乘以一个十的倍数，比如10、100等进行计算，计算结果在除以倍数即可得到正确的结算结果

隐式转换规则及原理

其他类型转为数字

Number(xxx)
- 字符串转数字空字符会转换成0，整个字符中只要出现非数字的字符就会是NAN
- 布尔转数字 true : 1 ; false : 0
- null ：0
- undefined ：0
- symbol ： error
- BigInt : 正常的数值（一定情况下会出现精度丢失问题）
parseInt/parseFloat
- 首先会把 value 转换为字符串，从做左到右识别到第一个无效字符为止，把前面的数字转换为number

其他类型转换为字符串

不是所有的对象都是字符串拼接

选去调取对象的 Symbol.toPrimitive 属性值，如果没有
去调取对象的 valueOf 获取原始值，如果不是原始值
再去调用 toString 转换为字符串（如果转换为数字，则回调用 Number）

let obj = {x: 10};
console.log(10 + obj); //"10[object Object]"

上面的代码 obj 对象中没有 Symbol.toPrimitive 属性，调取了 valueOf 获取原始值，得到了一个 {x:10}，然后进行字符串拼接之后变成 ”10[object Object]“

 let obj = {
    x: 10,
    // obj[Symbol.toPrimitive] && valueOf && toString
    [Symbol.toPrimitive](hint) {
        // console.log(hint); //=>”default“、”string“、”number“
        return this.x;
    }
};
console.log(10 + obj); //20

上面这段代码给 obj 添加了 Symbol.toPrimitive 属性，返回了 x 的值，结果进行了数字运算，结果 20.

加号位置决定是不是字符串拼接

let n = "10";
+n // 10-->number