详解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 相关文章推荐
jquery UI 1.72 之datepicker
Dec 29 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 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
php 安全过滤函数代码
2011/05/07 PHP
PHP 文件上传限制问题
2019/09/01 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
JS中获取函数调用链所有参数的方法
2015/05/07 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
python并发编程之线程实例解析
2017/12/27 Python
Python入门学习指南分享
2018/04/11 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
python实现计算图形面积
2021/02/22 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
决定成败的关键——创业计划书
2014/01/24 职场文书
舞蹈专业求职信
2014/06/13 职场文书
大学学生会竞选稿
2015/11/19 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
python pygame 开发五子棋双人对弈
2022/05/02 Python