整数和浮点数

JavaScript 内部,所有数字都是以64位浮点数形式储存,即使整数也是如此。所以,<font style="color:#F5222D;">1</font><font style="color:#F5222D;">1.0</font>是相同的,是同一个数。

  1. 1 === 1.0 // true

这就是说,JavaScript 语言的底层根本没有整数,所有数字都是小数(64位浮点数)。容易造成混淆的是,某些运算只有整数才能完成,此时 JavaScript 会自动把64位浮点数,转成32位整数,然后再进行运算,参见《运算符》一章的“位运算”部分。

由于浮点数不是精确的值,所以涉及小数的比较和运算要特别小心。

  1. 0.1 + 0.2 === 0.3
  2. // false
  3. 0.3 / 0.1
  4. // 2.9999999999999996
  5. (0.3 - 0.2) === (0.2 - 0.1)
  6. // false
探究:如何实现以上运算

一种方式使用toFixed 方法进行小数截取

  1. console.log((0.1 + 0.2).toFixed(2)) //0.3
  2. console.log(1.0 - 0.9) //0.09999999999999998
  3. console.log((1.0 - 0.9).toFixed(2)) //0.10

将小数转为整数进行计算后,再转为小数也可以解决精度问题

  1. Number.prototype.add = function (num) {
  2. //取两个数值中小数位最大的
  3. let n1 = this.toString().split('.')[1].length
  4. let n2 = num.toString().split('.')[1].length
  5. //得到10的N次幂
  6. let m = Math.pow(10, Math.max(n1, n2))
  7. return (this * m + num * m) / m
  8. }
  9. console.log((0.1).add(0.2))

推荐做法

市面上已经存在很多针对数学计算的库 mathjsdecimal.js 等,我们就不需要自己构建了。下面来演示使用 decimal.js 进行浮点计算。

  1. <script src="https://cdn.bootcss.com/decimal.js/10.2.0/decimal.min.js"></script>
  2. <script>
  3. console.log(Decimal.add(0.1, 0.2).valueOf())
  4. </script>

技巧收集

指定返回的小数位数可以四舍五入

  1. console.log((16.556).toFixed(2)); // 16.56

NaN

(1)含义

<font style="color:#F5222D;">NaN</font>是 JavaScript 的特殊值,表示“非数字”(Not a Number),主要出现在将字符串解析成数字出错的场合

  1. 5 - 'x' // NaN

上面代码运行时,会自动将字符串x转为数值,但是由于x不是数值,所以最后得到结果为NaN,表示它是“非数字”(NaN)。

另外,一些数学函数的运算结果会出现NaN

  1. Math.acos(2) // NaN
  2. Math.log(-1) // NaN
  3. Math.sqrt(-1) // NaN

0除以0也会得到NaN

  1. 0 / 0 // NaN

需要注意的是,NaN不是独立的数据类型,而是一个特殊数值,它的数据类型依然属于Number,使用typeof运算符可以看得很清楚。

  1. typeof NaN // 'number'

(2)运算规则

<font style="color:#F5222D;">NaN</font>不等于任何值,包括它本身。

  1. NaN === NaN // false
解决方法

1.isNaN

  1. var res = 2 / 'houdunren';
  2. if (Number.isNaN(res)) {
  3. console.log('Error');
  4. }

2.也可以使用 <font style="color:#F5222D;">Object.is</font> 方法判断两个值是否完全相同

  1. var res = 2 / 'houdunren';
  2. console.log(Object.is(res, NaN));
