javascript運算子——條件、逗號、賦值、()和void運算子

小火柴的藍色理想發表於2016-07-14

前面的話

  javascript中運算子總共有46個,除了前面已經介紹過的算術運算子關係運算子位運算子邏輯運算子之外,還有很多運算子。本文將介紹條件運算子、逗號運算子、賦值運算子、()和void運算子

 

條件運算子

  條件運算子是javascript中唯一的一個三元運算子(三個運算元),有時直接稱做三元運算子。通常這個運算子寫成?:,當然在程式碼中往往不會這麼簡寫,因為這個運算子擁有三個運算元,第一個運算元在?之前,第二個運算元在?和:之間,第三個運算元在:之後

variable = boolean_expression ? true_value : false_value;

  本質上,這就是基於對boolean_expression求值的結果,決定給變數variable賦什麼值。如果求值結果是true,則給變數variable賦值true_value;如果求值結果是false,則給變數variable賦值false_value

  條件運算子的運算元可以是任意型別,第一個運算元當成布林值,如果它是真值,那麼將計算第二個運算元,並返回其計算結果。否則,如果第一個運算元是假值,那麼將計算第三個運算元,並返回其計算結果。第二個和第三個運算元總是會計算其中之一,不可能兩者同時執行

  其實使用if語句也會帶來同樣的效果,'?:'運算子只是提供了一種簡寫形式。下面是一個'?:'的典型應用場景,判斷一個變數是否有定義(並擁有一個有意義的真值),如果有定義則使用它,如果無定義則使用一個預設值:

greeting = 'hello ' + (username ? username : 'there');

  這和下面使用if語句的程式碼是等價的,但顯然上面的程式碼更加簡潔:

greeting = 'hello ';
if(username)
    greeting += username;
else
    greeting += 'there';

  三元條件表示式與if...else語句具有同樣表達效果,但是兩者有一個重大差別,if...else是語句,沒有返回值;三元條件表示式是表示式,具有返回值。所以,在需要返回值的場合,只能使用三元條件表示式,而不能使用if...else

console.log(true ? 'T' : 'F');

  上面程式碼中,console.log()方法的引數必須是一個表示式,這時就只能使用三元條件表示式

 

逗號運算子

  逗號運算子是二元運算子,它的運算元可以是任意型別。它首先計算左運算元,然後計算右運算元,最後返回右運算元的值,用逗號運算子可以在一條語句中執行多個運算

i = 0,j = 1,k = 2;
//計算結果是2,它和下面的程式碼基本等價
i =0; j = 1; k = 2;

  逗號運算子常用於宣告多個變數

var iNum1 = 1, iNum = 2, iNum3 = 3;

  逗號運算子最常用的場景是在for迴圈中,這個for迴圈通常具有多個迴圈變數:

//for迴圈中的第一個逗號是var語句的一部分
//第二個逗號是逗號運算子
//它將兩個表示式(i++和j--)放在一條語句中
for(var i=0, j=10;i<j;i++,j--){console.log(i+j);}

  逗號運算子還可以用於賦值,在用於賦值時,逗號運算子總是返回表示式中的最後一項

var num = (1,2,3,4,5);
console.log(num);//5

  [注意]去掉括號會報錯

 

賦值運算子

  簡單的賦值操作符由等號'='表示,作用是把等號右邊的值賦予等號左邊的變數或屬性

i = o;
o.x = 1;

  '='運算子希望它的左運算元是一個左值:一個變數或者物件屬性(或陣列元素)。它的右運算元可以是任意型別的任意值。賦值表示式的值就是右運算元的值

  儘管賦值表示式通常非常簡單,但有時仍會看到一些複雜表示式包含賦值表示式的情況。例如,可以將賦值和關係操作符放在一個表示式中,就像這樣:

(a=b) == 0

  如果這樣做的話,應該清楚知道'='和'=='運算子之間的區別。'='具有非常低的優先順序,通常在一個較長的表示式中用到了一條賦值語句的值時的時候,需要補充圓括號以保證正確的運算順序

  賦值操作符的結合性是從右到左,也就是說,如果一個表示式中出現了多個賦值運算子,運算順序是從右到左。因此,可以通過如下方式來對多個變數賦值:

i = j = k = 0;//把三個變數初始化為0

  javascript還提供11個複合的賦值運算子,這些複合的賦值運算子,都是先進行指定運算,然後將得到的值返回給左邊的變數

  [注意]設計這些操作符的目的是簡化賦值操作,使用它們並不會帶來任何效能的提升

total += sales_tax;
//等價於
total = total + sales_tax;
運算子      示例        等價於
+=         a+=b       a=a+b
-=         a-=b       a=a-b
*=         a*=b       a=a*b
/=         a/=b       a=a/b
%=         a%=b       a=a%b
<<=        a<<=b      a=a<<b
>>=        a>>=b      a=a>>b
>>>=       a>>>=b     a=a>>>b
&=         a&=b       a=a&b
|=         a|=b       a=a|b
^=         a^=b       a=a^b

  在大多數情況下,表示式為:

a op= b

  這裡op代表一個運算子,這個表示式和下面的表示式等價

a = a op b

  在第一行中,表示式a計算了一次,在第二行中,表示式a計算了兩次,只有在a包含具有副作用的表示式(比如函式呼叫和賦值操作)的時候,兩者才不等價

data[i++]*=2;
data[i++] = data[i++]*2;
var data = [0,1,2],i=0;
data[++i]+=10;
console.log(data);//[0,11,2]
var data = [0,1,2],i=0;
data[++i]= data[++i] + 10;
console.log(data);//[0,12,2]

 

圓括號運算子

  圓括號運算子也叫分組運算子,它有兩種用法:如果表示式放在圓括號中,作用是求值;如果跟在函式後面,作用是呼叫函式

  把表示式放在圓括號之中,將返回表示式的值

console.log((1));  //1
console.log(('a')); //'a'
console.log((1+2)); // 3

  把物件放在圓括號之中,則會返回物件的值,即物件本身

var o = {p:1};
console.log((o));// Object {p: 1}

  將函式放在圓括號中,會返回函式本身。如果圓括號緊跟在函式的後面,就表示呼叫函式,即對函式求值

function f(){return 1;}
console.log((f));// function f(){return 1;}
console.log(f()); // 1

  [注意]圓括號運算子不能為空,否則會報錯

();//SyntaxError: Unexpected token )

  由於圓括號的作用是求值,如果將語句放在圓括號之中,就會報錯,因為語句沒有返回值

console.log(var a = 1);// SyntaxError: Unexpected token var
console.log((var a = 1));// SyntaxError: Unexpected token var

 

void運算子

  void是一元運算子,它出現在運算元之前,運算元可以是任意型別,運算元會照常計算,但忽略計算結果並返回undefined。由於void會忽略運算元的值,因此在運算元具有副作用的時候使用void來讓程式更具語義

console.log(void 0); // undefined
console.log(void(0)); // undefined

【作用一】替代undefined

  由於undefined並不是一個關鍵字,其在IE8-瀏覽器中會被重寫,在高版本函式作用域中也會被重寫;所以可以用void 0 來替換undefined

var undefined = 10;
console.log(undefined);//IE8-瀏覽器下為10,高版本瀏覽器下為undefined
function t(){
    var undefined = 10;
    console.log(undefined);
}
console.log(t());//所有瀏覽器下都是10

【作用二】客戶端URL

  這個運算子最常用在客戶端URL——javascript:URL中,在URL中可以寫帶有副作用的表示式,而void則讓瀏覽器不必顯示這個表示式的計算結果。例如,經常在HTML程式碼中的<a>標籤裡使用void運算子

<a href="javascript:void window.open();">開啟一個新視窗</a>

【作用三】阻止預設事件 

  阻止預設事件的方式是給事件置返回值false

//一般寫法
<a href="http://example.com" onclick="f();return false;">文字</a>

  使用void運算子可以取代上面寫法

<a href="javascript:void(f())">文字</a>

 

參考資料

【1】 阮一峰Javascript標準參考教程——基本語法 http://javascript.ruanyifeng.com/grammar/operator.html
【2】 W3School-Javascript高階教程——一元運算子 http://www.w3school.com.cn/js/pro_js_operators_unary.asp
【3】《javascript權威指南(第6版)》第4章 表示式和運算子
【4】《javascript高階程式設計(第3版)》第3章 基本概念

 

相關文章