详解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 相关文章推荐
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
Javascript变量作用域详解
Dec 06 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
AngularJS Module方法详解
Dec 08 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
24行JavaScript代码实现Redux的方法实例
Nov 17 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
vue实现前端列表多条件筛选
Oct 26 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中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
python hook监听事件详解
2018/10/25 Python
Python语言进阶知识点总结
2019/05/28 Python
Python笔记之工厂模式
2019/11/20 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
pandas针对excel处理的实现
2021/01/15 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
奇怪的鱼:Weird Fish
2018/03/18 全球购物
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
学习十八大精神心得体会
2013/12/31 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
工资收入证明
2014/10/07 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
Python 键盘事件详解
2021/11/11 Python
Linux中如何安装并部署Redis
2022/04/18 Servers
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers