搜索
首页web前端前端问答es6 number对象的新增方法有哪些

es6 number对象的新增方法有哪些

Oct 26, 2022 pm 05:57 PM
javascriptes6

es6 number新增方法有:1、“Number.isFinite()”,可判断指定值是否为一个有限的数值;2、“Number.isNaN()”,可检测变量是否是一个NaN;3、“Number.parseInt()”,可将字符串转换为整数;4、“Number.parseFloat()”,可将字符串转换为浮点数;5、“Number.isInteger()”,可判断值是否为整数。

es6 number对象的新增方法有哪些

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

在 ES5 中,全局下的 isFinite () 和 isNaN () 两种方法存在类型转换,对最终的判断结果存在歧义。ES6 在 Number 对象上,新提供了 Number.isFinite () 和 Number.isNaN () 两个方法,更加健壮地进行数值的判断,接下来让我看看这两种方法。

Number.isFinite()


在 ES5 中有全局的 isFinite() 函数用来判断被传入的参数值是否为一个有限的数值,如果参数是字符串,会首先转为一个数值,然后在进行验证。

isFinite(Infinity);  // false
isFinite(NaN);       // false
isFinite(-Infinity); // false

isFinite(0);         // true
isFinite(2e64);      // true
isFinite('2e64');    // true

isFinite("0");       // true

上面的代码可以看出,字符串也会被先转为数值再进行判断,而 ES6 Number 对象上提供的 isFinite() 更健壮,和全局的 isFinite() 函数相比,这个方法不会强制将一个非数值的参数转换成数值,这就意味着,只有数值类型的值,且是有穷的(finite),才返回 true。

Number.isFinite(Infinity);  // false
Number.isFinite(NaN);       // false
Number.isFinite(-Infinity); // false

Number.isFinite(0);         // true
Number.isFinite(2e64);      // true
Number.isFinite('2e64');	// false

Number.isFinite('0');       // false

Number.isNaN()


在 JavaScript 中与其它的值不同,NaN 不能通过相等操作符(== 和 ===)来判断 ,因为 NaN == NaN 和 NaN === NaN 都会返回 false。 因此,判断一个值是不是 NaN 是有必要的。

1、NaN 值的产生

当算术运算的结果返回一个未定义的或无法表示的值时,NaN 就产生了。但是,NaN 并不一定用于表示某些值超出表示范围的情况。

  • 将某些非数值强制转换为数值的时候,会得到 NaN。

  • 0 除以 0 会返回 NaN —— 但是其他数除以 0 则不会返回 NaN。

我们知道可以使用 Number() 方法进行类型转换,下面列举被强制类型转换为 NaN 的例子:

Number(undefined)				// NaN
Number('undefined')				// NaN
Number('string')				// NaN
Number({})						// NaN
Number('10,3')					// NaN
Number('123ABC')				// NaN
Number(new Date().toString())	// NaN

上面的例子可以看出,很多值在强制类型转换下转为 NaN,针对这样的值去进行判断无疑是有问题的,下面我们来看下 isNaN () 的问题。

2、isNaN () 的问题

默认情况全局下存在方法 isNaN () 用了判断是否为 NaN 值,它要求接收的是数值类型的参数,但是当参数不是 Number 类型, isNaN 函数会首先尝试将这个参数转换为数值,然后才会对转换后的结果是否是 NaN 进行判断。

实例:

isNaN(NaN);       // true
isNaN(undefined); // true
isNaN('undefined')// true
isNaN({});        // true

isNaN(true);      // false
isNaN(null);      // false
isNaN(37);        // false

// strings
isNaN("37");      // false: 可以被转换成数值37
isNaN("37.37");   // false: 可以被转换成数值37.37
isNaN("37,5");    // true
isNaN('123ABC');  // true:  parseInt("123ABC")的结果是 123, 但是Number("123ABC")结果是 NaN
isNaN("");        // false: 空字符串被转换成0
isNaN(" ");       // false: 包含空格的字符串被转换成0

// dates
isNaN(new Date());                // false
isNaN(new Date().toString());     // true

isNaN("imooc")   // true: "blabla"不能转换成数值
                 // 转换成数值失败, 返回NaN

结合上面 NaN 是如何产生的例子的结果可以看出,使用 isNaN 来判断返回的是 true,这显然不是我们想要的结果。针对这样的问题,ES6 做了修补,下面我们看 ES6 中的 isNaN 方法。

3、Number.isNaN () 详情

ES6 提供了 Number.isNaN(x) ,通过这个方法来检测变量 x 是否是一个 NaN 将会是一种可靠的做法,它不会对所判断的值进行强制类型转换。

Number.isNaN(NaN);        // true
Number.isNaN(Number.NaN); // true
Number.isNaN(0 / 0)       // true

