>>>>>流程控制語句

if

if語句是編程語言最常用的語句,語法

if(condition){
    //true statement
}else {
    //false statement
}

其中condition可以是任意表達(dá)式,結(jié)果不一定是布爾值,JavaScript解釋器會自動調(diào)用Boolean()將表達(dá)式結(jié)果轉(zhuǎn)為布爾值,如果表達(dá)式為真執(zhí)行第一個代碼塊內(nèi)語句,如果為假執(zhí)行第二個代碼塊內(nèi)語句

只有一條語句的時候代碼塊不是必需的,出于維護(hù)性考慮我們建議添加

if語句可以單獨使用,也可以和多個else連續(xù)使用

if(a > 2){
    // statement
}


if( a == 1){

}else if(a == 2){

}else if(a == 3 ){

}else{

}

switch

switch 語句和if語句關(guān)系密切,語法

switch(expresstion){
    case value1:
        statement;
        break;

    case value2:
        statement;
        break;

    case value3:
        statement;
        break;

    default:
        statement;
}

我們可以看到if語句使用多個else的時候?qū)懛ê芊爆?,可讀性也下降,switch語句可以輕松解決

switch(a){
    case 1:
        statement;
        break;

    case 2:
        statement;
        break;

    case 3:
        statement;
        break;

    default:
        statement;
}

如果表達(dá)式等于case的值,對應(yīng)的語句就會執(zhí)行,break關(guān)鍵字會使程序跳出switch語句,很多編程規(guī)范強(qiáng)調(diào)必須添加break,不添加不會有語法錯誤,程序會多次判斷case,進(jìn)入相應(yīng)流程

沒有一個值符合case,流程進(jìn)入default子句,很多規(guī)范也強(qiáng)調(diào)必須添加default部分

JavaScript switch語句雖然參考的C語言的寫法,但是有特殊性

  1. switch和case可以使用任意表達(dá)式,不一定是常量
  2. switch語句進(jìn)行比較的時候是全等于(===)操作,不會發(fā)生類型轉(zhuǎn)換

while和do-while

while

while語句屬于前測試循環(huán)語句,也就是在循環(huán)體內(nèi)的代碼被執(zhí)行之前,就會對條件求值,不符合的話就不會執(zhí)行

while(expression){
    statement;
}

看個例子

var i = 10;
while(i > 0){
    console.log(i);
    i--;
}

do-while

do-while是后測試循環(huán)語句,在出口條件判斷之前就會執(zhí)行一次代碼

do{
    statement;
}while(expression);

看個例子

var i = 4;
do{
    console.log(i);
    i--;
}while(i > 5);

for

for語句也是前測試循環(huán)語句,但具備在執(zhí)行循環(huán)代碼以前初始化變量和定義循環(huán)后要執(zhí)行代碼的能力,改造一下while語句

for(var i = 10; i > 0; i--){
    console.log(i);
}

一個例子:生成200個按鈕

for (var i=0; i<200; i++){
    document.body.innerHTML += '<input type="button" value="按鈕">'
}

上面的代碼性能有問題, 執(zhí)行的很慢,可以嘗試將200改成2000 因為innerHTML=''為生存html元素
這種操作是比較費時的

我們稍微改進(jìn)一下

var str = '';
for (var i=0; i<200; i++){
    str += '<input type="button" value="按鈕">'
}

document.body.innerHTML = str;

這個地方,我們對字符串做一個拼接, 這種操作時很快的, 然后一次插入頁面

一個例子:for循環(huán)計算元素坐標(biāo)

div{
    height: 50px;
    width: 50px;
    background: red;
    position: absolute;
}
var str='';
for(var i=0; i<10;i++){
    str += '<div style="left: '+(10+60*i)+'px">'+i+'</div>'
}
document.body.innerHTML = str;

換行

var str='';

for(var i=0; i<100;i++){
    var leftValue =  60 * (i%10); //i%10表示第幾行
    
    var topValue = 60 * parseInt(i/10); // parseInt(i/10)表示第幾列
    
    console.log(leftValue, topValue);
    str += '<div style="left: '+leftValue+'px; top: '+topValue+'px">'+i+'</div>'
}
document.body.innerHTML = str;

斜線

var str='';
for(var i=0; i<10;i++){
    var leftValue = 60*i;
    var topValue = 60*i;
    str += '<div style="left: '+leftValue+'px; top: '+topValue+'px">'+i+'</div>'
}
document.body.innerHTML = str;

練習(xí): v字型

for-in

for-in是一種迭代語句,用于枚舉對象的屬性

for(property in object){
    statement
}

看個例子

for(var prop in window){
    console.log(prop);
}

因為ECMAScript規(guī)定對象中的屬性沒有順序,所以for-in遍歷出來的屬性的順序也不是固定的(雖然大部分瀏覽器是按屬性名稱排序,我們不能依賴這個)

break和continue

break關(guān)鍵字在switch語句中已經(jīng)見過,這兩個關(guān)鍵字多用在循環(huán)語句中

  • break 用于強(qiáng)制退出循環(huán)體,執(zhí)行循環(huán)后面的語句
  • continue 用于退出本次循環(huán),執(zhí)行下次循環(huán)

看個例子對比一下

for(var i = 1; i< 10; i++){
    if(i % 4 === 0){
        break;
    }

    console.log(i);
}

for(var i = 1; i< 10; i++){
    if(i % 4 === 0){
        continue;
    }

    console.log(i);
}

這是break和continue最常規(guī)的用法,其實這兩個關(guān)鍵字后面可以跟上我們之前提到的label,退出指定位置的代碼,對于多層循環(huán)是個有用的技巧,但是難以理解,一般不推薦使用(如同C語言中被誤解的goto)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容