详解js运算符单竖杠“|”与“||”的用法和作用介绍


Posted in Javascript onNovember 04, 2016

在js开发应用中我们通常会碰到“|”与“||”了,那么在运算中“|”与“||”是什么意思呢?

在js整数操作的时候,相当于去除小数点,parseInt。在正数的时候相当于Math.floor(),负数的时候相当于Math.ceil() 注:

1. Math.ceil()用作向上取整。
2. Math.floor()用作向下取整。
3. Math.round() 我们数学中常用到的四舍五入取整。

console.log(0.6|0)//0
console.log(1.1|0)//1
console.log(3.65555|0)//3
console.log(5.99999|0)//5
console.log(-7.777|0)//-7

单竖杠的运算规则

看了上面的例子,大体知道单竖杠可以进行取整运算,就是只保留正数部分,小数部分通过拿掉,但是“|0”,又是如何进行运算的呢,为什么能“|0”能达到取整的目的呢?单竖杠不是0有会是多少呢?

带着这些问题,我们看下面例子:

console.log(3|4); //7
console.log(4|4);//4
console.log(8|3);//11
console.log(5.3|4.1);//5
console.log(9|3455);//3455

这里面提到了单竖杠“|”但是没有javascript的。

好吧,我在这里公布答案吧。其实单竖杠“|”就是转换为2进制之后相加得到的结果。例如我们拿简单的举例:

3|4

转换为二进制之后011|100  相加得到111=7

4|4

转换为二进制之后100 |100  相加得到100=4

8|3

转换为二进制之后1000 |011  相加得到1011=11

以此类推,我在这里就不一一列举了,单竖杠“|”运算就是转换为2进制之后相加得到的结果!

JS 双竖线运算符

1、JS双竖线运算符:是或比较.如null||'1',返回'1';'2'||'1',返回'2'.即或运算符中,第一个为真,后面的就不用计算了.所以得'2'。

2、js 中 使用双竖线运算符"||",返回第一个有效值

var objOne = undefined || 1 || null || new Date(); 
var objTwo = new Date(); 
var objThree = objOne || objTwo; 
alert(objThree.toString()); //out put "1"

总结

性能上的比较

逻辑运算符&& || 中,如果&&的第一个运算数是false,就不再考虑第二个运算数,直接返回false;如果||的第一个运算数是true,也不再考虑第二个运算数,直接返回true。而&和|运算符却不是这样的,它们总是要比较两个运算数才得出结果,因而性能上&&和||会比&和|好。

功能用法

&&和||只能进行逻辑运算,而&和|除了可以进行"逻辑运算"外,还可以进行位运算

位运算

&和|本是位运算符,之所以可以进行"逻辑运算",是由于JS是无类型的语言、各数据类型可以自由转换这一特性决定的,当用&和|进行"逻辑运算"时,实际上true被转换成1,false被转换成0,再进行逐位运算:

document.write(true & false); //JS,结果为0

上面这句,实例等同于逻辑运算被转化成下面的位运算,并执行:

document.write(1 & 0); //JS,结果为0

也正是由于&和|是逐位运算符,才出现了第一点中所说的,它们总是要比较两个运算数才得出结果,才导致性能会比&&和||低一些。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
js实现无缝滚动特效
Dec 20 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
layui使用label标签的方法
Sep 14 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 #Javascript
AngularJS过滤器filter用法实例分析
Nov 04 #Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 #Javascript
Angular页面间切换及传值的4种方法
Nov 04 #Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 #Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 #Javascript
javascript设置文本框光标的方法实例小结
Nov 04 #Javascript
You might like
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
python处理中文编码和判断编码示例
2014/02/26 Python
如何将python中的List转化成dictionary
2016/08/15 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
wxPython色环电阻计算器
2019/11/18 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
资深财务管理人员自我评价
2013/09/22 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
2014年国培研修感言
2014/03/09 职场文书
2015年招聘工作总结
2014/12/12 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
致接力运动员加油稿
2015/07/21 职场文书