Js中的Number

2018-06-13 admin

关于Number的常用方法和注意点

NaN

NaN 是代表非数字的特殊属性

NaN 注意点

NaN不是一个数 但是属于number类型

typeof NaN //"number"

NaNNaN不相等

NaN == NaN //false

何时会出现NaN

数字和 NaN 进行运算

1 [+ - * /] NaN = NaN

无效数学运算中

"a" - 1 || "a" * 1 || "a" / 1 = NaN  

数字 + undefined

1 + undefined = NaN
  • 在进行运算的时候会 - * / 都会默认的调用 Number 方法 遇到无法转换的都是 NaN
  • 因为 + 在JS中不仅仅是数学运算, 遇到字符串的时候属于字符串拼接 其他时候也会默认调用 Number 进行转换
  • 排除数字和 NaN 进行运算之外 也只有 数字 + undefined = NaN 具体的看Number()的转换规则

Number()

Number() 方法把值转换为数字

对字符串进行转换

Number('66') //66
Number('66px') //NaN

对字符串进行转换的时候只有 都是 数字才会转换成数字 反之

对布尔值进行转换 truefalse

Number(true) //1
Number(false) //0

对布尔值进行转换的时候 true = 1 false = 0

nullundefined

Number(null) // 0
Number(undefined) //NaN

nullundefined 的区别请看 null和undefined的区别 阮老师的这篇文章详细的介绍了

''[]

Number('') //0
Number([]) //0

[] 转换为数字 首先调用数组的 toString 方法把 [] -> ''

isNaN(), Number.isNaN()

isNaN()是ES5方法 Number.isNaN()是ES6在 Number 对象上新增加方法

isNaN() 检测一个值是否为NaN 会先调用Number() 将非数值的值转为数值,再进行判断

isNaN(NaN) //true
isNaN(1) //false
isNaN('1px') //true

Number.isNaN()只有对于NaN才返回true,非NaN一律返回false

isNaN(undefined) //true
Number.isNaN(undefined) //false 不会调用 Number
isNaN("NaN") // true
Number.isNaN("NaN") // false

Number.isInteger()

Number.isInteger() 判断一个数值是否为整数。

Number.isInteger(11) // true
Number.isInteger(11.0) // true
Number.isInteger(11.1) // false

如果参数不是数值 都返回 false

Number.isInteger(null) //false
Number.isInteger(true) //false
Number.isInteger('') //false

parseInt(), Number.parseInt() parseFloat(), Number.parseFloat()

去掉非数字部分 返回数字部分 parseInt() 遇到的第一个非数字停止

parseInt('12px') // 12
parseInt('px12') //NaN

parseFloat() 相比 parseInt() 可以多识别一个 .

parseFloat('12.333px') // 12
parseFloat('px12.333') //NaN

Number.parseInt()Number.parseFloat() 是 ES6 将全局方法parseInt()parseFloat(),移植到Number对象上面,行为完全保持不变。

toFixed()

toFixed()保留小数点后几位

1.14432.toFixed(2) // "1.14"
1.14532.toFixed(2) // "1.15"

toFixed()使用四舍五入法

Math 对象

Math是一个对象,里面提供了很多操作数字的相关方法

Math.abs()

Math.abs() 获取绝对值

Math.abs(-1) //1
Math.abs(-true) //1

Math.ceil()

Math.ceil 向上取整

Math.ceil(12.000001) //13
Math.ceil(-12.6) //-12

Math.floor()

Math.floor 向下取整

Math.floor(12.6) //12
Math.floor(-12.6) //-13

Math.round()

Math.round() 四舍五入

Math.round(12.5) //13
Math.round(12.4) //12
Math.round(-12.4) //12
Math.round(-12.5) //12
Math.round(-12.6) //13

Math.max(), Math.min()

Math.max()取一组数的最大值

Math.max(12, 23, 13, 24, 23, 24, 25, 34, 15); //34

Math.min 取一组数的最小值

Math.min(12, 23, 13, 24, 23, 24, 25, 34, 15); //12

Math.random()

Math.random 获取[0-1]之间的随机小数

Math.random() //0.8184921957461317
Math.random() //0.351685690699056
Math.random() //0.4972569148842041

Math.trunc()

Math.trunc() 用于去除一个数的小数部分 返回整数

Math.trunc(1.23456) //1
Math.trunc(1.23456) //1
Math.trunc('3.43') //3
Math.trunc(true) //1
Math.trunc(NaN) //NaN
Math.trunc(undefined) //NaN

通过上面列子 很明显的是Math.trunc() 方法 遇到非数字会默认调用Number()进行转换

Math.sign()

Math.sign() 判断一个数是正数、负数、还是零。会默认调用Number()进行转换

  • 参数为正数 返回 1
  • 参数为负数 返回 -1
  • 参数为 0 返回 0
  • 参数为-0 返回 -0
  • 其他值 返回 NaN
Math.sign(6) // 1
Math.sign(-6) // -1
Math.sign(0) // 0
Math.sign(-0) // -0
Math.sign(null) // 0 
Math.sign(undefined) //NaN
Math.sign(NaN) // NaN

总结

更多关于 ES6 Number 的扩展 还正在学习中 阮一峰ES6教程-数值的扩展

原文链接:https://segmentfault.com/a/1190000015270084

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-33920.html

文章标题:Js中的Number

相关文章
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"&gt...
2017-02-17
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
AngularJS vs. jQuery,看看谁更胜一筹
很多Web开发新手都会有这样的疑问“我应该使用什么开发框架呢,如何快速学会Web开发呢?”这个问题其实没有一个统一的正确答案,其中讨论最多的就是AngularJS和jQuery的差别。这两者的之间的比较很微妙,有时就像拿苹果和橘子在作比较,...
2015-11-12
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
纯JS实现旋转图片3D展示效果
CSS: <style type="text/css"> #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
回到顶部