js中 ~(按位非)运算符妙用

基础知识:

某个数值的按位非操作,可以简单的理解为该值取负值后减1 例如:

~5 = -5-1 = -6
~-5 = 5-1 = 4
~4 = -4-1 = -5
复制代码

原理:

二进制数的负数是取该二进制数的补码,然后+1。

二进制数,最高位为0表示正数,最高位为1表示负数。(最高位分不同情况存储不一样)

5的二进制表示:00000101 (假设最高位为8位)

补码:11111010 -5:11111011

~按位非操作其实就是取补码的过程,也就是上述求该值负数的逆过程,所以可以简单的理解为该值取负值后减1。

5的补码就是~5,那么~5+1 = -5,所以~5 = -5-1 = -6

应用:

1、indexOf()

判断数组或者字符串中是否存在某个元素,一般使用indexOf()如下:

if(str.indexOf(query) != -1) {} 
if(str.indexOf(query) >= 0) {}
复制代码

现在可以更加清爽和高端的写成:

if(~str.indexOf(query)) {} 
复制代码

原理:

不存在返回-1,~-1 = 0 ,大于-1的值,0,1,2,3 ... 按位非的值1,2,3,4...都大于0

ps: 这种写法可不仅仅的B格高这么简单,位运算相对于比较运算符效率高,对于一次运算本身来说,可能相差无几,但在循环次数过大,比如超过了10000000次,效率就会有差距。

2、~~value的使用

对于浮点数,~~value可以代替parseInt(value),而且前者效率更高些

parseInt(-2.99) //-2 
~~(-2.99) //-2 
复制代码

ps: 这些技巧可能会给阅读代码的同学造成困扰,如果不知道原理的话,甚至让人费解。因此平时写代码的时候,要根据情况决定采用哪种写法。