網頁設計實戰之JavaScript(3) -- 運算符與表達式

一、運算符

表達式可以由變量、字面量、運算符組成。但 運算符無法單獨構成表達式。
每一個合法的表達式都有一個值(運算的結果)。

所有運算符可分爲單目運算符、雙目運算符、三目運算符三類。

分類 需要操作數數目 運算符
單目運算符 ++ 、-- 、!
雙目運算符 + 、- 、*、 / 、%
三目運算符 ?:

運算符的分類根據運算符形成表達式所需操作數個數而定。

1、算術運算符

運算符 描述 表達式 值(運算結果)
+ 加法 1+2 3
- 減法 5-1 4
* 乘法 5*2 10
/ 除法 15/3 5
% 取模(餘數) 9%2 1

2、自增減運算符

自增運算符的功能:讓變量自身的值加 1 .變量名++ 或者 ++變量名
自減運算符的功能:讓變量自身的值減 1 .變量名-- 或者 --變量名

運算符 描述 表達式 值(運算結果)
++ 自增 1++、3++ 2、4
自減 3–、--4 2、3

3、賦值運算符

賦值運算符用於給 JavaScript 變量賦值。
賦值運算符構成的表達式稱爲 賦值表達式,表達式的值:賦值號 ( = ) 左邊變量被賦值之後的值 .
下式中,如果a爲10:

運算符 表達式 等同於 表達式的值
= a=10 10
+= a+=2 a=a+2 12
-= a-=2 a=a-2 8
*= a*=5 a=a*5 50
/= a/=5 a=a/5 2
%= a%=3 a=a%3 1

賦值運算符的左邊(左操作數)必須是變量!,不能是常量,如:
2=a*10;// 不可以。

4、+算符與非常數字常量

var a = 10;                                   
                                              
//字符串+字符串                                     
console.log('a的值爲:'+'10');      //"a的值爲:10"   
                                              
//字符串+非字符串                                    
console.log('a的值爲:'+a);         //"a的值爲:10"   
console.log('a的值爲:'+true);      //"a的值爲:true" 
console.log('a的值爲:'+null);      //"a的值爲:null" 
console.log('a的值爲:'+a+a+'.');   //"a的值爲:1010."
                                              
//數字+非數字                                      
console.log(10+true);   //11                  
console.log(10+false);  //10                  
console.log(10+null);   //10

+運算符是雙目運算符:

  • 當左右兩個操作數中至少有一個是字符串時,+號起到的作用是字符串連接(原理: js 會將非字符串數據轉爲字符串,然後連接成一個新字符串)。
  • 數字+非字符串值,+號起到的作用依然是加法運算(原理:非字符串值會被轉爲數字,然後執行相加運算)。

5、關係運算符

關係運算符組成的表達式稱爲 關係表達式,如:表達式 1 < 表達式 2 . 其值只有: true 、 false

運算符 描述 表達式 值(運算結果)
< 小於 1<2 true
<= 小於等於 3<=4 true
> 大於 3>4 false
>= 大於等於 3>=4 false
== 等於 3==4 false
!= 不等於 3!=4 true
=== 全等 3===4 false
!== 不全等 3!==4 true

== 與 === 的區別:== 只比較左右兩個操作數的值,===會比較左右兩個操作數的值和類型(值和類型必須都相等)。

關係表達式經常用在邏輯判斷場合(如和 if 配合使用),所以其值是布爾值(邏輯值)。

5、邏輯運算符

邏輯運算符組成的表達式稱爲 邏輯表達式。

運算符 描述 表達式 值(運算結果)
&& 邏輯與 false && false、true&& true、false&&true、true&&false false、true 、false、 false
|| 邏輯 或 false ||false、true||true、false||true、true||false false、true、true、true
! 邏輯非 !false 、!true true 、false

在 JavaScript 中 false 、 0 、 null 、 ‘’ 、 undefined 、 NaN 都代表邏輯假,其他情況都是邏輯真。

6、條件運算符(三目運算符)

?:是所有運算符中唯一的一個三目運算符,組成的表達式爲:子表達式 1 ?子表達式 2 :子表達式 3.

運算邏輯:先計算子表達式 1 ,如果子表達式 1 爲真,子表達式 2 的值作爲整個表達式的值;如果子表達式 1 爲假,子表達式 3 的值作爲整個表達式的值。

表達式 表達式的值
1>2 ? 1+2 : 1*2 2
3>2 ? 3+2 : 1*2 5

7、逗號運算符

所有運算符中優先級最低的運算符,組成的表達式爲:子表達式 1 ,子表達式 2 ,子表達式 3 ,…
運算邏輯:從左到右 依次計算每個子表達式,最後一個子表達式的值作爲整個表達式的值。

var a = (5, 6, 3, 4, 7);  
var b = (1, 2, 3, 4, a++);

8、位運算符

  • 位運算符要求它的操作數是整數
  • 位運算符會將NaN、Infinity和-Infinity都轉換爲0
運算符 描述 表達式 值(運算結果)
& 0& 1、1& 1 0、1
0|0、0|1、1|1 0、1、1
^ 異或 2^ 3 1
~ 按位非 ~2 1
<< 左移 2<<1 4
>> 帶符號右移 8>>2 2
>>> 無符號右移 8>>2 2

9、其它算符

運算符 描述 表達式 值(運算結果)
typeof 取操作數類型 typeof “test” string
void 操作數可以是任意類型 void window.open()
delete 刪除對象屬性或者數組元素 var a = [1,2,3];delete a[2];
instanceof 判斷是否是某類的實例 d instanceof Date; true
eval 解釋運行由JavaScript源代碼組成的字符串,併產生一個值 eval(“3+2”); 5

二、表達式中的算符優先級

在計算表達式時控制運算符執行的順序。具有較高優先級的運算符先於較低優先級的運算符執行。例如,乘法的執行先於加法。
具有相同優先級的運算符按從左至右的順序求值。

運算符 描述
.、 [ ]、 () 字段訪問、數組下標、函數調用以及表達式分組
++、 – 、-、 ~ ! delete new typeof void 一元運算符、返回數據類型、對象創建、未定義值
*、 / 、% 乘法、除法、取模
+、 - 、+ 加法、減法、字符串連接
<< 、>>、 >>> 移位
<、 <=、 >、 >= 、instanceof 小於、小於等於、大於、大於等於、實例判斷
==、 != 、=== 、!== 等於、小於、小於等於、大於、大於等於、instanceof
& 按位與
^ 按位異或
按位或
&& 邏輯與
|| 邏輯或
?: 條件
= 、-=、+= 賦值、運算賦值
, 多重求值

圓括號可用來改變運算符優先級所決定的求值順序。這意味着圓括號中的表達式應在其用於表達式的其餘部分之前全部被求值。
xx = 12 * (6 + 3 + 5)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章