JavaScript中7种位运算符在实战的妙用

目录
  • 位运算符
  • 按位非 ~
  • 按位与 &
  • 按位或 |
  • 按位异或 ^
  • 左移 <<
  • 有符号右移 >>
  • 无符号右移 >>>
  • 实战中的妙用
    • 1.判断奇偶数
    • 2. 使用^来完成值的交换
    • 3. 使用~进行判断
    • 4. 使用&、>>、|来完成rgb值和16进制颜色值之间的转换
    • 5. 使用|、~、>>、<<、>>>来取整

本篇文章带大家了解一下JavaScript中的7种位运算符,看看如何妙用这7种位运算符,希望对大家有所帮助!

位运算符

ECMAScript 中的所有数值都以 IEEE 754 64 位格式存储,但位操作并不直接应用到 64 位表示,而是先把值转换为 32 位整数,再进行位操作,之后再把结果转换为 64 位。

对开发者而言,就好像只有 32 位整数一样,因 为 64 位整数存储格式是不可见的。既然知道了这些,就只需要考虑 32 位整数即可。

有符号整数使用 32 位的前 31 位表示整数值。第 32 位表示数值的符号,如 0 表示正,1 表示负。这 一位称为符号位(sign bit),它的值决定了数值其余部分的格式。正值以真正的二进制格式存储,即 31 位中的每一位都代表 2 的幂。第一位(称为第 0 位)表示 20 ,第二位表示 21 ,依此类推。

如果一个位是空的,则以0填充,相当于忽略不计。比如,数值18的二进制格式为00000000000000000000000000010010, 或更精简的 10010。后者是用到的 5 个有效位,决定了实际的值(如下图所示)。

按位非 ~

按位非操作符用波浪符(~)表示,它的作用是返回数值的一补数。按位非是 ECMAScript 中为数 不多的几个二进制数学操作符之一。看下面的例子:

let num1 = 25; //二进制 00000000000000000000000000011001
let num2 = ~num1; // 二进制 11111111111111111111111111100110
console.log(num2); // -26

这里,按位非操作符作用到了数值 25,得到的结果是26。由此可以看出,按位非的最终效果是对 数值取反并减 1,就像执行如下操作的结果一样:

let num1 = 25;
let num2 = -num1 - 1;
console.log(num2); // "-26"

实际上,尽管两者返回的结果一样,但位操作的速度快得多。这是因为位操作是在数值的底层表示 上完成的。

按位与 &

按位与操作符用和号(&)表示,有两个操作数。本质上,按位与就是将两个数的每一个位对齐, 然后基于真值表中的规则,对每一位执行相应的与操作。

按位与操作在两个位都是 1 时返回 1,在任何一位是 0 时返回 0。 下面看一个例子,我们对数值 25 和 3 求与操作,如下所示:

let result = 25 & 3;
console.log(result); // 1 25 和 3 的按位与操作的结果是 1。

为什么呢?看下面的二进制计算过程:

如上图所示,25 和 3 的二进制表示中,只有第 0 位上的两个数都是 1。于是结果数值的所有其他位都 会以 0 填充,因此结果就是 1。

按位或 |

按位或操作符用管道符(|)表示,同样有两个操作数。按位或遵循如下真值表:

按位或操作在至少一位是 1 时返回 1,两位都是 0 时返回 0。 仍然用按位与的示例,如果对 25 和 3 执行按位或,代码如下所示:

let result = 25 | 3;
console.log(result); // 27

可见 25 和 3 的按位或操作的结果是 27:

在参与计算的两个数中,有 4 位都是 1,因此它们直接对应到结果上。二进制码 11011 等于 27。

按位异或 ^

按位异或用脱字符(^)表示,同样有两个操作数。下面是按位异或的真值表:

按位异或与按位或的区别是,它只在一位上是 1 的时候返回 1(两位都是 1 或 0,则返回 0)。 对数值 25 和 3 执行按位异或操作:

let result = 25 ^ 3;
console.log(result); // 26

可见,25 和 3 的按位异或操作结果为 26,如下所示:

两个数在 4 位上都是 1,但两个数的第 0 位都是 1,因此那一位在结果中就变成了 0。其余位上的 1 在另一个数上没有对应的 1,因此会直接传递到结果中。二进制码 11010 等于 26。(注意,这比对同样 两个值执行按位或操作得到的结果小 1。)

左移 <<

左移操作符用两个小于号(<<)表示,会按照指定的位数将数值的所有位向左移动。比如,如果数 值 2(二进制 10)向左移 5 位,就会得到 64(二进制 1000000),如下所示:

let oldValue = 2; // 等于二进制 10
let newValue = oldValue << 5; // 等于二进制 1000000,即十进制 64

注意在移位后,数值右端会空出 5 位。左移会以 0 填充这些空位,让结果是完整的 32 位数值(见下图)。

