DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 淺談javascript運算符——條件,逗號,賦值,()和void運算符
淺談javascript運算符——條件,逗號,賦值,()和void運算符
編輯:關於JavaScript     

前面的話

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;

圓括號運算符  

圓括號運算符有兩種用法:如果表達式放在圓括號中,作用是求值;如果跟在函數後面,作用是調用函數

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

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

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

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>

以上這篇淺談javascript運算符——條件,逗號,賦值,()和void運算符就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved