详解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 相关文章推荐
javascript各种复制代码收集
Sep 20 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
在chrome中window.onload事件的一些问题
Mar 01 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 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的FTP学习(三)
2006/10/09 PHP
php中文本操作的类
2007/03/17 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
PHP合并静态文件详解
2014/11/14 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
angular学习之动态创建表单的方法
2018/12/07 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
python 为什么说eval要慎用
2019/03/26 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
python简单实现最大似然估计&scipy库的使用详解
2020/04/15 Python
Python代码需要缩进吗
2020/07/01 Python
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
银行学习十八大感想
2014/01/11 职场文书
工作会议欢迎词
2014/01/16 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
会计演讲稿范文
2014/05/23 职场文书
公司门卫工作职责
2014/06/28 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
JavaScript设计模式之原型模式详情
2022/06/21 Javascript