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

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);  // 输出结果是多少？

function fn() {
  return 20;
}

fn.toString = function () {
  return 10;
}

fn.valueOf = function () {
  return 5;
}

console.log(fn + 10); // 输出结果是多少？