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語言的寫法,但是有特殊性
- switch和case可以使用任意表達(dá)式,不一定是常量
- 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)