JavaScript 之你可能不了解的数据类型转换

亦凉 2022-11-16 13:43 114阅读 0赞

### 1. 类型转换 ###

`javaScript` 是一种弱类型语言，变量不受类型限制，所以在特定情况下我们需要对类型进行转换。 类型转换分为**显式类型转换**和**隐式类型转换**。每种转换又分为**原始类型转换**和**对象类型转换**。

0.1 + 0.2 > 0.3

`JS` 采用的是双精度版本，这个版本就存在精度问题，就导致了上边这种情况。

计算机的信息全部转化为二进制进行存储的，那么 0.1 的二进制表示的是一个无限循环小数，该版本 的 `JS` 采用的是浮点数标准需要对这种无限循环的二进制进行截取，从而导致了精度丢失，造成了 0.1 不再是 0.1 ，截取之后 0.1 变成了 0.100…001 ， 0.2 变成了 0.200…002 。所以两者相加的数大于 0.3 。

> 0.1 不等于 0.1 了，那为什么在控制台上输出 `console.log(0.1)` 还等于 0.1 呢？

输入内容进行转换的时候，**二进制转换成十进制，然后十进制转换成字符串**，在这个转换的过程中发生 了取近似值，所以打印出来的是一个近似值

> 就像这个计算，你可能会感到不可思议，但结果确实是这样的

var two   = 0.2
    var one   = 0.1
    var eight = 0.8
    var six   = 0.6
    [two - one == one, eight - six == two]

> javascript 有时并不能正确的进行精密的数学运算。同时 javascript 的精度不足有时会影响到数字的计算

var a = 111111111111111110000, b = 1111;
    a + b;
    // 111111111111111110000

#### 1.1 数字类型转换(Number) ####

> 转化为数字类型

*  Number ： 类型转化走的是 `V8` 引擎最底层机制的转换规则
 *  `parseFloat`/ `parseInt` ：是一个额外提供的方法的转化规则

##### 1.1.1 Number #####

*  字符串 => 数字 ： 非有效字符串转化为 `NaN`
 *  布尔 => 数字：1 或 0
 *  null => 数字：0
 *  undefined => 数字：`NaN`
 *  ’ ’ => 数字：0
 *  对象 => 数字：先把对象转化为字符串，再转化为数字
 *  \[\] => 数字：0

Number(10); // 10
    Number('10'); // 10
    Number(null); // 0
    Number(''); // 0
    Number(true); // 1
    Number(false); // 0
    Number([]); // 0
    Number([1,2]); // NaN
    Number('10a'); // NaN
    Number(undefine); // NaN

##### 1.1.2 `parseInt()` / `parseFloat()` #####

`parseInt() / parseFloat([val,[进制]])` 对于字符串来说，它从左到右依次查找有效的数字字符， 直到遇到非有效数字字符，停止查找（不管后边是否还有数字，都不在进行查找，把找到的当做数字返回）

如果当前转化不为字符串，先将转化的值为字符串类型，然后进行检索数字直到遇到非数字结束。

let str = '12.5px45'
    parseInt(str) // 12
    parseFloat(str)// 12.5
    parseFloat(true)// NaN

> 来一波题目

parseInt(3, 8)
    parseInt(3, 2)
    parseInt(3, 0)
    // 3, NaN, 3

##### 1.1.3 `isNaN` 判断数字类型 #####

**如果当前为数字类型，则返回 false，否则返回 true**

（是不是数字，是数字返回 false，不是数字返回 true）

> 注意：如果当前传入的是字符串， `isNaN()` 将字符串通过 `Number()` 方法转化为数字，然后判断当前是否为字符串类型。

isNaN('12')
    // false
    isNaN('a')
    // true

#### 1.2 字符串类型转换(`toString`) ####

对于原始类型来说，转字符串类型会默认调用 `toString()` 方法。原来的基础上，外层包一层引号

*  数字 => 字符串：包裹一层引号
 *  `NaN` => 字符串： `'NaN'`
 *  `true` => 字符串： `'true'`
 *  `null` => 字符串： `'null'`
 *  `undefined` => 字符串： `'undefined'`
 *  `Object` => 字符串： `'[object,Object]'`

普通对象转化的结果为 “ \[object,object\] ”，因为 `Object.prototype.toString` 方法不是转化为字符串的，而是用来检测数据类型的。

String(123); // "123"
    String(true); // "true"
    String(null); // "null"
    String(undefined);// "undefined"
    String([1,2,3]) // "1,2,3"
    String({ }); // "[object Object]"

#### 1.3 布尔类型转换 (Boolean) ####

除了特殊的几个值 “”、 `undefined` 、 `NAN` 、 `null` 、 `false` 、 0 转化为 `Boolean` 为 `false` 之外，其他类型值都转化为 true 。

Boolean('') // false
    Boolean(undefined) // false
    Boolean(null) // false
    Boolean(NaN) // false
    Boolean(false) // false
    Boolean(0) // false
    Boolean({ }) // true
    Boolean([]) // true

#### 1.4 原始类型转换 ####

转化原始类型分为两种情况：转化为**字符串类型**或**其他原始类型**

*  如果已经是原始类型，不需要再进行转化
 *  如果转字符串类型，就调用内置函数中的 `toString()` 方法
 *  如果是其他基本类型，则调用内置函数中的 `valueOf()` 方法
 *  如果返回的不是原始类型，则会继续调用 `toString()` 方法，如果还没有返回原始类型，则报错

> 练习题走起

function fn() { 
      return 20;
    }
    console.log(fn + 10); // 输出结果是多少

function fn() { 
      return 20;
    }
    fn.toString = function () { 
      return 10;
    }
    console.log(fn + 10);  // 输出结果是多少？