04 - JavaScript(流程控制,比較運算符,for循環)

#if/for循環

流程控制

###比較運算符

> < >= <= == != === !==

• == 表示等于
• != 不等于
• === 全等于(除了判斷值,還會判斷資料類型,下同)
• !==不全等于
• 比較之後得到的結果都是boolean

if條件語句

當條件為真時,執行代碼,條件為假時,不管

if (條件) {
	console.log("條件為真");
}
           

兩條分支

if (條件) {
    console.log("條件為真");
} else {
    console.log("條件為假");
}
           

多條分支

let a = 2;
if (a === 1) {
    console.log("a 為 1");
} else if(a === 2){
    console.log("a 為 2");
}else if(a === 3){
    console.log("a 為 3");
}else {
    console.log("a不是1,2,3");
}
           

if中的條件會強制轉化為布爾值false的六個值:

switch

• 必須條件
  • 分支判斷采用===比較
  • ===比較符前面的變量保持相同

• break

  它用于跳出switch()語句,來阻止代碼自動地向下一個case執行

• default

  關鍵詞來規定比對不存在時做的事情

let today = 3;
switch (today) {
    case 1://判斷today是否全等于是1,是則執行對應的代碼
        console.log("今天是星期一");
        break;//break用于阻止後續代碼的執行
    case 2:
        console.log("今天是星期二");
        break;
    case 3:
        console.log("今天是星期三");
        break;  
    case 4:
        console.log("今天是星期四") ;
        break;
    case 5:
        console.log("今天是星期五");
        break;
    case 6:
        console.log("今天是星期六");
        break;
    case 7:
        console.log("今天是星期日");  
        break;  
    default:
        break;
}
           

三目運算符

前提: if一定有且僅有兩個分支 并且每一條分支 隻有一條語句

let a = 5;
if(a !== 5){
    console.log("a不等于5");
}else{
    console.log("a等于5");
}
//三目運算符,在實際開發中,不建議使用
a!=5 ? console.log("a不等于5") : console.log("a等于5")
           

for循環

重複執行的代碼(有些代碼需要反複執行)—>for循環

//for(初始值;判斷條件;步幅){code}
for (let i = 0; i < 5; i++) {
    console.log(i);   //列印從0到4     
}
console.log("for循環結束時的i="+i);
//i結束的時候是多少?當i=9,判斷為真,執行循環體
           

執行順序

for( 1;2;3 ){ 
	4
}
1->2->4->3->2->4->3->2
當判斷條件為假的時候,跳出循環,真-->循環體,當我們步長增加後,進入判斷語句,假--->跳出循環
聲明的語句1隻在開頭執行一次,就沒有了
           

不同的寫法:

//一
let i=0;
for(;i<10;i++){
    console.log(i);
}
//二:當循環體執行完,再執行步長,步長可以提到循環體的後面,當語句1和3在外面的時候記得兩個分号不能省略,一個木頭要變成三段,要砍兩刀(分号)
let i=0;
for(;i<10;){
    console.log(i);
    i++
}
//實作函數執行10次
function fn(){
    console.log("大家好")
}
for(let i=0;i<10;i++){
    fn();
}
//要有三條語句,加兩個分号
console.log("for循環結束時的i="+i);
           

for循環使用小例子

給button按鈕添加事件,點選button,出現彈窗

//for循環,真正幫幫你注冊/綁定事件,(它不負責幫你觸發事件)沒有幫你觸發事件
let aBtn=document.getElementsByTagName("button");
for(let i=0;i<10;i++){
	aBtn[i].index=i;	//條件0 1
	aBtn[i].i=i;
    aBtn[i].onclick=function(){
        alert("hi");
        //需求:點選彈出彈窗,彈窗的内容是i在集合裡面對應的序号
        //實作不了需求,結束彈出8,點選事件執行時,for循環早就完了,結束之後再通路i,因為for循環執行完了,i就等于最後的那個值
        alert(i);	//8	,一定直接不能使用i
        alert(this.index);	//0 1 2 3 4 5 6 7 
    }
    console.log(i);	//i=8
    /*用來區分,對象和對象的序号之間不一樣,點選不同的對象,函數對應的this是不一樣的
    給你不同的對象設定這麼一個屬性,不同的對象下面有一個名字相同的屬性*/
}
/*要在事件裡面,使用對象對應的的序号值,不要直接使用i,要使用自定義屬性
要使用自身索引值時要使用自定義屬性*/
           

continue 跳過本次循環

for (let i = 0; i < 5; i++) {
    if (i == 3) {
        continue;
    }
    console.log(i);   //當i=3時,跳過此次循環,是以3沒有被列印出來     
}
           

break 跳出循環

for (let i = 0; i < 5; i++) {
    if (i == 3) {
        break;
    }
    console.log(i);   //當i=3時,跳過循環,是以2後面的都沒有列印     
}
           

while,先判斷再執行代碼,決定目前是否循環

//性能跟之前的那個差不多
let aBtn=document.getElementsByTagName("button");
let i=0;
while(i<10){
    aBtn[i].onclick=function(){
        alert(1)
    }
    i++;
}
           

do while 先執行再判斷,決定是否進行下一次循環

let i=0;
do{
    console.log(i)
}while(false)
           

死循環

for(let i=0;true;i++){
    alert(i);
}
           

for循環嵌套

//從外面往裡面執行,遇到循環體(另一個for 循環)
for(let i=0;i<5;i++){
    for(let j=0;j<6;j++){
        console.log(1)	//執行30次
    }
    
}