美兰十三的想疗院


一个不务正业的前端狗,爱纹身、玩乐队、哥金党、专门写Bug~


Javascript奇技淫巧之位运算符

奇技淫巧:指过于奇巧而无益还让人着迷的技艺与制品。

And(与) &
Or(或) |
Exclusive Or(异或) ^
Not(非) ~

位运算符,我们在日常js开发中其实 说真的,很少会用到,甚至可以说 有相当一部分的 javascripter完全不知道 位运算符

但是我们日常中肯定常常会用到 &&||! 这么几个符号,它们看起来跟位运算符很像,但是 它们并不是位运算符,它们只运用在 ‘boolean 布尔值’运算中

曾几何时我曾疑惑过 为什么 我们 在 js中 做条件判断的时候 and是用&&而不是&

现在答案来了,因为&已被占用,是个位运算符

虽然说 我们日常开发中 很多js原生方法能满足我们了,但是适当掌握一些 位运算 能提高你的开发效率和代码性能

在这里我们不探讨 位运算符的原理,有兴趣的可以自行谷歌

Not ~

Not 实质上 是对数字向下取整求负 再 减1

var num = 20.1          
console.log(~num)    // -21

And &

这个 就有点复杂了

对数字的二进制形式进行运算。它把每个数字中的数位对齐,然后用下面的规则对同一位置上的两个数位进行 AND 运算:

第一个数字中的数位 第二个数字中的数位 结果
1 1 1
1 0 0
0 1 0
0 0 0

举例: 30 & 3

我们先来看下两个数的 二进制

var i = 30
i.toString(2) // 11110
var j = 3
j.toString(2) // 11
console.log(i & j) // 2

为什么是‘2’?

我们来看一下, 按照上表的关系 我们可以得出 下表结果

30 1 1110
3 0 0011
结果 0 0010

二进制 ‘10’ 对应的 十进制数就是 ‘2’了

Or |

or跟and 相似 也是 转为二进制之后 进行的 计算 不过规则不同

第一个数字中的数位 第二个数字中的数位 结果
1 1 1
1 0 1
0 1 1
0 0 0

同样的 我们拿 30 | 3来举例

var i = 30
i.toString(2) // 11110
var j = 3
j.toString(2) // 11
console.log(i | j) // 31
30 1 1110
3 0 0011
结果 1 1111

Exclusive Or ^(或者称 Xor)

也是类似 or 和 and 一样 不过规则不同

第一个数字中的数位 第二个数字中的数位 结果
1 1 0
1 0 1
0 1 1
0 0 0
```js var i = 30 i.toString(2) // 11110 var j = 3 j.toString(2) // 11 console.log(i ^ j) // 29 ```
30 1 1110
3 0 0011
结果 1 1101
那么 看了这4个 基本运算之后,

究竟我们的 奇技淫巧在哪呢?

我们再回到 Not 运算符上,可以说 And Or Xor 这三个位运算 我们用到的可能性比较小

但是 Not 的 法则 是 向下取整 后 求负 减1

注意我 着重标出的 关键字,是不是想到了什么?没错 Math.floor()

如果说 单次 使用 Not 是 求负减1 那么 我连续使用 2次 Not 会怎么样呢?对于 整型 的数字来说 连续两次 就是它本身,那么对于浮点型的数字呢? 那岂不就是 他的向下取整了么?

为了验证 我们可以试一下

var i = 25.1
console.log(~~i) //25

但是又有人说 向下取整 不是有 Math.floor() 方法么?

好了 这就是我们奇技淫巧了 为什么要用 两次 Not 而不用 Math.floor()

第一,你不觉得 ~\\~ 输入起来 比 Math.floor() 快么?

第二,就是 ~\\~Math.floor() 更快。

Math.floor() 运行速度 是 3.5 millions ops/sec

~\\~的运行速度是 3.8 millions ops/sec

但是 ~\\~ 只适用于 32位 以下的整型,对于 超过32位的 整型 还是要用 Math.floor() 这点要千万注意

建议打赏金额1-10元

支付宝打赏

微信打赏

最近的文章

这些的JavaScript编程黑科技,装逼指南,高逼格代码,让你惊叹不已

原文地址:https://zhuanlan.zhihu.com/p/28937831 Javascript是一门很吊的语言 \n 本文秉承着:你看不懂是你SB,我写的代码就要牛逼。\n\n…

javascript 继续阅读
更早的文章

HTML5 离线缓存-manifest简介

起源 html5之前的网页,都是无连接,必须联网才能访问,这其实也是web的特色,这其实对于PC是时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比…

H5, 离线缓存 继续阅读
comments powered by Disqus
沪ICP备15043964号-3