数组的<font style="color:#F5222D;">indexOf</font>方法内部使用的是严格相等运算符,所以该方法对NaN不成立。 javascript [NaN].indexOf(NaN) // -1 NaN在布尔运算时被当作falsejavascript Boolean(NaN) // false NaN与任何数(包括它自己)的运算,得到的都是NaNjavascript NaN + 32 // NaN NaN - 32 // NaN NaN * 32 // NaN NaN / 32 // NaN ### parseInt() #### (1)基本用法 parseInt方法用于将字符串转为整数。 plain parseInt('123') // 123 如果字符串头部有空格,空格会被自动去除。 plain parseInt(' 81') // 81 如果parseInt的参数不是字符串,则会先转为字符串再转换。 plain parseInt(1.23) // 1 // 等同于 parseInt('1.23') // 1 字符串转为整数的时候,是一个个字符依次转换,如果遇到不能转为数字的字符,就不再进行下去,返回已经转好的部分。 plain parseInt('8a') // 8 parseInt('12**') // 12 parseInt('12.34') // 12 parseInt('15e2') // 15 parseInt('15px') // 15 上面代码中,parseInt的参数都是字符串,结果只返回字符串头部可以转为数字的部分。 如果字符串的第一个字符不能转化为数字(后面跟着数字的正负号除外),返回NaNplain parseInt('abc') // NaN parseInt('.3') // NaN parseInt('') // NaN parseInt('+') // NaN parseInt('+1') // 1 所以,parseInt的返回值只有两种可能,要么是一个十进制整数,要么是NaN。 如果字符串以0x0X开头,parseInt会将其按照十六进制数解析。 plain parseInt('0x10') // 16 如果字符串以0开头,将其按照10进制解析。 plain parseInt('011') // 11 对于那些会自动转为科学计数法的数字,parseInt会将科学计数法的表示方法视为字符串,因此导致一些奇怪的结果。 plain parseInt(1000000000000000000000.5) // 1 // 等同于 parseInt('1e+21') // 1 parseInt(0.0000008) // 8 // 等同于 parseInt('8e-7') // 8 #### (2)进制转换 <font style="color:#F5222D;">parseInt</font>方法还可以接受第二个参数(2到36之间),表示被解析的值的进制,返回该值对应的十进制数。默认情况下,parseInt的第二个参数为10,即默认是十进制转十进制。 javascript parseInt('1000') // 1000 // 等同于 parseInt('1000', 10) // 1000 下面是转换指定进制的数的例子。 javascript parseInt('1000', 2) // 8 parseInt('1000', 6) // 216 parseInt('1000', 8) // 512 上面代码中,二进制、六进制、八进制的1000,分别等于十进制的8、216和512。这意味着,可以用parseInt方法进行进制的转换。 思考:如何进制转换?

如果第二个参数不是数值,会被自动转为一个整数。这个整数只有在2到36之间,才能得到有意义的结果,超出这个范围,则返回NaN如果第二个参数是<font style="color:#F5222D;">0</font><font style="color:#F5222D;">undefined</font><font style="color:#F5222D;">null</font>,则直接忽略。

  1. parseInt('10', 37) // NaN
  2. parseInt('10', 1) // NaN
  3. parseInt('10', 0) // 10
  4. parseInt('10', null) // 10
  5. parseInt('10', undefined) // 10

如果字符串包含对于指定进制无意义的字符,则从最高位开始,只返回可以转换的数值。如果最高位无法转换,则直接返回NaN

  1. parseInt('1546', 2) // 1
  2. parseInt('546', 2) // NaN

上面代码中,对于二进制来说,1是有意义的字符,546都是无意义的字符,所以第一行返回1,第二行返回NaN

前面说过,如果parseInt的第一个参数不是字符串,会被先转为字符串。这会导致一些令人意外的结果。

  1. parseInt(0x11, 36) // 43
  2. parseInt(0x11, 2) // 1
  3. // 等同于
  4. parseInt(String(0x11), 36)
  5. parseInt(String(0x11), 2)
  6. // 等同于
  7. parseInt('17', 36)
  8. parseInt('17', 2)

上面代码中,十六进制的0x11会被先转为十进制的17,再转为字符串。然后,再用36进制或二进制解读字符串17,最后返回结果431

这种处理方式,对于八进制的前缀0,尤其需要注意。

  1. parseInt(011, 2) // NaN
  2. // 等同于
  3. parseInt(String(011), 2)
  4. // 等同于
  5. parseInt(String(9), 2)

上面代码中,第一行的011会被先转为字符串9,因为9不是二进制的有效字符,所以返回NaN。如果直接计算parseInt('011', 2)011则是会被当作二进制处理,返回3。

JavaScript 不再允许将带有前缀0的数字视为八进制数,而是要求忽略这个0。但是,为了保证兼容性,大部分浏览器并没有部署这一条规定。

一道面试题

https://github.com/sisterAn/blog/issues/19

  1. ['1', '2', '3'].map(parseInt)
  2. // 1, NaN, NaN
  1. ['10','10','10','10','10'].map(Number);
  2. // [10, 10, 10, 10, 10]