JavaScript 前端 学习笔记 编程 ·

「前端笔记」 Javascript按位非运算符(~)及双非(~~)的使用

~ 运算符查看表达式的二进制表示形式的值,并执行位非运算。
Javascript 按位取反运算符 (~) ,对一个表达式执行位非(求非)运算。如 ~1 = -2; ~2 = -3;

最近做Leetcode的时候,发现有人用到了位运算符-not (~),以前也见过类似“~~value”的用法,所以研究了下为什么这样用。

js取反我只知道个!,但是~为什么也叫取反,他返回的又不是boolean类型?

~1,~2 的二进制又不是 -2 ,-3 ,怎么会转换成这么奇怪的值?

网友解答:

按位取反还真和boolean没多大关系,大体流程是这样的:

就来看看~1的计算步骤:

  • 1(这里叫:原码)转二进制 = 00000001
  • 按位取反 = 11111110
  • 发现符号位(即最高位)为1(表示负数),将除符号位之外的其他数字取反 = 10000001
  • 末位加1取其补码 = 10000010
  • 转换回十进制 = -2

有网友对上面的答案进行了三点补充,如下:

  • 按位取反的运算规则这么奇怪并不是JavaScript独有的,而是所有的计算机语言都是这样的。这样做的主要原因是为了为了统一减法和加法,在计算机中,减法会变成加一个负数,而负数会以补码的形式存储。而这样主要是因为补码和数字的十进制数有这么转换关系,负数:补码(x) = -x - 1,正数:补码(x) = x

  • 因为补码是针对负数存在的,那么只要数据类型有无符号数,就没有这样的烦恼了,比如C语言有无符号整型,就能对无符号整型直接按位取反。

  • 如果没有无符号类型,而且也只是想要按位取反,而不是附带补码的按位取反,需要另外的方法。让全1的数据和当前数据做按位抑或就行了。比如,你有一个32位的数据a,需要对它做按位取反,那么这样就行了:0xFFFF ^ a

按位非运算符“~”

先看看w3c的定义:

位运算 NOT 由否定号(~)表示,它是 ECMAScript 中为数不多的与二进制算术有关的运算符之一。

位运算 NOT 是三步的处理过程:

  1. 把运算数转换成 32 位数字

  2. 把二进制数转换成它的二进制反码(0->1, 1->0)

  3. 把二进制数转换成浮点数

简单的理解,对任一数值 x 进行按位非操作的结果为 -(x + 1)

console.log('~null: ', ~null);       // => -1
console.log('~undefined: ', ~undefined);  // => -1
console.log('~0: ', ~0);          // => -1
console.log('~{}: ', ~{});         // => -1
console.log('~[]: ', ~[]);         // => -1
console.log('~(1/0): ', ~(1/0));      // => -1
console.log('~false: ', ~false);      // => -1
console.log('~true: ', ~true);       // => -2
console.log('~1.2543: ', ~1.2543);     // => -2
console.log('~4.9: ', ~4.9);       // => -5
console.log('~(-2.999): ', ~(-2.999));   // => 1

那么, ~~x就为 -(-(x+1) + 1)

console.log('~~null: ', ~~null);       // => 0
console.log('~~undefined: ', ~~undefined);  // => 0
console.log('~~0: ', ~~0);          // => 0
console.log('~~{}: ', ~~{});         // => 0
console.log('~~[]: ', ~~[]);         // => 0
console.log('~~(1/0): ', ~~(1/0));      // => 0
console.log('~~false: ', ~~false);      // => 0
console.log('~~true: ', ~~true);       // => 1
console.log('~~1.2543: ', ~~1.2543);     // => 1
console.log('~~4.9: ', ~~4.9);       // => 4
console.log('~~(-2.999): ', ~~(-2.999));   // => -2

~value的使用

判断数值中是否有某元素时,以前这样判断:

if(arr.indexOf(ele) > -1){...} //易读

现在可以这样判断,两者效率:

if(~arr.indexOf(ele)){...} //简洁

~~value的使用

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

parseInt(-2.99) //-2
~~(-2.99) //-2

测试

var time1 = +new Date();
var count = 5000000;
var ele = 1;
var arr = [1,2,4,5,2];
var h = 1.01;

console.time('parseInt');
for (var i = count; i > 0; i--) {
    parseInt(h);
}
console.timeEnd('parseInt'); //84.385ms

console.time('~~');
for (var i = count; i>0; i--) {
    ~~h;
}
console.timeEnd('~~'); //13.386ms


console.time('arr.indexOf(ele) > -1');
for (var j = count; j>0; j--) {
    arr.indexOf(ele) > -1;
}
console.timeEnd('arr.indexOf(ele) > -1'); //16.263ms

console.time('~arr.indexOf(ele)');
for (var i = count; i>0; i--) {
    ~arr.indexOf(ele);
}

参与评论