【js技巧】~(按位非)運算符的妙用

今天在reivew部門牙套姐MM的代碼的時候，有點小心得，給大家分享。我們常常說到，“學以致用”，但我發現自己卻很少能真正做到。《javascript高級程序設計》即大家常說的“紅寶書”，我也經常看，可是一些技巧還是要在實戰中總結出來的。就比如今天將的這個~不起眼的一元運算符，學名“按位非”，在書的第三章中也有詳細的介紹：

~：按位非操作符由一個波浪線（~）表示，執行按位非的結果就是返回數值的反碼。

var num1 = 3;    // 我的幸運數字是3
var num2 = ~(num1);
console.log(num2)  //  "-4"

var num3 = -3;  
var num4 = ~(num3);
console.log(num4)  //  "2"

console.log(~(0))  //  "-1"

沒錯，現在我們知道了~運算符的原理了。開心嗎？。。。不開心，雖然這一章，我看過好多次。。。因為我從來就沒用過，實在是慚愧啊。大家覺得這個運算符可以用在什么地方呢？恩。。。沉思一下，放一段同事的代碼：

if (~item[search_key].toLowerCase().indexOf(query)) {
                        _results.push(item);
                    }

啊！對啊！就是這里！！！是不是有種餅姐（部門同事：彥欣MM）所說的豁然開朗，XX大哥所說的醍醐灌頂，我所說的茅塞頓開的趕腳呢？？

現在看來，我以前在對indexOf判斷時候的寫法，簡直弱爆了，含淚上碼：

if( str.indexOf(query) != -1 )  or  if( str.indexOf(query) >= 0)

是不是想吐。。。忍住啊！

用上~瞬間覺得由前端小屌絲變身為高富帥，有木有？

雖然你秒懂了，但是我還是故作正經的分析下原理啊：

通過str.indexOf(query)最后得出的值，無外乎不過兩種：

1. str中包含query字符串，則值是0或正整數，此時：!!(~str.indexOf(query)) === true(或者這樣轉換 Boolean(~str.indexOf(query)) === true)

2. srt中不包含query字符串，則值為-1，此時：!!(~str.indexOf(query)) === false

因此通過加上一個~就能很好的對indexOf的查詢結果進行判斷了。清爽無比，從此再也沒有頭屑的煩惱了。。哈哈！

最后我們來分析一下效率吧，印象中位運算的效率應該比較運算符高。來段代碼：

var str = "hutaoer go go go!!!!! My lucky number is 33!!";
    var query = 33;
    var timeStart1 = new Date() - 0;
    for(var i = 0; i < 100000000; i++) {
        ~str.indexOf(query)
    }
    var timeEnd1 = new Date() - 0;
    console.log('~ cost time:' + (timeEnd1 - timeStart1)); 
    // ~ cost time:9954  循環次數：10000000 
    // ~ cost time:104  循環次數： 100000
    var timeStart2 = new Date() - 0;
    for(var j = 0; j < 100000000; j++) {
        str.indexOf(query) >= 0
    }
    var timeEnd2 = new Date() - 0;
    console.log('>= cost time:' + (timeEnd2 - timeStart2)); 
   // >= cost time:10120  循環次數：10000000 
   // >= cost time:105 循環次數： 100000

//--------------------------------------------------------------------------------//

【更新 2013.10.27 17:24】感謝4樓@ joe-cn 同學的回復和建議，讓我對這種寫法有了新的認識，測試數據也更新下，原來的測試代碼在分割線上面不變。代碼如下：

    var str = "hutaoer go go go!!!!! My lucky number is 33!!";
    var query = 33;
    var timeStart1 = new Date() - 0;
    for(var i = 0; i < 1000000; i++) {
        ~str.indexOf(query)
    }
    var timeEnd1 = new Date() - 0;
    console.log('~ cost time:' + (timeEnd1 - timeStart1));
    //  循環1000000次  127ms
    var timeStart2 = new Date() - 0;
    for(var j = 0; j < 1000000; j++) {
        str.indexOf(query) >= 0
    }
    var timeEnd2 = new Date() - 0;
    console.log('>= cost time:' + (timeEnd2 - timeStart2));
    // 循環1000000次 101ms
    var timeStart3 = new Date() - 0;
    for(var k = 0; k < 1000000; k++) {
        Boolean(~str.indexOf(query))
    }
    var timeEnd3 = new Date() - 0;
    console.log('add Boolean cost time:' + (timeEnd3 - timeStart3));
    // 循環1000000次 129ms
    var timeStart4 = new Date() - 0;
    for(var k = 0; k < 1000000; k++) {
        !!(~str.indexOf(query))
    }
    var timeEnd4 = new Date() - 0;
    console.log('add !! cost time:' + (timeEnd4 - timeStart4));
    // 循環10000000次 103ms

其實，對於一次運算本身來說，相差無幾，只是在循環次數過大，比如超過了10000000次，效率才會有一些差距。

【更新 2013.10.27 17:28】通過修改后的測試，我們可以發現，“按位非”這中寫法也許並非是效率最高的，表現最好的居然是我以前常用的寫法，采用比較運算符。這確實讓我很吃驚。有時候，人往往容易被常識，表象所迷惑，但親自去嘗試后，或許會有不一樣的發現或得出其他的結果。今天，我算吸取教訓了。

在評論中，同學們都比較反對這種非常見的寫法，畢竟這些技巧可能會給閱讀代碼的同學造成困擾。如果不知道原理的話，甚至讓人費解。或許，直接用一些簡單的邏輯和常見的運算符，會是更好的選擇？你們覺得呢？

因此平時寫代碼的時候，用哪種寫法都可以。但是希望我們能將這些技巧記住，關鍵時刻或許就能派上用場。