條件語句用於基於不同的條件來執行不同的動作。
條件語句
通常在寫代碼時,您總是需要為不同的決定來執行不同的動作。您可以在代碼中使用條件語句來完成該任務。
在JavaScript 中,我們可使用以下條件語句:
•if 語句- 只有當指定條件為true 時,使用該語句來執行代碼
•if...else 語句- 當條件為true 時執行代碼,當條件為false 時執行其他代碼
•if...else if....else 語句- 使用該語句來選擇多個代碼塊之一來執行
•switch 語句- 使用該語句來選擇多個代碼塊之一來執行
If 語句
只有當指定條件為true 時,該語句才會執行代碼。
文法
複製代碼代碼如下:
if (條件)
{
只有當條件為true 時執行的代碼
}
注意:請使用小寫的if。使用大寫字母(IF)會生成JavaScript 錯誤!
實例
當時間小於20:00 時,生成一個“Good day”問候:
複製代碼代碼如下:
if (time<20)
{
x="Good day";
}
x 的結果是:
Good day
親自試一試
請注意,在這個語法中,沒有..else..。您已經告訴瀏覽器只有在指定條件為true 時才執行代碼。
If...else 語句
請使用if....else 語句在條件為true 時執行代碼,在條件為false 時執行其他代碼。
文法
複製代碼代碼如下:
if (條件)
{
當條件為true 時執行的代碼
}
else
{
當條件不為true 時執行的代碼
}
實例
當時間小於20:00 時,將得到問候"Good day",否則將得到問候"Good evening"。
複製代碼代碼如下:
if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}
x 的結果是:
Good day
親自試一試
If...else if...else 語句
使用if....else if...else 語句來選擇多個代碼塊之一來執行。
文法
複製代碼代碼如下:
if (條件1)
{
當條件1 為true 時執行的代碼
}
else if (條件2)
{
當條件2 為true 時執行的代碼
}
else
{
當條件1 和條件2 都不為true 時執行的代碼
}
實例
如果時間小於10:00,則將發送問候"Good morning",否則如果時間小於20:00,則發送問候"Good day",否則發送問候"Good evening":
複製代碼代碼如下:
if (time<10)
{
x="Good morning";
}
else if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}
x 的結果是:
Good morning
在javascript中,哪些值能作為if的條件呢
1、布爾變量true/false
2、數字非0,非NaN/ (0 或NaN)
見下面的例子,莫以為負數就以為if語句為假了。
複製代碼代碼如下:
var i = -1;
if(i){
alert('here');
}else{
alert('test is ok!');
}
3、對象非null/(null或undefined)
4、字符串非空串(“”)/空串("")
綜上所述,對於字符串,不用寫一大堆if(str!=null && str!=undefined && str !=''), 只要用一句
複製代碼代碼如下:
if(!str){
//do something
}
就可以了。
對於數字的非空判斷,則要考慮使用isNaN()函數,NaN不和任何類型數據相等,包括它本身,只能用isNaN()判斷。對於數字類型,if(a)語句中的a為0時if(a)為假,非0時if(a)為真
複製代碼代碼如下:
var b;
var a = 0;
a = a + b;
if(a){
alert('1');
}else{
alert('2');
}
if(isNaN(a)){
alert('a is NaN');
}
javascript教程:關於if語句優化的方法if簡寫
UglifyJS是一個對javascript進行壓縮和美化的工具,在它的文檔說明中,我看到了幾種關於if語句優化的方法。儘管我還沒使用它去做一些嘗試性的測試,但從這裡可以看到它的確對js作了美化的工作。也許有人認為if語句就那麼簡單,能優化到什麼程度?但是看看以下的幾種方式,你也許會改變看法。
一、使用常見的三元操作符
if (foo) bar(); else baz(); ==> foo?bar():baz();
if (!foo) bar(); else baz(); ==> foo?baz():bar();
if (foo) return bar(); else return baz(); ==> return foo?bar():baz();
對於以上使用三元操作符來優化if語句你肯定不會陌生,或許你經常使用它。
武林網給出的例子:
複製代碼代碼如下:
<script>
var i=9
var ii=(i>8)?100:9;
alert(ii);
</script>
輸出結果:
100
二、使用and(&&)和or(||)運算符
if (foo) bar(); ==> foo&&bar();
if (!foo) bar(); ==> foo||bar();
老實說,我並沒有這樣去寫過代碼,這種寫法我在學習《鳥哥的Linux 私房菜》時看到過,但我並沒想到在js中實現它。
三、省略大括號{}
if (foo) return bar(); else something(); ==> {if(foo)return bar();something()}
這種寫法你我都很熟悉,但我建議在代碼優化的時候這樣做,或者交給UglifyJS幫你去解決。畢竟少一個大括號,代碼的可閱讀性並不高。
寫到這裡,我想到jQuery之父在《精通JavaScript》中的一個獲取HTML元素屬性的方法。
function getAttr(el, attrName){
var attr = {'for':'htmlFor', 'class':'className'}[attrName] || attrName;
};
如果我們不這樣寫,可能我們需借助於兩個if語句來進行處理,而上面的代碼不僅簡潔有效,而且可閱讀性強。
仔細想想,好些時候我們都能找到解決問題的有效途徑,但關鍵在於我們是否用心去尋找一種更好的途徑。
【javascript技巧】if(x==null)簡寫
if(x==null)或if (typeof (x) == 'undefined')可以簡寫為if(!x),未驗證。
反之if(x)表示x非空
判斷對像是否存在
複製代碼代碼如下:
if(document.form1.softurl9){
//判斷是否存在softurl9,防止js出錯
}
複製代碼代碼如下:
if(document.getElementById("softurl9")){
//判斷是否存在softurl9,防止js出錯
}