一文讀懂JavaScript位的與、或、異或、取反及左移右移操作

avaScript基礎教程二進制位運算

JavaScript中的位運算是針對二進制數據提供的運算與操作。在JavaScript標準中規定了二進制位運算時其操作數長度為32位，其最高位為符號位，因此能夠表示的有效數字位數為31位。本節主要介紹JavaScript中的二進制位的運算。

位運算基本操作符及說明

與其他程序設計語言類似，JavaScript所提供的二進制位運算主要包括AND（按位與運算）、OR（按位或運算）、XOR（按位異或運算）及左移、右移等相關操作。各類型操作描述如下表所示：

JavaScript二進制位操作符

位運算基本操作如描述如上表所示，此處需要注意問題是不要將二進制位運算與邏輯運算的And（與）、OR（或）、NOT（非）概念記混。由于JavaScript使用32位進行數值的二進制計算，因此在進行位操作時首先需要將10進制數值轉換為二進制，然后按照二進制位操作要求進行位的操作。與運算、或運算、異或運算較為簡單，只需要明確概念即可完成運算，我們將對非運算、左移、右移三個運算進行說明。

1、非運算

從定義可知非運算主要通過反轉操作數完成計算，程序在具體執行非運算時按照以下步驟執行，以正數9為例對其進行非運算過程進行說明。

① 10進制轉為32位二進制原碼，符號位為0（正數）。如下表所示：

原碼

② 將原碼安位進行取反，結果如下：

按位取反獲取反碼

③ 此時我們得到是在內存中保存的形式（補碼），需要將其轉化為原碼形式。從符號位可知反碼為負數，因此需要按照補碼轉原碼規則除符號位之外取反加1可獲取對應原碼。

計算結果

對于二進制非運算我們說明如上所示，因此9的非運算結果為-10，同理可以計算一個負數的非運算結果。作為負數時首先需要將其原碼轉為內存表示的補碼，即除符號位之外其他位取反加一。在進行按位非運算，并將計算結果轉換為原碼。其過程描述如下圖所示。

負數的按位與運算

計算結果可知最高位為1，即正數。正數的補碼與原碼相同，顧可知最終計算結果為8。即~（-9）=8；

2、左移、右移問題

按照位的左移與右移只需要注意按照規則要求左右移動指定位數，左移需要在右側補充0，以保證位數，右移需要舍棄左側對應的位數等。舉例描述9<<2位操作過程示意如下（為方便演示我們以8位為例進行說明）：

左移操作

左移操作描述如上圖所示，可知9<<2 的結果為36。

以上給出JavaScript程序設計語言中二進制位操作，并重點對按位取反操作及左移、右移操作進行了說明。本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯系作者，共同探討。更多程序設計相關教程及實例分享，期待大家關注與閱讀！系列教程鏈接如下：

JavaScript基礎教程（三）64位浮點數加法運算

JavaScript基礎教程（二）變量、常量與運算符

JavaScript基礎教程（一）課程說明

transform屬性

在CSS3中，可以利用transform功能實現文字或圖像的旋轉、縮放、傾斜、移動這4中類型的變形處理。

（1）瀏覽器支持

到目前為止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上瀏覽器支持該屬性。

2 旋轉

使用rotate方法，在參數中加入角度值，角度值后面跟表示角度單位的“deg”文字即可，旋轉方向為順時針方向。

transform：rotate（45deg）；

3 縮放

使用scale方法來實現文字或圖像的縮放處理，在參數中指定縮放倍率。

transform：scale（0.5）；//縮小一半

（1）可以分別指定元素的水平方向的放大倍率與垂直方向的放大倍率

transform：scale（0.5，2）；//水平方向縮小一半，垂直方向放大一倍。

4 傾斜

使用skew方法實現文字或圖像的傾斜處理，在參數中分別指定水平方向上的傾斜角度與垂直方向上的傾斜角度。

transform：skew（30deg，30deg）；//水平方向上傾斜30度，垂直方向上傾斜30度。

（1）只使用一個參數，省略另一個參數

這種情況下視為只在水平方向上進行傾斜，垂直方向上不傾斜。

transform：skew（30deg）；

5 移動

使用translate方法來移動文字或圖像，在參數中分別指定水平方向上的移動距離與垂直方向上的移動距離。

transform：translate（50px，50px）；// 水平方向上移動50px，垂直方向上移動50px

（1）只使用一個參數，省略另一個參數

這種情況下視為只在水平方向上移動，垂直方向上不移動。

transform：translate（50px）；

6 對一個元素使用多種變形的方法

transform：translate（150px，200px） rotate（45deg） scale（1.5）；

7 指定變形的基準點

在使用transform方法進行文字或圖像變形的時候，是以元素的中心點為基準點進行變形的。

transform-origin屬性

使用該屬性，可以改變變形的基準點。

transform：rotate（45deg）；
transform-origin：left bottom；//把基準點修改為元素的左下角

（1）指定屬性值

基準點在元素水平方向上的位置：left、center、right

基準點在元素垂直方向上的位置：top、center、bottom

8 3D變形功能

（1）旋轉

分別使用rotateX方法、rotateY方法、rotateZ方法使元素圍繞X軸、Y軸、Z軸旋轉，在參數中加入角度值，角度值后面跟表示角度單位的deg文字即可，旋轉方向為順時針旋轉。

