好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

ES6+ 数值扩展

ES6+ 数值扩展

1. 前言

ES6 对数值进行了大的改版,在向下兼容的同时,把所有的数值 方法 由全局移植到了 Number 对象下,在数组和字符串中也做了类似的操作,这样的主要目的是精简全局 方法 ,更加明确的表达 方法 的含义。另外,ES6 还 增加 了二进制和八进制的表示 方法 ,并 增加 了很多数值处理的 方法 ,本节就来看看 ES6 对数值的扩展。

2. Number 对象

JavaScript 的 Number 对象是经过封装的,能让你处理数字值的对象, Number 对象由 Number() 构造器创建。

2.1 类型转换

在非构造器上下文中,也就是没有 new 操作符时, Number 可以类型转换的 函数 使用。 接收 一个 参数,并将这个参数转换为数字,如果参数无法被转换为数字,则返回 NaN 。

  Number  (  '10'  ) 			 	 // 10 
 Number  (  'imooc'  ) 		 	 // NaN 
 Number  (  ''  ) 					 // 0 
 Number  (  ) 						 // 0 
 Number  ( undefined ) 		 // NaN 
 

上面的 代码 中,在没有字符串或者是空字符串的时候,会得到数字 0,还有参数是 null 时得到的结果也是 0。但是,当参数为 undefined 时则会得到 NaN 。

2.2 移植全局 方法

在 ES5 中,如 parseFloat 、 parseInt 等都是全局 方法 ,在 ES6 中把处理数值的一些 方法 都移植到了 Number 对象上了。

  parseInt  (  '123'  )  ; 				 // 123 
Number .  parseInt  (  '123'  )  ; 	 // 123 
 

上面的 代码 可以看到,Number 对象下也有 parseInt 的 方法 ,并且所有的数值 方法 在 Number 上也是一一对应的, 功能 基本相同,有些 方法 还做了扩展。在后面的小节中我们会对 Number 上的 方法 和全局的 方法 进行对比,看它们有什么不同,ES6 又 解决 了什么问题。

3. 二进制和八进制表示法

ES6 提供了二进制和八进制数值表示的新写法,分别用前缀 0b (或 0B )和 0o (或 0O )表示。对应的十六进制我们知道用 0x 作为前缀来表示的。下面我们来看看二进制和八进制是怎么表示的。

  // es6 2进制 0B 开头 
console .  log  (  'B'  ,  )  ;  	 // 503 
console .  log  (  'B'  ,  )  ;  	 // 相同,0B 和 0b 都可以 

 // es6 8进制 0o 开头 
console .  log  (  )  ;  	 // 503 
console .  log  (  )  ;  	 // 相同,0o 和 0O 都可以 
 

上面的 代码 分别使用了二进制和八进制对数字 503 进行了表示,那下面我们来验证一下:

   ===    // true 
  ===   		 // true 
 

上面的 代码 中使用了全等的方式进行判断,很明显,ES6 是 支持 这种方式的表示的。

从 ES5 开始,在严格模式之中,八进制就不再允许使用前缀 0 表示,ES6 进一步明确,要使用前缀 0o 表示。

  // 非严格模式 
 (  function  (  )  { 
  console .  log  (   ===   )  ; 	 // true 
 }  )  (  ) 

 // 严格模式 
 (  function  (  )  { 
   'use strict'  ; 
  console .  log  (   ===   )  ; 
 }  )  (  ) 
 // Uncaught  Syntax Error: Octal li tera ls are not allowed in strict mode. 
 

将 0b 和 0o 前缀的字符串数值转为十进制,可以把 Number 对象直接作为 方法 使用。

  Number  (  '0b111'  )    // 7 
 Number  (  '0o10'  )     // 8 
 

4. Number 的 属性 介绍

ES6 对 Number 的 属性 进行了丰富,能够适用更多的场景。

4.1 Number.EPSILON

ES6 在 Number 对象上面,新增 一个 极小的常量 Number.EPSILON 。它表示 1 与大于 1 的最小浮点数之 间的 差。它是 一个 差值,属于正数。

你不必创建 一个 Number 对象来访问这个静态 属性 (可以直接使用 Number.EPSILON)。

 console .  log  ( Number . EPSILON )   // 2.220446049250313e-16 
 

EPSILON 属性 的值接近于 2.2204460492503130808472633361816E-16,或者 2 的 -52 次方。

对于 64 位浮点数来说,大于 1 的最小浮点数相当于二进制的 1.00…001,小数点后面有连续 51 个零。这个值减去 1 之后,就等于 2 的 -52 次方。

   +  
 // 0.30000000000000004 

  +    -  
 // 5.551115123125783e-17 

 .  toFixed  (  ) 
 // '0.00000000000000005551' 
上面 代码 解释了,为什么比较  +  与得到的结果是 false 。

  +    ==  =    // false 
 

Number.EPSILON 实际上是 JavaScript 能够表示的最小精度。误差如果小于这个值,就可以认为已经没有意义了,即不存在误差了。

