輕松學習JavaScript六：JavaScript的表達式與運算符 · Web前端HTML+CSS+JS初級入門

JavaScript腳本語言描述了一組用于操作數據值的運算符，包括一元運算符，布爾運算符，算術運算符，關系運算符，三元運算符，位運算符和賦值運算符。表達式是JavaScript語言的一個“短語”，包含變量名(或字面量)和運算符。最簡單的表達式時字面量或變量名。當然也有合并簡單的表達式來創建復雜的表達式。 ### 一，一元運算符 (1)遞增++和遞減-- ~~~ var box1=100; ++box1;//相當于box=box+1 document.write("box1="+box1+" ");//輸出box1=101 var box2=100; --box2;//相當于box=box2-1 document.write("box2="+box2);//輸出box2=99 ~~~ 前置和后置的區別 ~~~ var box=100; var age=++box;//box先累加1為101，再賦值給age為101 var height=box++;//box先賦值給height為101,box再累加為102 document.write("age="+age+" ");//輸出age=101 document.write("height="+height+" ");//輸出height=101 document.write("box="+box);//輸出box=102，原因是box經過了兩次累加，所以是102 ~~~ 在沒有賦值操作，前置和后置是一樣的。但在賦值操作時，如果遞增或遞減運算符前置，那么前置的運算符會先累加或累減再賦值，如果是后置運算符則先賦值再累加或累減。 (2)加和減運算符用于取正或取負運算，也有把數字字符串轉換為數值形式的功能。 ~~~ var box = "20"; document.write(typeof box+" "); //輸出string var age=-box; document.write(age+" ");//輸出-20 document.write(typeof age); //輸出number ~~~ ### 二，算術運算符 JavaScript語言中規定了五種算術運算符，即+，-，*，/和%(取余)。如果在算術運算符的值不是數值，那么它會先使用Number()轉型函數將其轉換為數值(隱式轉換)。 ~~~ var box=100+"100"; document.write("box="+box+" ");//輸出100100 document.write(typeof box);//輸出string ~~~ 這是為什么呢？JavaScript語言中的做算術運算時，只要其中一個是字符串，那么結果就會轉換為字符串。相當于字符串連接符，不能再算作是加法算術運算符。 ~~~ var box="100"-10; document.write("box="+box+" ");//輸出90 var age=5/4; document.write("age="+age+" ");//輸出1.25 var height=("你的年齡是："+(10+10));//括號強制優先級 document.write(height);//輸出你的年齡是：20 ~~~ 取余 ~~~ var box=10%3; document.write("box="+box);//輸出1 ~~~ ### 三，關系運算符用于進行比較的運算符稱作為關系運算符：<(小于)，>(大于)，<=(小于等于)，>=(大于等于)，==(相對)，!=(不等)，===(恒等或全等)，!==(不全等或不恒等)。關系運算符大多數返回的是一個布爾值。和其他運算符一樣，當關系運算符操作非數值時要遵循以下規則： 1，兩個操作符都是數值，則數值比較 2，兩個操作數都是字符串，則比較兩個字符串對應的字符編碼值 3，兩個操作數有一個是數值，則將另一個轉換為數值，在進行數值比較 4，兩個操作數有一個是對象，則先調用value()方法或toString()方法，再用結果比較。 ~~~ var box1=3>2; document.write(box1+" ");//輸出true var box2="3">22; document.write(box2+" ");//輸出false var box3="3">"22"; document.write(box3+" ");//輸出true var box4="a">"B";//a為97，B為66 document.write(box4+" ");//輸出true var box5= "Blue"<"alpha";//Blue的第一個字母是B，alpha的第一個字母是a，a為97，B為66 document.write(box5) //輸出true ~~~ 在相等和不等的比較上，如果操作數是非數值，則遵循以下規則： 1，一個操作數是布爾值，則比較之前將其轉換為數值，false轉成0，true轉成1。 2，一個操作數是字符串，則比較之前將其轉成為數值再比較。 3，一個操作數是對象，則先調用value()方法或toString()方法再比較。 4，不需要任何轉換的情況下，null和undefined是相等的 5，一個操作數是NaN，則==返回false，!=返回true，并且NaN和自身不等 6，兩個操作數都是對象，則比較它們是否是同一個對象，如果都指向同一個對象，則返回true，否則返回false 7，在全等和全不等的判斷上，比如值和類型都相等，才返回true，否則返回fasle。 ~~~ var box1='2'==2; document.write(box1+" ");//輸出true，比較的只是數值 var box2={}=={}; document.write(box2+" ");//輸出false，因為比較的是它們的地址，每個新創建對象的引用地址都不同。 var box3=null==undefined; document.write(box3+" ");//輸出true，因為均為空數值 var box4='2'===2; document.write(box4+" ");//輸出false，兩個操作數的數據類型不相等 var box5=null===undefined; document.write(box5);//輸出false，兩個操作數的數據類型不相等 ~~~ ### 四，邏輯運算符 JavaScript語言中的邏輯運算符通常作用于布爾值的操作，一般和關系運算符配合使用，有三個邏輯運算符：&&(邏輯與)，||(邏輯或)和!(邏輯非)。 (2)&&表示兩邊都必須是true，才返回true。如果兩邊的操作數有一個操作數不是布爾值的情況下，與運算就不一定返回布爾值，此時遵循下面的規則： 1，第一個操作數是對象，則返回第二個操作數 2，第二操作數是對象，則第一個操作數返回true，才返回第二個操作數，否則返回false 3，一個操作數是null，則返回null 4，一個操作數是undefined，則返回undefined 5，如果一個運算數是對象，另一個是 Boolean 值，返回該對象邏輯與運算符屬于短路操作，如果有第一個操作數返回的是false，第二個不管是true還是false都返回false。 ~~~ var box1={}&&(5>4); document.write(box1+" ");//輸出true var box2=(5>4)&&{}; document.write(box2+" ");//輸出[object Object] var box3=(3>4)&&{}; document.write(box3);//輸出false ~~~ (2)||表示兩邊有一個是true，就返回true。如果兩邊的操作數有一個操作數不是布爾值的情況下，與運算就不一定返回布爾值，此時遵循下面的規則： 1，第一個操作數是對象，則返回第一個個操作數 2，第一個操作數的求值結果為fasle，則返回第二個操作數 3，兩個操作數都是對象，則返回第一個操作數 4，兩個操作數都是null，則返回null 5，兩個操作數都是undefined，則返回undefined 6，兩個操作數都是NaN，則返回NaN 邏輯或運算符也屬于短路操作，如果有第一個操作數返回的是true，第二個不管是true還是false都返回true。 ~~~ var box1={}||(5>4); document.write(box1+" ");//輸出[object Object] var box2=(5>4)||{}; document.write(box2+" ");//輸出true var box3=(3>4)||{}; document.write(box3);//輸出[object Object] ~~~ (3)!邏輯非運算符可以作用與任何值，無論這個值是什么數據類型，這個運算符都會返回一個布爾值，它的流程是：先將這個值轉換成布爾值，然后取反，規則如下： 1，操作數是一個對象，返回false 2，操作數是一個空字符串，返回true 3，操作數是一個非空字符串，返回false 4，操作數是數值0，返回true 5，操作數是任意非0數值，返回false 6，操作數是null，返回true 7，操作數是NaN，返回true 8，操作數是undefined，返回true ~~~ var box=!{}; document.write(box);//輸出false ~~~ ### 五，位運算符 JavaScript語言中包括了七種位運算符：~(位非)，&(位與)，|(位或)，^(位異或)，<<(左移)，>>(有符右移號)，>>>(無符號右移) (1)位非(~)運算把運算數轉換成32位數字，然后把二進制數轉換成它的二進制反碼，最后把二進制數轉換成浮點數。實質上是對數字求負，然后減去1即為所得值。 ~~~ var box=~25; document.write(box);//輸出-26 ~~~ (2)位與(&)運算直接對數字的二進制形式進行運算，然后對上下同一位置的兩個數位進行與運算，只有兩個數位都為1時才得出1，其余的均為0. ~~~ var box=25&3; document.write(box);//輸出1 ~~~ (3)位或(|)運算也是直接對數字的二進制形式進行計算，然后對上下同一位置的兩個數位進行或運算，只右兩個數位都為0時才得出0，其余的均為1. ~~~ var box=25|3; document.write(box);//輸出27 ~~~ (4)位異或(^)也是直接對二進制形式進行運算。當只有一個數位存放的是1時，它才返回1。其余的返回0。也就是兩個數位相同時返回0，不同時返回1. ~~~ var box=25^3; document.write(box);//輸出26 ~~~ (5)左移運算也是對二進制數進行操作，相等于第一個操作數乘以(2的左移位數次冪)的積。 ~~~ var box=25<<3; document.write(box);//25左移3位相當于25乘以(2的3次冪),因此輸出200 ~~~ (6)有符號右移運算也是對二進制數進行操作，相等于第一個操作數除以(2的右移位數次冪)的商。 ~~~ var box=24>>2; document.write(box);//輸出6 ~~~ (7)無符號右移運算也是對二進制數進行操作，對于正數，與有符號右移是相同的結果，但是對于負數，就會有所不同。具體詳細的了解ECMAScript 位運算符，可以訪問[ECMAScript位運算符](http://www.w3school.com.cn/js/pro_js_operators_bitwise.asp)。 ### 六，賦值運算符賦值運算符包括：=()，+=()，-=()，*=()，/=()，%=()，<<=()，>>=()，>>>=()。 ~~~ var box=100; box+=100;//相當于box=box+100 document.write("box="+box);//輸出box=200 ~~~ ### 七，其他運算符 1，字符串運算符：“+”，它的作用是將兩個字符串想加。規則：只要有一個字符串即可。 ~~~ var box=100+"10"'; document.write("box="+box);//輸出100100 ~~~ 2，逗號運算符，可以在一條語句中執行多個操作 ~~~ var box=100,age=200,height=300; document.write("box="+box);//輸出box=100 ~~~ 3，三元操作符： ~~~ var box=(3>4)?"對":"錯"; document.write(box);//輸出錯 ~~~ 如果想更詳細的了解ECMAScript運算符的知識，可以訪問JavaScript高級教程中的[ECMASscript一元運算符]()。這個系列中有詳細的運算符教程。對于JS的運算符來說，我們可以對比著C++，C#和Java來學，這個還是相當的容易的。