• 技术文章 >web前端 >前端问答

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

    青灯夜游青灯夜游2022-10-26 17:57:15原创156

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

    大前端零基础入门到就业:进入学习

    本教程操作环境: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 并不一定用于表示某些值超出表示范围的情况。

    我们知道可以使用 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)在数值扩展的 小节 我们介绍了最大安全整数和最小安全整数,不记得的同学可以跳过去看看。

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

    比如,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核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:javascript ES6
    上一篇:react和es6是什么 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• es6语法是一种标准吗• class类是es6语法么• es6比es5新增了什么• 使用es6怎么实现两个变量的转换• es6解构支持字符串吗• es6有没有arguments
    1/1

    PHP中文网