javascript if 條件

2018-08-12 10:53 更新

javascript中的if語句使用介紹


在javascript中的一些選擇語句: 

1、if語句 當指定條件為true的時候,就執(zhí)行該條件的代碼。 
2、if...else...語句 當該語句指定條件為true時則執(zhí)行該代碼,如果當條件執(zhí)行為false時則執(zhí)行其他代碼。 
3、if...else if...else...語句 該語句是選擇多個代碼一起執(zhí)行。 
4、switch 語句 選擇多個代碼一起執(zhí)行。 

if語句 
if(條件){ 
當條件為true時執(zhí)行的代碼; 


例: 

代碼如下:

<script> 
function myFunction() 

var x=""; 
var time=new Date().getHours(); 
if (time<20) 

x="Good day"; 

document.getElementById("demo").innerHTML=x; 

</script> 

if...else...語句 
if(條件){ 
當條件為true時,執(zhí)行代碼 
}else{ 
當條件不為true時(條件為false),執(zhí)行的代碼; 

例: 

代碼如下:

<script> 
function myFunction() 

var x=""; 
var time=new Date().getHours(); 
if (time<20) 

x="Good day"; 

else 

x="Good evening"; 

document.getElementById("demo").innerHTML=x; 

</script> 

if...else if...else...語句 
if(條件1){ 
當條件1為true時,執(zhí)行代碼; 
}else if(條件2){ 
當條件2為true時,執(zhí)行代碼; 
}else{ 
當條件1和2 都不為true時 ,執(zhí)行的代碼; 

例: 

代碼如下:

<script> 
function myFunction() 

var x=""; 
var time=new Date().getHours(); 
if (time<10) 

x="Good morning"; 

else if (time<20) 

x="Good day"; 

else 

x="Good evening"; 

document.getElementById("demo").innerHTML=x; 

</script> 


javascript if條件判斷方法


條件語句用于基于不同的條件來執(zhí)行不同的動作。

條件語句

通常在寫代碼時,您總是需要為不同的決定來執(zhí)行不同的動作。您可以在代碼中使用條件語句來完成該任務。

在 JavaScript 中,我們可使用以下條件語句:

?if 語句 - 只有當指定條件為 true 時,使用該語句來執(zhí)行代碼
?if...else 語句 - 當條件為 true 時執(zhí)行代碼,當條件為 false 時執(zhí)行其他代碼
?if...else if....else 語句 - 使用該語句來選擇多個代碼塊之一來執(zhí)行
?switch 語句 - 使用該語句來選擇多個代碼塊之一來執(zhí)行

If 語句

只有當指定條件為 true 時,該語句才會執(zhí)行代碼。

語法


代碼如下:

if (條件)
  {
  只有當條件為 true 時執(zhí)行的代碼
  }

注意:請使用小寫的 if。使用大寫字母(IF)會生成 JavaScript 錯誤!

實例
當時間小于 20:00 時,生成一個“Good day”問候:


代碼如下:

if (time<20)
  {
  x="Good day";
  }

x 的結(jié)果是:

Good day

親自試一試

請注意,在這個語法中,沒有 ..else..。您已經(jīng)告訴瀏覽器只有在指定條件為 true 時才執(zhí)行代碼。
If...else 語句
請使用 if....else 語句在條件為 true 時執(zhí)行代碼,在條件為 false 時執(zhí)行其他代碼。

語法


代碼如下:

if (條件)
  {
  當條件為 true 時執(zhí)行的代碼
  }
else
  {
  當條件不為 true 時執(zhí)行的代碼
  }
 

實例
當時間小于 20:00 時,將得到問候 "Good day",否則將得到問候 "Good evening"。


代碼如下:

if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }
 

x 的結(jié)果是:

Good day

親自試一試
If...else if...else 語句
使用 if....else if...else 語句來選擇多個代碼塊之一來執(zhí)行。

語法


代碼如下:

if (條件 1)
  {
  當條件 1 為 true 時執(zhí)行的代碼
  }
else if (條件 2)
  {
  當條件 2 為 true 時執(zhí)行的代碼
  }
else
  {
  當條件 1 和 條件 2 都不為 true 時執(zhí)行的代碼
  }

實例
如果時間小于 10:00,則將發(fā)送問候 "Good morning",否則如果時間小于 20:00,則發(fā)送問候 "Good day",否則發(fā)送問候 "Good evening":


代碼如下:

if (time<10)
  {
  x="Good morning";
  }
else if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }

x 的結(jié)果是:

Good morning

在javascript中,哪些值能作為if的條件呢

1、布爾變量true/false
2、數(shù)字非0,非NaN/ (0 或NaN)

見下面的例子,莫以為負數(shù)就以為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
}

就可以了。

對于數(shù)字的非空判斷,則要考慮使用isNaN()函數(shù),NaN不和任何類型數(shù)據(jù)相等,包括它本身,只能用isNaN()判斷。對于數(shù)字類型,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教程:關(guān)于if語句優(yōu)化的方法 if簡寫

UglifyJS是一個對javascript進行壓縮和美化的工具,在它的文檔說明中,我看到了幾種關(guān)于if語句優(yōu)化的方法。盡管我還沒使用它去做一些嘗試性的測試,但從這里可以看到它的確對js作了美化的工作。也許有人認為if語句就那么簡單,能優(yōu)化到什么程度?但是看看以下的幾種方式,你也許會改變看法。


一、使用常見的三元操作符

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();

對于以上使用三元操作符來優(yōu)化if語句你肯定不會陌生,或許你經(jīng)常使用它。

腳本之家給出的例子:


代碼如下:

<script>
var i=9
var ii=(i>8)?100:9;
alert(ii);
</script>

輸出結(jié)果:

100


二、使用and(&&)和or(||)運算符

if (foo) bar(); ==> foo&&bar();
if (!foo) bar(); ==> foo||bar();

老實說,我并沒有這樣去寫過代碼,這種寫法我在學習《鳥哥的 Linux 私房菜》時看到過,但我并沒想到在js中實現(xiàn)它。


三、省略大括號{}

if (foo) return bar(); else something(); ==> {if(foo)return bar();something()}

這種寫法你我都很熟悉,但我建議在代碼優(yōu)化的時候這樣做,或者交給UglifyJS幫你去解決。畢竟少一個大括號,代碼的可閱讀性并不高。

寫到這里,我想到jQuery之父在《精通 JavaScript》中的一個獲取HTML元素屬性的方法。

function getAttr(el, attrName){
var attr = {'for':'htmlFor', 'class':'className'}[attrName] || attrName;
};

如果我們不這樣寫,可能我們需借助于兩個if語句來進行處理,而上面的代碼不僅簡潔有效,而且可閱讀性強。

仔細想想,好些時候我們都能找到解決問題的有效途徑,但關(guān)鍵在于我們是否用心去尋找一種更好的途徑。

【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出錯
}



javascript if 的簡化代碼

a=0 if(a<1)alert(a),alert(1-a) VS if(a==0){alert(a);alert(1-a)}



<SCRIPT> 
a=0 
if(a<1)alert(a),alert(1-a) 
//VS 
if(a==0){alert(a);alert(1-a)} 
</SCRIPT> 


 注:如需引入外部Js需刷新才能執(zhí)行




<SCRIPT> 
a=0 
a?0:(alert(a),alert(1-a)) 
</SCRIPT> 


注:如需引入外部Js需刷新才能執(zhí)行


還可以這樣寫  


<SCRIPT>  
a=0  
a==0 && (alert(a),alert(1-a))  
</SCRIPT> 


注:如需引入外部Js需刷新才能執(zhí)行




以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號