注意,左移会保留它所操作数值的符号。比如,如果-2 左移 5 位,将得到-64,而不是正 64。

有符号右移 >>

有符号右移由两个大于号(>>)表示,会将数值的所有 32 位都向右移,同时保留符号(正或负)。 有符号右移实际上是左移的逆运算。比如,如果将 64 右移 5 位,那就是 2:

let oldValue = 64; // 等于二进制 1000000
let newValue = oldValue >> 5; // 等于二进制 10,即十进制 2

同样,移位后就会出现空位。不过,右移后空位会出现在左侧,且在符号位之后(见图 3-3)。 ECMAScript 会用符号位的值来填充这些空位,以得到完整的数值。

无符号右移 >>>

无符号右移用 3 个大于号表示(>>>),会将数值的所有 32 位都向右移。对于正数,无符号右移与 有符号右移结果相同。仍然以前面有符号右移的例子为例,64 向右移动 5 位,会变成 2:

let oldValue = 64; // 等于二进制 1000000
let newValue = oldValue >>> 5; // 等于二进制 10,即十进制 2

对于负数,有时候差异会非常大。与有符号右移不同,无符号右移会给空位补 0,而不管符号位是 什么。对正数来说,这跟有符号右移效果相同。但对负数来说,结果就差太多了。无符号右移操作符将负数的二进制表示当成正数的二进制表示来处理。因为负数是其绝对值的二补数,所以右移之后结果变 得非常之大,如下面的例子所示:

let oldValue = -64; // 等于二进制 11111111111111111111111111000000
let newValue = oldValue >>> 5; // 等于十进制 134217726

在对-64 无符号右移 5 位后,结果是 134 217 726。这是因为-64 的二进制表示是 1111111111111111111 1111111000000,无符号右移却将它当成正值,也就是 4 294 967 232。把这个值右移 5 位后,结果是 00000111111111111111111111111110,即 134 217 726。

实战中的妙用

1.判断奇偶数

// 偶数 & 1 = 0
// 奇数 & 1 = 1
console.log(2 & 1) // 0
console.log(3 & 1) // 1

2. 使用^来完成值的交换

let a = 2
let b = 5
a ^= b
b ^= a
a ^= b
console.log(a) // 5
console.log(b) // 2

3. 使用~进行判断

// 常用判断
if (arr.indexOf(item) > -1) {
    // code
}
// 按位非    ~-1 = -(-1) - 1 取反再 -1
if (~arr.indexOf(item)) {
    // code
}

4. 使用&、>>、|来完成rgb值和16进制颜色值之间的转换

/**
 * 16进制颜色值转RGB
 * @param  {String} hex 16进制颜色字符串
 * @return {String}     RGB颜色字符串
 */
  function hexToRGB(hex) {
    var hexx = hex.replace('Id', '0x')
    var r = hexx >> 16
    var g = hexx >> 8 & 0xff
    var b = hexx & 0xff
    return `rgb(${r}, ${g}, ${b})`
}

/**
 * RGB颜色转16进制颜色
 * @param  {String} rgb RGB进制颜色字符串
 * @return {String}     16进制颜色字符串
 */
function RGBToHex(rgb) {
    var rgbArr = rgb.split(/[^\d]+/)
    var color = rgbArr[1]<<16 | rgbArr[2]<<8 | rgbArr[3]
    return 'Id'+ color.toString(16)
}
// -------------------------------------------------
hexToRGB('Idffffff')               // 'rgb(255,255,255)'
RGBToHex('rgb(255,255,255)')      // 'Idffffff'

5. 使用|、~、>>、<<、>>>来取整

console.log(~~ 3.1415)    // 3
console.log(3.1415 >> 0)  // 3
console.log(3.1415 << 0)  // 3
console.log(3.1415 | 0)   // 3
// >>>不可对负数取整
console.log(3.1415 >>> 0)   // 3

【相关推荐:】

以上就是聊聊JavaScript中的7种位运算符,看看在实战中如何妙用?的详细内容,更多请关注php中文网其它相关文章!

参考地址:http://www.php.cn//js-tutorial-487096.html

