【重溫基礎】3.迴圈和迭代

pingan8787發表於2019-02-16

本文是 重溫基礎 系列文章的第三篇，今天想起鬼腳七的一句話：人不一定自由，但思想一定是自由的。思想沒有對和錯，也沒有高和低，只有不同。瞭解一個人可以去了解他的思想。
。

系列目錄：

本章節複習的是JS中的迴圈語句，讓我們能更快速且簡單的完成一些需求。

首先我們要知道：迴圈實際上就是把一個事情重複n次執行，也有可能是0次，JS中有以下幾種迴圈語句型別：

  • for語句
  • do...while語句
  • while語句
  • labeled語句
  • break語句
  • continue語句
  • for...in語句
  • for...of語句

1.for語句

重複執行for的條件語句，直到迴圈條件為false退出迴圈：

var a = 1;
for ( a < 3){
    a ++;
}

這個語句大概執行了以下操作：

  • 1.定義並初始化一個變數a的值為1；
  • 2.執行迴圈語句，條件為當a < 3的時候，a每次遞增1；
  • 3.返回第2步繼續迴圈；
  • 4.當a在等於4的時候，不滿足迴圈條件a < 3，然後退出迴圈；

其他例子：

// 求陣列中所有值的和
var a = [ 1, 3, 4, 6];
var sum = 0;
for (var i = 0; i < a.length; i++){
    sum += a[i];
}
sum; // 14

2.do...while語句

重複執行do的條件，直到不符合while的條件，退出迴圈：

do {
  a += 1;
  console.log(a);
} while (a < 5);

3.while語句

重複執行while的條件，直到while的條件為false，退出迴圈：

var a = 0;
var b = 0;
while (a < 5){
    a ++;
    b += a;
}
// a => 5; b => 15

4.labeled語句

用來標識一個程式位置的識別符號，如標識一個迴圈，並在break或continue中指出中國識別符號，來停止這個迴圈。

var a = [1, 2, 3, 4, 5];
labelName:
for(var i = 0 ;i< a.length; i++){
    console.log(i);
    if(i > 1){
        break labelName;
    }
}
// 0
// 1
// 2

5.break語句

用於終止一個迴圈，還可以在switch中終止，通常這麼使用：

  • 終止一個迴圈：
for(var i = 0 ;i< a.length; i++){
    if(a[i] == 1){
        break;
    }
}
  • 終止一個label
leo:
for(var i = 0 ;i< a.length; i++){
    for(var j = 0 ;j< a.length; j++){
        if(a[i] == a[j]){
            break leo;
        }
    }
}

6.continue語句

用來跳過當前迴圈，進入下個迴圈，可以使用在while、do...while、for或者label語句：

  • 有使用continue 
var a = 0;
var b = 0;
while (a < 5 ){
    a ++;
    if(a == 2){
        continue;
    }
    b += a;
    console.log(b);
}
// 1 4 8 13
  • 沒有使用continue 
var a = 0;
var b = 0;
while (a < 5 ){
    a ++;
    if(a == 2){
        // continue;
    }
    b += a;
    console.log(b);
}
// 1,3,6,10,15

7.for...in語句

通常用於遍歷一個物件的所有可列舉的屬性，執行指定方法：

var a = [
    {name : `leo`},
    {name : `pingan`},
    {name : `平安`},
]
for(var k in a){
    // a為迴圈物件 k為當前指標位置
    console.log(a[k]);
}

8.for...of語句

通常用於遍歷一個可迭代物件（包括Array,Map,Set和引數物件arguments等），執行指定方法：

var a = [1, 2, 5];
for(var k in a){
    console.log(k);   // k 為當前元素的下標
}
for(var m of a){
    console.log(m);   // m 為當前元素的值
}

參考資料

1.MDN 迴圈和迭代

本部分內容到這結束

Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推薦 https://github.com/pingan8787…
JS小冊 js.pingan8787.com

歡迎關注微信公眾號【前端自習課】每天早晨，與您一起學習一篇優秀的前端技術博文 .

相關文章