JavaScript 对数据处理的5个API
在 JavaScript 中,对数值进行四舍五入操作的场景有以下几种:
- 向上取整:ceil
- 向下取整:floor
- 四舍五入:round
- 固定精度:toFixed
- 固定长度:toPrecision
- 取整:parseInt、位运算
本文将对这 6 个 API 进行简单的讲解和总结。
1、向上取整: ceil
ceil 是`天花板`的意思,表示在一个数值之上,且距离该数最近的整数。ceil 是 Math 对象的静态方法,需要传递一个参数,其调用方法如下:
Math.ceil(12.34); //13
Math.ceil(12.68); //13
2、向下取整: floor
floor 是`地板`的意思,表示在一个数值之下,且距离该数最近的整数。floor 是 Math 对象的静态方法,需要传递一个参数,其调用方法如下:
Math.floor(12.34); // 12
Math.floor(12.68); // 12
3、四舍五入: round
round 的作用是对一个浮点数进行四舍五入,并保留整数位。round 也是 Math 对象的静态方法,也需要传递一个参数,其调用方法如下:
Math.round(12.34); // 12
Math.round(12.54); // 13
4、固定精度: toFixed
toFixed 和上面三个方法不同,它是 Number 原型上实现的一个方法,其作用是对一个浮点数进行四舍五入并保留固定小数位。 toFixed 需要传递一个参数,其调用方式如下:
100.456001.toFixed(2); // 100.46
100.456001.toFixed(3); // 100.456
5、固定长度: toPrecision
toPrecison 也是 Number 原型上实现的一个处理浮点数的方法,和 toFixed 不同的是,它是对一个浮点数进行四舍五入并保留固定长度的有效数字,包括整数部分。
99.456001.toPrecision(5); // 99.456
100.456001.toPrecision(5); // 100.46
6、取整: parseInt
parseInt 是 全局对象 window上的一个方法,其作用是对一个可转换的数值取整,分为以下两种情况:
1. 将字符串数值转化为 Number 整数,对字符串的每一个字符进行转化,直到遇到不可转化的字符(包括小数点)停止。
2. 对浮点类型数值取整,忽略小数部分,不做四舍五入处理
// 字符串数值
parseInt('100') ; // 100
parseInt('100axt'); // 100
parseInt('100xh20'); // 100
parseInt('100.78'); // 123
// Number 类型
parseInt(100.12) ; // 100
parseInt(100.78); // 100
7、取整: 位运算
- | 0 : 和 0 进行 按位或 操作,原值不变
- ~~ : 两次 按位非 操作得到的也是原值
- >> 0 : 右移 0 位
- << 0 : 左移 0 位
- >>> 0: 无符号右移 0 位
这些位运算符在实现取整操作时,会表现出一些共同的特征:
- 对于 Number 类型来说,直接应用位操作, 和 parseInt 得到的结果几乎一样;
- 对于其他类型,内部会先通过 Number() 将其转换为一个数值,然后再应用位操作。
- 对特殊 NaN 和 Infinity 值应用位操作时,这两个值都会被当成 0 来处理 。
对于 Number 类型,直接应用位运算。
~~ 100.12; // 100
100.78 | 0; // 100
100.45 >> 0; // 100
100.50 << 0; // 100
100.96 >>> 0; // 100
对于其他类型,先使用 Number() 转换为数值类型,再进行位运算。
~~ '100.12' // 100, Number('100.12') == 100.12
'100.50' >> 0; // 100,Number('100.50') == 100.50
'100.96' << 0; // 100,Number('100.96') == 100.96
~~ 'abc' // 0 , Number('abc') == NaN
'12abc' >> 0; // 0, Number('12abc') == NaN
undefined | 0 ; // 0, Number(undefined) == NaN
~~null; // 0 , Number(null) == 0
true >> 0; // 1 , Number(true) == 1
false >> 0; //0 , Number(false) == 0
[] << 0; // 0 , Number([]) == 0
~~NaN; // 0
Infinity >>> 0; // 0
位运算作用于最基本的层次上,即按内存中表示数值的位来操作数值。
位运算能取整的原因是:
ECMAScript 中的数值以64位双精度浮点数存储,但位运算只能作用于整数,因此要先将 64 位的浮点数转换成 32 位的整数,然后再进行位运算,最后再将计算结果转换成64位浮点数存储。
原创发布 @ 一像素 2018.06
JavaScript 对数据处理的5个API的更多相关文章
- JavaScript中对数组和数组API的认识
JavaScript中对数组和数组API的认识 一.数组概念: 数组是JavaScript中的一类特殊的对象,用一对中括号“[]”表示,用来在单个的变量中存储多个值.在数组中,每个值都有一个对应的不重 ...
- javascript 内置对象及常见API
javascript 内置对象及常见API 2012-09-02 15:17 571人阅读 评论(0) 收藏 举报 javascript正则表达式文档浏览器urlstring Javascript内置 ...
- 微信小程序wx.getLocation()获取经纬度及JavaScript SDK调用腾讯地图API获取某一类地址
简介 腾讯位置服务为微信小程序提供了基础的标点能力.线和圆的绘制接口等地图组件和位置展示.地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品. 在此基础上,腾讯位置服务 ...
- 盘点JavaScript里好用的原生API
转自:https://segmentfault.com/a/1190000002753931 解析字符串对象 我们都知道,JavaScript对象可以序列化为JSON,JSON也可以解析成对象,但是问 ...
- JavaScript文件加载器LABjs API详解
在<高性能JavaScript>一书中提到了LABjs这个用来加载JavaScript文件的类库,LABjs是Loading And Blocking JavaScript的缩写,顾名思义 ...
- JavaScript 客户端JavaScript之样式表操作(DOM API 提供模块之一)
层叠样式 表和动态HTML 层叠样式表(CSS)是指定HTML文档或XML文档的表现的标准. 使用CSS和Javascript,可以创建出各种视觉效果,这些效果可以统称为动态HTML(DH ...
- [Javascript] Intro to the Web Audio API
An introduction to the Web Audio API. In this lesson, we cover creating an audio context and an osci ...
- JavaScript:我总结的数组API
栈/队列 数组es3: pop删除最后一项(栈) shift删除第一项(队列) push增加到最后(栈) unshift增加到最前(队列) reverse翻转 join转字符串 slice截取(切片) ...
- JavaScript JSON 数据处理
在JavaScript 也自带了 JSON 格式的处理 <!doctype html> <html> <script> var test_json_str = { ...
随机推荐
- less学习
// 1.变量:颜色可做+- // from @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light- ...
- “不给力啊,老湿!”:RSA加密与破解
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 加密和解密是自古就有技术了.经常看到侦探电影的桥段,勇敢又机智的主角,拿着一长串毫 ...
- 获取Canvas当前坐标系矩阵
前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...
- Nhibernate的Session管理
参考:http://www.cnblogs.com/renrenqq/archive/2006/08/04/467688.html 但这个方法还不能解决Session缓存问题,由于创建Session需 ...
- Xamarin+Prism开发详解一:PCL跨平台类库与Profile的关系
在[Xamarin+Prism小试牛刀:定制跨平台Outlook邮箱应用]中提到过以下错误,不知道大伙还记得不: 无法安装程序包"Microsoft.Identity.Client 1.0. ...
- C++随笔:.NET CoreCLR之GC探索(1)
一直是.NET程序员,但是.NET的核心其实还是C++,所以我准备花 一点时间来研究CoreCLR和CoreFX.希望这个系列的文章能给大家带来 帮助. GC的代码有很多很多,而且结构层次对于一个初学 ...
- 在centos7上安装ClamAV杀毒,并杀毒(centos随机英文10字母)成功
前言 上传文件的时候发现总是失败,查看top发现有个进程一直cpu占用80%以上,而且名称还是随机数.kill之后,一会儿又重新生成了.突然发现居然没有在服务端杀毒的经历.在此处补齐. 安装clama ...
- 【JavaScript】innerHTML、innerText和outerHTML的用法区别
用法: <div id="test"> <span style="color:red">test1</span> tes ...
- 深入理解javascript函数定义与函数作用域
最近在学习javascript的函数,函数是javascript的一等对象,想要学好javascript,就必须深刻理解函数.本人把思路整理成文章,一是为了加深自己函数的理解,二是给读者提供学习的途径 ...
- jQuery.data() 使用方法
data() 方法向被选元素附加数据,或者从被选元素获取数据.在实际开发中,可以用来记录上一步操作某一对象的值,来给下一步操作做一些判断 $("#btn1").click(func ...