详解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 相关文章推荐
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
js实现可拖动DIV的方法
Dec 17 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
Angular表单验证实例详解
Oct 20 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
JS中常用的消息框总结
Feb 24 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 Javascript
javascript判断一个变量是数组还是对象
Apr 10 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
简单采集了yahoo的一些数据
2007/02/14 PHP
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
php多重接口的实现方法
2015/06/20 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
python读取浮点数和读取文本文件示例
2014/05/06 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
python3 线性回归验证方法
2019/07/09 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
优秀团员个人的自我评价
2013/10/02 职场文书
优秀演讲稿范文
2013/12/29 职场文书
任命书模板
2014/06/04 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
师德师风学习材料
2014/12/19 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
HttpClient实现表单提交上传文件
2022/08/14 Java/Android