详解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 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
jQuery动态生成不规则表格(前后端)
Feb 21 Javascript
vue使用v-for实现hover点击效果
Sep 29 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
基于JavaScript实现年月日三级联动
Jun 22 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资源管理框架Assetic简介
2014/06/12 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
js 判断脚本加载完毕的代码
2011/07/13 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python实现sublime3的less编译插件示例
2014/04/27 Python
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
AJAX的优缺点都有什么
2015/08/18 面试题
优秀志愿者事迹材料
2014/02/03 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js