详解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代码小结
Aug 01 Javascript
通过jQuery源码学习javascript(三)
Dec 27 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
js常用DOM方法详解
Feb 04 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 Javascript
JS + HTML 罗盘式时钟的实现
May 21 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牛逼的面试题分享
2013/01/18 PHP
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
Vue性能优化的方法
2020/07/30 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
家教广告词
2014/03/19 职场文书
高级工程师英文求职信
2014/03/19 职场文书
六一节目主持词
2014/04/01 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
花木兰观后感
2015/06/10 职场文书
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL