详解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 巧妙去除数组中的重复项
Jan 25 Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
Vue项目服务器部署之子目录部署方法
May 12 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
vue 内联样式style中的background用法说明
Aug 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采集相关教程之一 CURL函数库
2010/02/15 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
js实现交通灯效果
2017/01/13 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
djano一对一、多对多、分页实例代码
2019/08/16 Python
Django之form组件自动校验数据实现
2020/01/14 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
大学毕业生的自我鉴定
2013/11/30 职场文书
小学敬老月活动方案
2014/02/11 职场文书
企业文化标语口号
2014/06/09 职场文书
领导干部保密承诺书
2014/08/30 职场文书
个人催款函范文
2015/06/23 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
Python加密与解密模块hashlib与hmac
2022/06/05 Python