// 下面这几个如果使用全局的 isNaN() 时,会返回 true。
Number.isNaN("NaN");      // false,字符串 "NaN" 不会被隐式转换成数字 NaN。
Number.isNaN(undefined);  // false
Number.isNaN('undefined');// false
Number.isNaN({});         // false
Number.isNaN("blabla");   // false

Number.isNaN(true);   	 // false
Number.isNaN(null);   	 // false
Number.isNaN(37);   	 // false
Number.isNaN("37");   	 // false
Number.isNaN("37.37");	 // false
Number.isNaN("");   	 // false
Number.isNaN(" ");   	 // false

通过上面的实例,基本覆盖了现有程序的所有情况,不会出现使用全局下的 isNaN() 多带来的问题。所有推荐使用 Number.isNaN(x) 方式来判断是否是 NaN。在不支持 Number.isNaN 函数情况下,可以通过表达式 (x != x) 来检测变量 x 是不是 NaN 会更加可靠。

Number.parseInt()&Number.parseFloat()


为了保持方法上的统一,把全局下的 parseInt() 和 parseFloat() 移植到 ES6 的 Number 对象上。

ES6 的 Number 对象上提供的 Number.isFinite () 和 Number.isNaN () 两个函数是相同的,如何证明 Number 下的这两个方法只是移植全局的呢?可以利用 === 运算符来判断,如下实例:

Number.parseInt === parseInt;				// true
Number.parseFloat === parseFloat;		// true

上面的代码返回的结果都为 ture 说明此两种函数和全局是一样的,没有发生变化。具体的使用方法可以参考 ES5 中的 parseInt() 和 parseFloat() 函数。

// ES5的写法
parseInt('12.34') 						// 12
parseFloat('123.45#') 				// 123.45

// ES6的写法
Number.parseInt('12.34') 			// 12
Number.parseFloat('123.45#')  // 123.45

将这两个全局方法移植到 Number 对象上,为了逐步减少全局性方法,使语言逐步模块化。

Number.isInteger()


在学习这个函数之前,我们先来回顾一下,我们是怎么判断一个值为整数的?

1、判断一个值为整数

一种方法是:任何整数都会被 1 整除,即余数是 0。利用这个规则来判断是否是整数。就有如下函数:

function isInteger(value) {
	return typeof value === 'number' && value%1 === 0;
}
isInteger(5) 		// true
isInteger(5.5) 	// false
isInteger('') 	// false
isInteger('8') 	// false
isInteger(true) // false
isInteger([]) 	// false

另一种方法是:使用 Math.round、Math.ceil、Math.floor 判断,因为整数取整后还是等于自己。利用这个特性来判断是否是整数,使用 Math.floor 示例,如下:

function isInteger(value) {
	return Math.floor(value) === value;
}
isInteger(5) 		// true
isInteger(5.5) 	// false
isInteger('') 	// false
isInteger('8') 	// false
isInteger(true) // false
isInteger([]) 	// false

上面的两种方法算是比较常用的判断方式,其他的一些方式都存在一些问题,这里就不一一列举了。但是,这两种方法都不够简洁,ES6 把判断整数提升到了语言层面,下面我们来看下 Number.isInteger() 的使用。

2、Number.isInteger () 的用法

Number.isInteger() 是 ES6 新增的函数,用来判断给定的参数是否为整数。

Number.isInteger(25) // true
Number.isInteger(25.1) // false

如果被检测的值是整数,则返回 true,否则返回 false。注意 NaN 和正负 Infinity 不是整数。

Number.isInteger(0);         // true
Number.isInteger(1);         // true
Number.isInteger(-100000);   // true

Number.isInteger(0.8);       // false
Number.isInteger(Math.PI);   // false

Number.isInteger(Infinity);  // false
Number.isInteger(-Infinity); // false
Number.isInteger("100");     // false
Number.isInteger(true);      // false
Number.isInteger(false);     // false
Number.isInteger([1]);       // false

上面的代码基本涵盖了 JavaScript 中的值的判断,在一些不支持 ES6 语法的浏览器中可以使用上面的两种方式进行 Polyfill 处理。

Number.isSafeInteger()


Number.isSafeInteger() 是 ES6 新增的函数,用来判断传入的参数值是否是一个 “安全整数”(safe integer)在数值扩展的 小节 我们介绍了最大安全整数和最小安全整数,不记得的同学可以跳过去看看。

一个安全整数是一个符合下面条件的整数:

  • 可以准确地表示为一个 IEEE-754 双精度数字;

  • 其 IEEE-754 表示不能是舍入任何其他整数以适应 IEEE-754 表示的结果。

