ES6中对数值的扩展
上一节和大家学习了字符串的扩展,这一节轮到了数值,我们一起来学习数值的扩展。
剧透一下,这一节并不会很烧脑,都是介绍类的知识讲解,理解性的东西不多,初学者们也可以愉快地看完。
传统的写法
在介绍数值的扩展之前我们来看看旧的规范和使用方式,有对比才能看出不同之处。
在ES5中,我们存在几个全局函数 isNaN函数,isFinite函数,parseInt函数,parseFloat函数等,对于这些全局函数的使用很简单,就拿isNaN函数来举例。
ES5中的写法是:
isNaN(2.5); //结果:false
window.isNaN(2.5);//结果:false
以上两种写法均可,isNaN是全局函数,本身就是属于window对象下的一个方法,所以大部分人会使用第一种写法。
但是在ES6的标准中,isNaN方法被移植到了Number对象上,也就是原本属于全局对象window下的函数,现在属于Number对象上了,同样被处理的函数还有isFinite函数,parseInt函数,parseFloat函数。
被移植后的函数使用方式是这样的:
Number.isNaN(2.5); //结果:false
在使用之前必须指明它是Number对象下的函数,否则会被默认为window下的函数。
说了这么多,差点忘记了介绍isNaN函数本身的作用,以及它在ES6的规范下有什么不一样的地方。
新特性:Number.isNaN函数
Number.isNaN函数:用于判断传入的是否是非数值,注意:是判断非数值,而不是判断数值,IsNaN的全称是: is not a number。
使用方式上面已经演示过,但为了加深印象,再展示多一次:
Number.isNaN(2.5); //结果:false
由于2.5是一个number类型的数值,所以返回false(再次注意:判断是非数值,所以是false,表示2.5是一个数值类型的值)。
那么,移植到Number对象isNaN函数和原本是全局函数的isNaN函数,有不一样的地方吗,还是仅仅简单地移植过来就完事了?
答案:有区别。
传统的isNaN函数会把非数值的参数转化成数值再进行判断,而Number. isNaN只对数值类型有效,非数值类型的参数一律返回false。看文字解释不过瘾,咱们看案例。
isNaN('abc');//结果:true
//'abc'无法转为一个数值,返回true Number.isNaN('abc'); //结果:false
//'abc'是字符串,Number.isNaN不做类型转换,直接返回false
正如上面我写的注释一样,Number下面的isNaN都懒得给字符串’abc’做类型转换,直接返回false。而ES5中的isNaN函数会对字符串’abc’进行类型转换后,发现它是一个NaN(非数值),才返回true。
所以我们在使用这个函数到时候还要小心,当返回false的时候,不一定就是一个数值,有可能是一个非数值类型的参数。
新特性:Number.isFinite函数
Number.isFinite函数:用来检查一个数值是否非无穷。注意是判断非无穷,不是判断无穷,这里跟isNaN函数一样,有点绕。
Number.isFinite(1);
//结果:true,数值1是有穷,即非无穷 Number.isFinite(Infinity);
//结果:false,Infinity表示无穷大的特殊值
注意第二行代码的参数:Infinity,Infinity是window对象下的一个常量,表示一个无穷数。所以第二行代码会返回false。此外,isFinite函数跟isNaN函数一样,也只是对数值类型有效,对非数值类型的参数一律返回false。
Number.isFinite('abc'); //结果:false
所以同样要注意,当Number.isFinite函数返回false的时候,参数不一定就是一个有穷的数值类型,也有可能是一个非数值类型的参数。如:字符串’abc’。
新特性:Number.parseInt函数
parseInt函数:解析一个字符串,返回一个整数。parseInt函数同样是从window对象下移植到Number对象下,但是它的作用没有任何变化。
//传统用法:
parseInt('12.3abc');
//结果:返回数值12 //ES6用法:
Number.parseInt('12.3abc');
//结果:返回数值12
新特性:Number.parseFloat函数
parseFloat函数:解析一个字符串,并返回一个浮点数。跟parseInt一样,被移植到Number对象下,作用保持不变。
//传统用法:
parseInt('12.3abc');
//结果:返回数值12 //ES6用法:
Number.parseInt('12.3abc');
//结果:返回数值12
以上4个函数都是在window对象下,移植到了Number对象下,你可以能会跟我一样好奇:好端端地为什么好移植到其他地方去,这样做的目的是什么?
其实这么做的目的是慢慢地减少全局性的函数,把全局函数合理地规划到其他对象下,渐渐实现语言的模块化。
讲完了被移植的函数,咱们来学点新增的玩意。
新特性:Number.isInteger函数
Number.isInteger函数:用来判断是否是整数。
Number.isInteger(3.2);
//结果:false Number.isInteger(3);
//结果:true
上面的运行结果也如我们所料,数值3.2不是整数,返回false。不过有一点要注意:在javascript内部对整数和浮点数采用一样的存储方式,因此小数点后如果都是0的浮点数,都会被认为是整数。看个例子就知道了:
Number.isInteger(3.0);
//结果:true Number.isInteger(3.00);
//结果:true
数值3.0和3.00都会被认为是整数。
极小常量
Number.EPSILON常量:定义一个极小的数值。
我们把这个数值打印出来看一下:
console.log(Number.EPSILON);
//结果:2.220446049250313e-16
2.220446049250313e-16是一个极小的数值,约等于0.00000000000000022204。干嘛要定义一个这样的数值,在什么情况下会用它呢?
Number.EPSILON的出现是用来判断浮点数的计算误差,如果浮点数计算得到的误差不超过Number.EPSILON的值,就表示可以接受这样的误差。
安全整数
ES6为我们引入了安全整数的概念。什么?整数还有安全和不安全的说法?原来JavaScript能够准确表示的整数范围在-2^53到2^53之间,超过这个范围,无法精确表示这个值。故称之为不安全。
为此,ES6定义了两个常量来表示这个范围的最大值和最小值:Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER。此外,如果给你一个数值,你不知道它是否超出了这个安全范围,你可以使用ES6给我们新增的一个函数Number.isSafeInteger来进行判断。看例子:
Number.isSafeInteger(Number.MAX_SAFE_INTEGER);
//结果:true Number.isSafeInteger(Number.MAX_SAFE_INTEGER+1);
//结果:false
我们用最大安全整数Number.MAX_SAFE_INTEGER来做试验,第一行代码的结果返回的值是true,也就表示Number.MAX_SAFE_INTEGER属于安全范围,第二行代码,我们对Number.MAX_SAFE_INTEGER进行了+1,相加后的数值超过安全范围,isSafeInteger函数就返回了false,表示不在安全范围内。
ES6给数值带来的扩展,除了对Number对象进行了扩展,还对Math对象进行了扩展。对于Math对象大家应该不会感到陌生,我们平时用的求随机数的方法random就是属于Math对象下的方法。
有必要回顾一下:
Math.random();
//结果:随机数0.8897368770341108
那么ES6给Math对象带来哪些扩展呢?
ES6给Math对象新增了17个函数,我们挑选几个常用的来讲解一下。
新特性:Math.trunc函数
Math.trunc函数:用于去除一个数的小数部分,返回整数部分。
Math.trunc(3);
//结果:3 Math.trunc(3.1);
//结果:3
运行结果也很好理解,如果传入的参数是整数,就直接返回整数,如果是小数,就去除了小数部分,返回整数部分:3。
新特性:Math.sign函数
Math.sign函数:用来判断一个数到底是正数、负数、还是零。
Math.sign(3);
//结果:1 Math.sign(-3);
//结果:-1 Math.sign(0);
//结果:0 Math.sign('abc');
//结果:NaN
返回的结果类型有点多,我们分别来讲解一下,参数如果是正数,结果返回1;如果是负数,结果返回-1;如果是0,结果返回0;如果是一个非数值类型的参数,结果返回:NaN。
新特性:Math.cbrt函数
Math.cbrt函数:用于计算一个数的立方根。
Math.cbrt(8);
//结果:2 Math.cbrt(27);
//结果:3
看以上代码,2的立方是8,那么8作为参数,开立方根得到的值就是2,3的立方是27,那么27求立方根就得到了3,这就是Math.cbrt函数的作用。
除了这三个函数以外,剩下的新增函数都是一些高中时期的数学方法,只不过是ES6将他们的运算封装成一个方法,方便大家使用,也算是开发者的福音。
它们分别是:
Math.acosh(x) 返回 x 的反双曲余弦。
Math.asinh(x) 返回 x 的反双曲正弦。
Math.atanh(x) 返回 x 的反双曲正切。
Math.clz32(x) 返回 x 的 32 位二进制整数表示形式的前导 0 的个数。
Math.sinh(x) 返回x的双曲正弦。
Math.cosh(x) 返回 x 的双曲余弦。
Math.expm1(x) 返回 eˆx - 1。
Math.fround(x) 返回 x 的单精度浮点数形式。
Math.hypot(...values) 返回所有参数的平方和的平方根。
Math.imul(x, y) 返回两个参数以 32 位整数形式相乘的结果。
Math.log1p(x) 返回 1 + x 的自然对数。
Math.log10(x) 返回以 10 为底的x的对数。
Math.log2(x) 返回以 2 为底的 x 的对数。
Math.tanh(x) 返回 x 的双曲正切。
这么多数学方法,估计很多人都会懵逼,根本记不住这么多,但是没关系,我们也不需要去死记硬背它们,我们只需要记住ES6为Math对象扩展了很多数学方法就可以了。等真正使用到的时候,我们再去查找资料就可以了。
本节总结
总结:ES6对Number对象新增了isInteger函数、极小常量Number.EPSILON、安全整数;还将window对象下的4个函数移植到了Number对象下;此外,对Math对象扩展了17个新函数。
最后作者也准备了许多资料来学习前端,免费获取
其实你与阿里工程师的差距只差这些东西
ES6中对数值的扩展的更多相关文章
- ES6中的数组方法扩展
上一篇文章小编简单介绍了在ES6中,一些常用的方法和一些简单的应用,在这篇文章中,小编将针对ES6中数组常用方法进行扩展,相信经过这篇文章之后,每一位小伙伴下班时间会有所提前,就算从原来的996变成9 ...
- JavaScript学习笔记--ES6学习(五) 数值的扩展
ES6 对于数值类型 (Number) 进行了一下扩展: 1.对于二进制和八进制提供了新的写法 ES6对于二进制和八进制的数值提供了新的写法,分别用0b (或者0B) 和0o (或者0o) 表示.例如 ...
- ES6中对函数的扩展
ES6一路扩展,字符串.数组.数值.对象无一“幸免”,ES6说要雨露均沾,函数也不能落下,今天,就来讲解ES6对函数的扩展. 参数的默认值 在开发中,给函数的参数指定默认值,是很普遍很常见的一个需求, ...
- ES6中对数组的扩展
hello,大家好,我又来了. 前面讲了字符串和数值的扩展,今天要讲的是:数组的扩展.不知道大家能否跟得上这个节奏,你们在阅读中对讲解有存在疑惑,记得留言提出来,要真正地理解,否则白白 ...
- ES6学习笔记(5)----数值的扩展
参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 数值的扩展 1.Number对象的扩展(1)javascript的全局函数isNaN,isFin ...
- 利用ES6中的Array.find/ Array.findIndex来判断数组中已存在某个对象
前端开发过程中,我们会经常遇到这样的情景:比如选中某个指标obj,将其加入到数组checkedArr中({id: 1234, name: 'zzz', ...}),但是在将其选中之前要校验该指标是否已 ...
- ES6的字符串和数值的扩展
字符串扩展 对于处理大于两个字节(大于0xffff)的字符,let str =’\u{20bb7}abc’ ES5中的遍历 for(let i=0;i<str.length;i++){ con ...
- ES6的新特性(5)——数值的扩展
数值的扩展 二进制和八进制表示法 ES6 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示. 0b111110111 === 503 // true 0o767 === ...
- es6字符串、数值、Math的扩展总结
字符串的扩展 1.for...of遍历字符串 2.includes()判断字符串中是否包含某个字符串,返回bool 3.startsWith(),endsWith()分别盘对字符串的头部和尾部是否含有 ...
随机推荐
- Web安全认证
一.HTTP Basic Auth 每次请求 API 时都提供用户的 username 和 password. Basic Auth 是配合 RESTful API 使用的最简单的认证方式,只需提供用 ...
- 16.如何查找所需的maven的依赖
http://mvnrepository.com/ 1.先打开上面的网址 搜索需要的依赖,点进去 2.选择需要的版本 3.红框中的就是依赖的地址 此外也有其他自动化构建工具所需要的地址
- 将Windows项目发布到Ubuntu服务器详细教程(Windows编程,Ubuntu服务器做解释器)
前期准备 (1)专业版Pycharm(社区版没有deployment功能),学生,教师可申请免费专业版,详情可看我的博客. (2)可通过SSH连接Ubuntu服务器,并且服务器安装了Python解释器 ...
- Linux上的软件安装有哪些方式?
Linux上的软件安装有以下几种常见方式介绍 1.二进制发布包 软件已经针对具体平台编译打包发布,只要解压,修改配置即可 2.RPM包 软件已经按照redhat的包管理工具规范RPM进行打包发布,需要 ...
- Python操作Oracle数据库:cx_Oracle
.caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...
- VXLAN 基础教程:VXLAN 协议原理介绍
VXLAN(Virtual eXtensible Local Area Network,虚拟可扩展局域网),是一种虚拟化隧道通信技术.它是一种 Overlay(覆盖网络)技术,通过三层的网络来搭建虚拟 ...
- MTK Android 设置-选择日期格式 [管理和组织首选项,ListPreference,CheckBoxPreference,EditTextPreference,RingtonePreference]
###android.preference.ListPreference的一些特性 android:key 选项的名称或键 android:title 选项的标题 android:summary ...
- Flask入门 之 没有装饰器的路由
有些时候,需要一个类似路由的功能,但又不能或者不想写装饰器,这该怎么办? so easy! eg: @app.route('login') def login(): return 'hello wor ...
- group_concat有长度限制
group_concat有长度限制 group_concat 详细用法请点此链接. group_concat有长度限制!长度陷阱用了group_concat后,select里如果使用了li ...
- C#多线程系列(3):原子操作
本章主要讲述多线程竞争下的原子操作. 目录 知识点 竞争条件 线程同步 CPU时间片和上下文切换 阻塞 内核模式和用户模式 Interlocked 类 1,出现问题 2,Interlocked.Inc ...