到此这篇关于JavaScript中7种位运算符在实战的妙用的文章就介绍到这了,更多相关JS位运算符实战内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript详细分析数据类型和运算符

    目录 一.js中的数据类型 1.数值型 2.字符串型 3.逻辑(布尔)型 4.空(null)值 5.未定义(undefined) 6.复合数据类型Object 二.JavaScript中的运算符 1.算数运算符 2.赋值运算符 3.比较运算符 4.逻辑运算符 一.js中的数据类型 1.JS是弱类型的脚本语言,所有的变量对象的数据类型的声明都是var . 2.变量声明时没有确定具体的数据类型,在变量赋值时确定变量具体的数据类型. 五种基本的数据类型 1.数值型 number整数和浮点数统称为数值.

  • JavaScript中的数据类型介绍

    一.基本数据类型(原始值类型) 基本类型:字符串(String).数字(Number).布尔(Boolean).对空(Null).未定义(Undefined).Symbol. 基本类型的变量是存放在栈内存(Stack)里,栈内存中保存了变量标识符和指向堆内存中该对象的指针. 注:Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值. JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型: var x; // x 为 undefined var x = 5; /

  • 你可能不知道的JavaScript位运算符详解

    目录 概览 位操作符概览 位操作支持多少位? 负数的无符号右移 -2 >>> 1为什么输出2147483647? 状态控制 权限控制 判断奇偶数 交换两个变量的值 判断整数是否相等 判断是否为负数 正浮点数取整 正负浮点数取整 十进制转换成二进制 二进制转换成十进制 参考 概览 本文详细剖析JavaScript的位运算符,其涉及的计算机原理和操作效果. 然后从实战的角度出发,罗列相关的应用场景. 位操作符概览 运算符 描述 示例 按位与(AND) 两个操作数对应的比特位都是1时,结果才为

  • javascript基本数据类型和对象类型归档问题解析

    javascript的基本数据类型以及引用数据类型,基本数据类型在开发中经常会用到,包括作为变量使用,判断数据类型来处理一些业务等 基本(简单数据类型) undefined,Null,Boolean,Number,String 复杂的数据类型Object undefined undefined 类型只有一个值,即它本身,在使用var声明变量但未给初始值时,这个变量的值为undefined, var msg; console.log(msg==undefined);//true Null Null

  • javascript基础数据类型转换教程示例

    目录 数值型转换为字符串类型 字符串类型转换为数值型 转换为布尔型 结语 数值型转换为字符串类型 方式 说明 案例 toString() 转成字符串 var num =1; alert ( num.toString()); String() 强制转换 转成字符串 var num =1; alert ( String ( num )); 加号拼接字符串 和字符串拼接的结果都是字符串 var num =1; alert ( num +"我是字符串"); // 1.将数字型转换为字符串类型 var n

  • JavaScript数据类型转换

    目录 一.转换函数 1.parseInt() 2.parseFloat() 3.toString() 二.强制类型转换函数 1.Boolean() 2.Number() 3.String() 一.转换函数 1.parseInt() parseInt()函数可以将任何类型的值转换为整数. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

  • javascript中instanceof运算符的用法详解

    概述 instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上 语法 obj instanceof Object;//true 实例obj在不在Object构造函数中 描述 instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上. 实例 1.instanceof的普通的用法,obj instanceof Object 检测Object.prototype是否存在于参数

  • javascript数据类型基础示例教程

    js中的输入输出语句 方法 说明 归属 alert(msg) 浏览器弹出警示框 浏览器 console.log(msg) 浏览器控制台打印输出信息 浏览器 prompt(info) 浏览器弹出输入框,用户可以输入 浏览器 注:prompt(info)获取的输入都是字符串类型,跟python中的input()类似. <script> prompt("请输入:"); alert('你好呀!小可爱!'); console.log('阿牛最帅啦!'); </script>

  • javaScript中一些常见的数据类型检查校验

    目录 前言 常见的几种数据校验方式 typeof操作符 instanceof constructor call && apply Object.prototype.toString结合Function.prototype.call && apply 其他校验数据类型的方法: 总结 源码地址 前言 在JavaScript中,数据类型分为两大类,一种是基础数据类型,另一种则是复杂数据类型,又叫引用数据类型 基础数据类型:数字Number 字符串String 布尔Boolean

  • JavaScript中7种位运算符在实战的妙用

    目录 位运算符 按位非 - 按位与 & 按位或 | 按位异或 ^ 左移 << 有符号右移 >> 无符号右移 >>> 实战中的妙用 1.判断奇偶数 2. 使用^来完成值的交换 3. 使用~进行判断 4. 使用&.>>.|来完成rgb值和16进制颜色值之间的转换 5. 使用|.~.>>.<<.>>>来取整 本篇文章带大家了解一下JavaScript中的7种位运算符,看看如何妙用这7种位运算符,希望对

  • 一起盘点JavaScript中一些强大的运算符

    目录 前言 一.??空值合并运算符 二.??=空赋值运算符 三.?.可选链操作符 四.?:三元运算符 五.逻辑与(&&)和逻辑或(||) 六.位运算符 & 和 | 七.双位运算符 ~~ 七.逻辑运算符 ! 7.1 利用!取反 7.2 利用!!做类型判断 7.3 两个值是否相等 总结 前言 你在阅读其他人的代码的时候,有没有遇见一些奇怪的写法,让你的思路瞬间卡住,等你回过神来便不明觉厉,某位大侠曾经来过这里. 今天,我们就来盘点一下 JavaScript 中一些强大的运算符吧~~~

  • JavaScript中三种for循环语句的使用总结(for、for...in、for...of)

    前言 每个接触JS的开发人员都不可避免的与for循环打交道,毕竟这是遍历必不可少的工具之一.JavaScript 中的 for 循环语句相信大家都已经快用厌了,现在有好多文章都在讲怎么减少代码中的 for 循环语句,但是,你又不得不承认它们真的很有用.今天,我来总结一下前端 JavaScript 中三种 for 循环语句. for 这大概是应用最广的循环语句了吧,简单实用,且大多数时候性能还是在线的,唯一的缺点大概就是太普通,没有特色,导致很多人现在不愿用它. const array = [4,

  • JavaScript中instanceof与typeof运算符的用法及区别详细解析

    JavaScript中的instanceof和typeof常被用来判断一个变量是什么类型的(实例),但它们的使用还是有区别的: typeof 运算符返回一个用来表示表达式的数据类型的字符串. typeof expression ; expression 参数是需要查找类型信息的任意表达式. 说明typeof 是一个一元运算符,放在一个运算数之前. typeof 运算符把类型信息当作字符串返回.typeof 返回值有六种可能: "number" ,"string",

  • JavaScript中5种调用函数的方法

    这篇文章详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助! JavaScript,调用函数的5种方法 一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性, 当我们选择面对它的时候,这将成为我们前进的阻碍. 作为初学者,我们来测试五种函数调用的方法,从表面来看我们会认为那些函数与C#中函数的

  • Javascript中八种遍历方法的执行速度深度对比

    前言 遍历数组或对象是一名程序员的基本素养之一. 然而遍历却不是一件简单的事, 优秀的程序员知道怎么去选择合适的遍历方法, 优化遍历效率. 本篇将带你走进JavaScript遍历的世界, 享受分析JS循环的快感. 本篇所有代码都可以直接运行, 希望您通读本篇后, 不止是浏览, 最好是亲手去实践下. 概述 js有如下两种数据需要经常遍历 数组(Array) 对象(Object) 同时又提供了如下8种方法方便我们遍历元素 for while(或do~while) forEach for in $.e

  • Javascript中3种实现继承的方法和代码实例

    继承是我们在实现面向对象编程的时候很重要的一个手段.虽然我们讲不能过度继承,多利用组合代替继承,但是继承总是免不了的.这里要讨论的就是Javascript中的继承机制. Javascript中实际上是没有继承的概念的,但是我们可以通过一些手段来模仿实现它.这种继承实际上把一个对象复制到另外一个对象内部.你需要注意的是所有的本地类和宿主类是不能作为基类被继承的,主要是为了安全方面的考虑. Javascript中的继承大约有三类:1.对象冒充:2.原型继承:3.二者的混合. 一.对象冒充 其实对象冒

  • 详细介绍Python语言中的按位运算符

    按位运算符是把数字看作二进制来进行计算的.Python中的按位运算法则如下: 按位与   ( bitwise and of x and y ) &  举例: 5&3 = 1  解释: 101  11 相同位仅为个位1 ,故结果为 1 按位或   ( bitwise or of x and y ) |  举例: 5|3 = 7  解释: 101  11 出现1的位是 1 1 1,故结果为 111 按位异或 ( bitwise exclusive or of x and y ) ^  举例:

  • JavaScript中七种流行的开源机器学习框架

    如果你是一位想要深入机器学习的 JavaScript 程序员或想成为一位使用 JavaScript 的机器学习专家,那么这些开源框架也许会吸引你. 开源工具的涌现使得开发者能够更加轻松地开发应用,这一点使机器学习领域本身获得了极大增长.(例如,AndreyBu,他来自德国,在机器学习领域拥有五年以上的经验,他一直在使用各种各样的开源框架来创造富有魅力的机器学习项目.) 虽然 Python 是绝大多数的机器学习框架所采用的语言,但是 JavaScript 也并没有被抛下.JavaScript 开发

  • JavaScript中三种异步上传文件方式

    异步上传文件是为了更好的用户体验,是每个前端必须掌握的技能.这里我提出三点有关异步文件上传的方式. 使用第三方控件,如Flash,ActiveX等浏览器插件上传. 使用隐藏的iframe模拟异步上传. 使用XMLHttpRequest2来实现异步上传. 第一种使用浏览器插件上传,需要一定的底层编码功底,在这里我就不讲了,以免误人子弟,提出这点大家可以自行百度. 第二种使用隐藏的iframe模拟异步上传.为什么在这里说的是模拟呢?因为我们其实是将返回结果放在了一个隐藏的iframe中,所以才没有使

随机推荐