transform：rotateX（45deg）；
transform：rotateY（45deg）；
transform：rotateZ（45deg）；
transform：rotateX（45deg） rotateY（45deg） rotateZ（45deg）；
transform：scale（0.5） rotateY（45deg） rotateZ（45deg）；

（2）縮放

分別使用scaleX方法、scaleY方法、scaleZ方法使元素按X軸、Y軸、Z軸進行縮放，在參數中指定縮放倍率。

transform：scaleX（0.5）；
transform：scaleY（1）；
transform：scaleZ（2）；
transform：scaleX（0.5）scaleY（1）；
transform：scale（0.5） rotateY（45deg）；

（3）傾斜

分別使用skewX方法、skewY方法使元素在X軸、Y軸上進行順時針方向傾斜（無skewZ方法），在參數中指定傾斜的角度

transform：skewX（45deg）；
transform：skewY（45deg）；

（4）移動

分別使用translateX方法、translateY方法、translateZ方法、使元素在X軸、Y軸、Z軸方向上進行移動，在參數中加入移動距離。

transform：translateX（50px）;
transform：translateY（50px）;
transform：translateZ（50px）;

9 變形矩陣

每種變形方法的背后都存在著一個對應的矩陣。

（1）計算2D變形（3 X 3矩陣）

可以將這個2D變形矩陣書寫為matrim（a,b,c,d,e,f）,a~f均代表一個數字，用于決定怎樣執行變形處理。

（2）平移的2D矩陣

//效果一致：右移150px，下移150px
transform：matrix（1，0,0,1，150，150）；
transform：translate（150px，150px）；

（3）計算3D變形

3D縮放變形使用的4X4矩陣

transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);

//效果一致：X軸方向上縮小五分之一，Y軸方向上縮小一半。
transform:scale3d(0.8,0.5,1);
transform:matrix3d(0.8,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1);

（4）可通過矩陣執行多重變形處理

將需要的變形矩陣相乘得到一個新的變形矩陣可實現該處理。

s實現左右框互移

需求：如上圖所示，左框和右框中分別有值。當點選左框中一個或多個值后，再點擊中間向右箭頭按鈕，則選中值會從左框中消失并在右框中出現；同理點選右框值，也能移動到左側。

思路：1、左右框分別使用select標簽，框內值為option標簽（便于取值），且設置multiple支持多選。

2、當點擊箭頭按鈕時運行js函數goright（），獲取所有左側已選中option值，并在右框末尾填加，然后清除左框選中值。

實現代碼：

<html>

<scripttype="text/javascript">

function goright(j){

var test2=document.test2;

if(j>0){

varleft=test2.list.options;

varright=test2.fly.options;

}else{

varleft=test2.fly.options;

varright=test2.list.options;

}

for(var i=0;i< left.length;i++){

if(left[i].selected){

new_option= newOption(left[i].text,left[i].value);

right[right.length]=new_option;

left[i]=null;

}

</script>

<body>

<tr>

<divstyle="float:left;">

<optionvalue="http://www.baidu.com">百度

<optionvalue="http://sina.cn">新浪

<option value="3">360

<option value="4">開心網

<option value="5">校內網

<option value="6">58同城

<option value="7">趕集

<option value="8">財富

</select>

</div>

<h2style="font-size:25px;position:reletive;margin-top:50px;background:#ccc;"onclick="goright(1);">--></h2>

<h2style="font-size:25px;position:reletive;top:30px;background:#ccc;"onclick="goright(-1);"><--</h2>

</div>

<selectsize="10" name="fly" multiplestyle="width:300px;">

</select>

</div>

</tr>

</body>

</html>

問題總結：

1，通過給goright()傳值1和-1來判斷是左移還是右移實現了簡單通用，但是同一頁面有更多表單則不能實現。

2，選擇多項移動會發現只有半數值實現了移動，說明代碼存在bug.

分析：

1，為了實現更加的通用性，需要傳送三個值，表單名稱，左框名稱，右框名稱。但是傳參為字符串，而取值為dom，所以要用到eval();

2,在上面的例子出現bug,是因為首先獲取選取數量，然后根據下標依次移動，但是移動一次后總數量發生了變化，相對下標也發生了變化。第二次移動下標為1的值其實是移動的第三個選取值。因此for循環由i++改為i--;采用倒序移動。

改動代碼如下：

functiongoright(f,i,j){

var left=eval(f+"."+i);

var right=eval(f+"."+j);

var text='';

for( var k=left.options.length-1;k>=0;k--){

if(left.options[k].selected){

new_option=new Option(left.options[k].text,left.options[k].value);

right.options[right.options.length]=new_option;

left.options[k]=null;

}

需求2：雙擊左框內值，則會移動到右側；同理雙擊右框內值則會移動到左側；

思路：在select標簽內加入ondblclick="goright()”;雙擊執行goright()函數。

改動代碼：

。。。。。

拓展需求：使用鼠標左鍵拖動實現多選，本人在網上找了很多，一直沒有實現。日后找到方法再貼出。

在線咨詢

上一篇：快速了解JavaScript選擇框操作
下一篇：如何自學HTML

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

一文讀懂JavaScript位的與、或、異或、取反及左移右移操作

位運算基本操作符及說明

transform屬性

2 旋轉

3 縮放

4 傾斜

5 移動

6 對一個元素使用多種變形的方法

7 指定變形的基準點

8 3D變形功能

9 變形矩陣

您的項目需求