引入 一个 这么小的量的目的,在于为浮点数计算,设置 一个 误差范围。我们知道 浮点数计算是不精确的。

   <  Number . EPSILON  *  Math .  pow  (  ,   ) 
 // true 
 

4.2 Number.MAX_SAFE_INTEGER

Number.MAX_SAFE_INTEGER 常量表示在 JavaScript 中最大的安全整数(maxinum safe integer)( 2e53 - 1 )。

 console .  log  ( Number . MAX_SAFE_INTEGER )  	 // 9007199254740991 
 

MAX_SAFE_INTEGER 是 一个 值为 9007199254740991 的常量。因为 Javascript 的数字存储使用了 IEEE-754 中规定的双精度浮点数数据类型,而这一数据类型能够安全存储 -(2e53 - 1) 到 2e53 - 1 之 间的 数值(包含边界值)。

由于 MAX_SAFE_INTEGER 是 Number 的 一个 静态 属性 ,所以你不用自己动手为 Number 对象创建 Number.MAX_SAFE_INTEGER 这一 属性 ,就可以直接使用它。

4.3 Number.MIN_SAFE_INTEGER

Number.MIN_SAFE_INTEGER 代表在 JavaScript 中最小的安全的 integer 型数字 ( -(253 - 1) )。

 console .  log  ( Number . MIN_SAFE_INTEGER )  	 // -9007199254740991 
 

MIN_SAFE_INTEGER 的值是 -9007199254740991 . 形成这个数字的原因是 JavaScript 在 IEEE-754 中规定的。 在这 个规定中能安全地表示数字的范围在 -(2e53 - 1) 到 2e53 - 1之间 。

由于 MIN_SAFE_INTEGER 是 Number 的 一个 静态 属性 ,你可以直接使用 Number.MIN_SAFE_INTEGER , 而不是自己去创建 一个 Number 的 属性 。

5. 小结

本节主要讲解了 ES6 对数值的扩展主要总结一下几点:

增加 了二进制和八进制表示法; 直接使用 Number 进行类型转换; 移植了原有的 方法 到 Number 对象上; 对新增的 Number 对象上的 属性 做了简单的解释。

ES6 的 Number 对象还提供了很多 方法 ,下面的小节会讲到,还有 ES6 对数字的处理在 Math 小节做详细的讲解。

查看更多关于ES6+ 数值扩展的详细内容...

  阅读:44次

上一篇

下一篇

第1节:ES6+ 简介    第2节:ES6 环境配置    第3节:ES6+ let    第4节:ES6+ const    第5节:ES6+ 展开语法    第6节:ES6+ 剩余参数    第7节:ES6+ 解构赋值    第8节:ES6+ 模版字符串    第9节:ES6+ 箭头函数    第10节:ES6+ 数值扩展    第11节:ES6+ isFinite()&isNaN()    第12节:ES6+ Number 对象的方法    第13节:ES6+ Math 对象的扩展    第14节:ES6+ includes()    第15节:ES6+ 字符串的扩展    第16节:ES6+ startsWith()    第17节:ES6+ endsWith()    第18节:ES6+ repeat()    第19节:ES6+ padStart()    第20节:ES6+ padEnd()    第21节:ES6+ trim()    第22节:ES6+ Array.from()    第23节:ES6+ of()    第24节:ES6+ find()和findIndex()    第25节:ES6+ copyWithin()    第26节:ES6+ fill()    第27节:ES6+ isArray()    第28节:ES6+ 对象的扩展    第29节:ES6+ flat()    第30节:ES6+ 可选链操作符    第31节:ES6+ Object.is()    第32节:ES6+ Object.assign()    第33节:ES6+ Object.keys()    第34节:ES6+ Object.values()    第35节:ES6+ Object.entries()    第36节:ES6+ 数据结构扩展    第37节:ES6+ Set    第38节:ES6+ WeakSet    第39节:ES6+ Map    第40节:ES6+ WeakMap    第41节:ES6+ Symbol    第42节:ES6+ for...of    第43节:ES6+ 迭代协议    第44节:ES6+ 实现一个简版的 Promise    第45节:ES6+ Promise 基础    第46节:ES6+ Promise 进阶    第47节:ES6+ Generator 基础    第48节:ES6+ Generator 函数应用    第49节:ES6+ async/await    第50节:ES6+ Class 前置知识    第51节:ES6+ Class    第52节:ES6+ Proxy    第53节:ES6+ Reflect(一)    第54节:ES6+ Reflect(二)    第55节:ES6+ 模块化(一)    第56节:ES6+ 模块化(二)    第57节:ES6实战1-实现Vue3 reactive 源码    第58节:ES6实战2-实现 Vue3 effect 源码    第59节:ES6 实战2-封装请求    第60节:ES6+ 实战3-代码整洁之道    第61节:ES6 Map原理分析    第62节:ES6module语法加载importexport    第63节:ES6的循环与可迭代对象示例详解