详解js运算符单竖杠“|”与“||”的用法和作用介绍

在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

也正是由于&和|是逐位运算符，才出现了第一点中所说的，它们总是要比较两个运算数才得出结果，才导致性能会比&&和||低一些。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解JavaScript中|单竖杠运算符的使用方法

    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.

  • 详解js运算符单竖杠“|”与“||”的用法和作用介绍

    在js开发应用中我们通常会碰到"|"与"||"了,那么在运算中"|"与"||"是什么意思呢? 在js整数操作的时候,相当于去除小数点,parseInt.在正数的时候相当于Math.floor(),负数的时候相当于Math.ceil() 注: 1. Math.ceil()用作向上取整. 2. Math.floor()用作向下取整. 3. Math.round() 我们数学中常用到的四舍五入取整. console.log(0.6|

  • 全面介绍javascript实用技巧及单竖杠

    JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新手开发者被各种强大的 JavaScript 框架吸引进来,但他们却忽略了框架身后浩如星海的 JavaScript 实用技巧.本文将为你全面的介绍其中的知识点. 一.js整数的操作 使用|0和~~可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快,在处理像素及动画位移等

  • 详解JS数值Number类型

    Number 问题 下面的问题你都能回答对了吗? 0.1 + 0.2 == 0.3 成立吗? .e-5 表示多少? 怎么表示8进制? 怎么转换进制? 如何将字符串转换成数值或整数?反过来呢?十六进制又怎么处理? parseInt(0x12, 16) 的返回值是多少?是0x12吗? Number.MAX_VALUE 为最大数值,(new Number(12)).MAX_VALUE 是多少? JavaScript中怎么进行四舍五入?如果保留3位小数的精度? 如何获取一个随机数?如何取整?如何向上取整

  • 详解vue表单——小白速看

    一.基本用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定. 但 v-model 本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理. v-model 会忽略所有表单元素的 value.checked.selected 特性的初始值而总是将 Vue 实例的数据作为数据来源.你应该通过 JavaScript 在组件的 data 选项中声明初始值. 一组代码,看完text.textarea.

  • 详解vue 表单绑定与组件

    详解vue 表单绑定与组件

    一.什么是双向数据绑定 Vue.js是一个MV VM框架, 即数据双向绑定, 即当数据发生变化的时候, 视图也就发生变化, 当视图发生变化的时候,数据也会跟着同步变化.这也算是Vue.js的精髓之处了.   值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定.单向数据绑定是使用状态管理工具的前提.如果我们使用vue x那么数据流也是单项的,这时就会和双向数据绑定有冲突. 1.为什么要实现数据的双向绑定 在Vue.js中,如果使用vuex, 实际上数据还

  • 详解JS变量存储深拷贝和浅拷贝

    详解JS变量存储深拷贝和浅拷贝

    变量类型与存储空间 栈内存和堆内存 基本数据类型 string.number.null.undefined.boolean.symbol(ES6新增) 变量值存放在栈内存中,可直接访问和修改变量的值 基本数据类型不存在拷贝,好比如说你无法修改数值1的值 引用类型 Object Function RegExp Math Date 值为对象,存放在堆内存中 在栈内存中变量保存的是一个指针,指向对应在堆内存中的地址. 当访问引用类型的时候,要先从栈中取出该对象的地址指针,然后再从堆内存中取得所需的数据

  • 详解JS中的对象字面量

    前言 在 ES6 之前,js中的对象字面量(也称为对象初始化器)是非常基础的.可以定义两种类型的属性: 键值对{name1: value1} 获取器{ get name(){..} }和 设置器{ set name(val){..}}的计算属性值 var myObject = { myString: 'value 1', get myNumber() { return this._myNumber; }, set myNumber(value) { this._myNumber = Number

  • 详解JS浏览器储存

    详解JS浏览器储存

    引言 随着对前端的了解越来越深入,了解到了很多种浏览器的存储方案,如 Cookie.LocalStorage等,哪这些存储方案有何异同,分别的适用场景又是什么呢. Cookie Cookie的来源 Cookie 被创造出来的本意并不是本地储存,而是为了辨别用户身份.众所周知,Http 协议是无状态的,也就是说你每一次发送给服务器的请求对于服务器来说都是孤立的,服务器不知道这这些请求来自于谁.比如你向购物车里面添加了一些商品,但是当发送结账请求的时候服务器懵了,我怎么知道你是谁,你买了什么呢.而使

  • 详解JS ES6编码规范

    1.块级作用域 1.1.let取代var ES6 提出了两个新的声明变量的命令: let 和const.其中,let可以完全取代var,因为两者语义相同,而且let没有副作用. var命令存在变量提升的特性,而let没有这个命令. 所谓变量提升,即指变量可以先使用,再声明,显然,这种编码规范非常不适合阅读. 1.2.全局常量和线程安全 在let和const之间,优先使用const. let应出现在单线程模块代码内,而const则非常适合多线程. // bad var a = 1, b = 2,

随机推荐