ビット演算子のJSでの使い道


  • すべてのJavaScript数字は、根が10の64(8ビット)の浮動小数点として記憶されている.JavaScriptはタイプ言語ではありません.多くの他のプログラミング言語と違って、JavaScriptは異なるタイプの数字を定義しません.例えば、整数、短い、長い、浮動小数点などです.
  • 整数精度(小数点以下または指数カウント法を使用しない)は最大15桁です.小数精度の最大桁数は17ですが、浮動小数点演算は常に100%正確ではありません.
  • ビット演算は直接にバイナリビットを計算し、ビット演算は直接に各ビットビットを処理し、非常に低いレベルの演算であり、利点は速度が非常に速く、短所は直感的ではなく、多くの場合使えない.
  • ビット演算は整数のみに作用し、一つの演算数が整数でない場合は自動的に整数に変換して実行します.
  • JavaScript内部では、数値は64ビットの浮動小数点として保存されていますが、ビット演算を行う場合は32ビットの符号付き整数で演算され、戻り値も32ビットの符号付き整数です.
  • JSでよく使われている7桁の演算子
    位別・(AND)&&バイナリ数に対応するビットを特定の方法で組み合わせて操作し、対応するビットがすべて1であれば、結果は1であり、いずれかのビットが0であれば結果は0である.
    // 1       : 00000000 00000000 00000000 00000001
    // 3       : 00000000 00000000 00000000 00000011
    // -----------------------------
    // 1       : 00000000 00000000 00000000 00000001
    console.log(1 & 3)     // 1
    位または(OR)|| 演算子と&の違いは、対応するビットのいずれかの操作数が1であれば結果は1となる.
    // 1       : 00000000 00000000 00000000 00000001
    // 3       : 00000000 00000000 00000000 00000011
    // -----------------------------
    // 3       : 00000000 00000000 00000000 00000011
    console.log(1 | 3)     // 3
    ビット別異形(XOR)^^対応する2つの操作ビットがあり、1つしかない場合は結果が1で、他は全部0です.
    // 1       : 00000000 00000000 00000000 00000001
    // 3       : 00000000 00000000 00000000 00000011
    // -----------------------------
    // 2       : 00000000 00000000 00000000 00000010
    console.log(1 ^ 3)     // 2
    位別非(NOT)~~演算子は対位逆、1は0、0は1、つまりバイナリの逆符号を求めます.
    // 1       : 00000000 00000000 00000000 00000001
    // 3       : 00000000 00000000 00000000 00000011
    // -----------------------------
    // 1       : 11111111 11111111 11111111 11111110
    //      (   ) 1,          。JavaScript             ,         1,     ,      ,           10   。
    // -----------------------------
    // 1    1:     11111111 11111111 11111111 11111101
    //     :       00000000 00000000 00000000 00000010
    //    10     :-2
    console.log(~ 1)     // -2
    簡単な記憶:一つの数は自分のマイナス値と加算して-1になります.
    左シフト<<<<演算子は、指定された値のバイナリ数をすべて左に指定回数だけ移動させる移動規則:上位を捨て、下位を0にする、つまりすべての数字をバイナリで左に移動して対応するビット数を上位から(廃棄)、下位の空席をゼロにする.
    // 1       : 00000000 00000000 00000000 00000001
    // -----------------------------
    // 2       : 00000000 00000000 00000000 00000010
    console.log(1 << 1)     // 2
    符号付き右シフト>>>>指定されたオペランドのバイナリビットを右に移動します.右に移動されたビットは破棄され、一番左のビットをコピーして左側を塗りつぶします.新しい一番左のビットはいつも以前と同じですので、シンボルビットは変更されませんでした.だから「符号伝播」と呼ばれています.
    // 1       : 00000000 00000000 00000000 00000001
    // -----------------------------
    // 0       : 00000000 00000000 00000000 00000000
    console.log(1 >> 1)     // 0
    符号なし右シフト>>>>>>指定されたビット数は、最初の操作数を右に移動します.右に移動されたビットは破棄され、左側は0で充填されます.シンボルビットが0になったので、結果はいつも負ではない.(注:0ビット右にシフトしても、結果は負ではない.)非負の数に対しては、符号の右にシフトするか、符号のない右にシフトするかは、常に同じ結果を返します.例えば、9>>2は、2と9>>2と同じである.
    ビット演算子のjsの中の妙な使い方
    演算子を使って、一つの数のパリティを判断します.
    //    & 1 = 0
    //    & 1 = 1
    console.log(2 & 1)    // 0
    console.log(3 & 1)    // 1
    使用~>><<>>>|・整理します.
    console.log(~~ 6.83)    // 6
    console.log(6.83 >> 0)  // 6
    console.log(6.83 << 0)  // 6
    console.log(6.83 | 0)   // 6
    // >>>       
    console.log(6.83 >>> 0)   // 6
    使用^値交換を完了するために
    var a = 5
    var b = 8
    a ^= b
    b ^= a
    a ^= b
    console.log(a)   // 8
    console.log(b)   // 5
    使用&>>|rgb値と16進数の色値の変換を完了する
    /**
     * 16      RGB
     * @param  {String} hex 16       
     * @return {String}     RGB     
     */
      function hexToRGB(hex) {
        var hexx = hex.replace('#', '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 '#'+ color.toString(16)
    }
    // -------------------------------------------------
    hexToRGB('#ffffff')               // 'rgb(255,255,255)'
    RGBToHex('rgb(255,255,255)')      // '#ffffff'
    参照
    https://developer.mozilla.org...http://javascript.ruanyifeng....http://www.w3school.com.cn/js...