比如,2e53 - 1 是一个安全整数,它能被精确表示,在任何 IEEE-754 舍入模式(rounding mode)下,没有其他整数舍入结果为该整数。作为对比,2e53 就不是一个安全整数,它能够使用 IEEE-754 表示,但是 2e53 + 1 不能使用 IEEE-754 直接表示,在就近舍入(round-to-nearest)和向零舍入中,会被舍入为 2e53。

安全整数范围为 -(2e53 - 1)到 2e53 - 1 之间的整数,包含 -(2e53 - 1)和 2e53 - 1。

Number.isSafeInteger(3);                    // true
Number.isSafeInteger(Math.pow(2, 53))       // false
Number.isSafeInteger(Math.pow(2, 53) - 1)   // true
Number.isSafeInteger(NaN);                  // false
Number.isSafeInteger(Infinity);             // false
Number.isSafeInteger("3");                  // false
Number.isSafeInteger(3.1);                  // false
Number.isSafeInteger(3.0);                  // true

【相关推荐:javascript视频教程编程视频

以上是es6 number对象的新增方法有哪些的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
HTML和React的集成:实用指南HTML和React的集成:实用指南Apr 21, 2025 am 12:16 AM

HTML与React可以通过JSX无缝整合,构建高效的用户界面。1)使用JSX嵌入HTML元素,2)利用虚拟DOM优化渲染性能,3)通过组件化管理和渲染HTML结构。这种整合方式不仅直观,还能提升应用性能。

React和HTML:渲染数据和处理事件React和HTML:渲染数据和处理事件Apr 20, 2025 am 12:21 AM

React通过state和props高效渲染数据,并通过合成事件系统处理用户事件。1)使用useState管理状态,如计数器示例。2)事件处理通过在JSX中添加函数实现,如按钮点击。3)渲染列表需使用key属性,如TodoList组件。4)表单处理需使用useState和e.preventDefault(),如Form组件。

后端连接:反应如何与服务器互动后端连接:反应如何与服务器互动Apr 20, 2025 am 12:19 AM

React通过HTTP请求与服务器交互,实现数据的获取、发送、更新和删除。1)用户操作触发事件,2)发起HTTP请求,3)处理服务器响应,4)更新组件状态并重新渲染。

反应:专注于用户界面(前端)反应:专注于用户界面(前端)Apr 20, 2025 am 12:18 AM

React是一种用于构建用户界面的JavaScript库,通过组件化开发和虚拟DOM提高效率。1.组件与JSX:使用JSX语法定义组件,增强代码直观性和质量。2.虚拟DOM与渲染:通过虚拟DOM和diff算法优化渲染性能。3.状态管理与Hooks:Hooks如useState和useEffect简化状态管理和副作用处理。4.使用示例:从基本表单到高级的全局状态管理,使用ContextAPI。5.常见错误与调试:避免状态管理不当和组件更新问题,使用ReactDevTools调试。6.性能优化与最佳

React的角色:前端还是后端?澄清区别React的角色:前端还是后端?澄清区别Apr 20, 2025 am 12:15 AM

reactisafrontendlibrary,focusedonBuildingUserInterfaces.itmanagesuistateandupdatesefficefited fichifited firstualdom,以及EnternactSwithBackendServensEvesviaApisforDataHandling,butdoesnotprocessorsorstoredordordoredaiteffers。

在HTML中进行反应:构建交互式用户界面在HTML中进行反应:构建交互式用户界面Apr 20, 2025 am 12:05 AM

React可以嵌入到HTML中来增强或完全重写传统的HTML页面。1)使用React的基本步骤包括在HTML中添加一个根div,并通过ReactDOM.render()渲染React组件。2)更高级的应用包括使用useState管理状态和实现复杂的UI交互,如计数器和待办事项列表。3)优化和最佳实践包括代码分割、惰性加载和使用React.memo和useMemo来提高性能。通过这些方法,开发者可以利用React的强大功能来构建动态和响应迅速的用户界面。

反应:现代前端发展基础反应:现代前端发展基础Apr 19, 2025 am 12:23 AM

React是构建现代前端应用的JavaScript库。1.它采用组件化和虚拟DOM优化性能。2.组件使用JSX定义,状态和属性管理数据。3.Hooks简化生命周期管理。4.使用ContextAPI管理全局状态。5.常见错误需调试状态更新和生命周期。6.优化技巧包括Memoization、代码拆分和虚拟滚动。

React的未来:Web开发的趋势和创新React的未来:Web开发的趋势和创新Apr 19, 2025 am 12:22 AM

React的未来将专注于组件化开发的极致、性能优化和与其他技术栈的深度集成。1)React将进一步简化组件的创建和管理,推动组件化开发的极致。2)性能优化将成为重点,特别是在大型应用中的表现。3)React将与GraphQL和TypeScript等技术深度集成,提升开发体验。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),