详解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刷新窗口方法小结
Oct 21 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 Javascript
koa2的中间件功能及应用示例
Mar 05 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 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
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
PHP中文分词的简单实现代码分享
2011/07/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
php之可变变量的实例详解
2017/09/12 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
jsonp跨域请求详解
2017/07/13 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
Python中使用HTMLParser解析html实例
2015/02/08 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
Python利用命名空间解析XML文档
2020/08/10 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
金宝贝童装官网:Gymboree
2016/08/31 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
2014年机关植树节活动方案
2014/02/27 职场文书
求职简历自我评价范例
2014/03/12 职场文书
团日活动总结范文
2014/04/25 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书