32.Javascript循環結構

編寫程序時，我們經常需要重復執行某些操作，這時候循環結構就顯得非常有用。JavaScript 提供了多種循環結構，以適應不同的編程場景。以下是 JavaScript 中常見的循環結構：

for 循環

for 循環是最常見的循環結構之一，它允許我們指定循環開始前的初始化代碼、循環繼續的條件以及每次循環結束時要執行的代碼。

基本語法

for (初始化表達式; 循環條件; 循環后的操作表達式) {
    // 循環體代碼
}

示例：輸出 1 到 10 的數字

for (var i = 1; i <= 10; i++) {
    console.log(i);
}

while 循環

while 循環在給定條件為真時將不斷循環執行代碼塊。與 for 循環不同，while 循環只有循環條件，沒有初始化和迭代表達式。

基本語法

while (條件) {
    // 循環體代碼
}

示例：使用 while 循環輸出 1 到 10 的數字

var i = 1;
while (i <= 10) {
    console.log(i);
    i++;
}

do...while 循環

do...while 循環和 while 循環類似，但它至少會執行一次循環體，無論條件是否為真。

基本語法

do {
    // 循環體代碼
} while (條件);

示例：使用 do...while 循環輸出 1 到 10 的數字

var i = 1;
do {
    console.log(i);
    i++;
} while (i <= 10);

for...in 循環

for...in 循環用于遍歷對象的屬性。

基本語法

for (var key in 對象) {
    // 使用 key 訪問對象屬性
}

示例：遍歷對象的屬性

var person = {
    name: "張三",
    age: 30,
    job: "軟件工程師"
};

for (var key in person) {
    console.log(key + ": " + person[key]);
}

for...of 循環

for...of 循環用于遍歷可迭代對象（如數組、字符串等）的元素。

基本語法

for (var item of 可迭代對象) {
    // 使用 item 訪問元素
}

示例：遍歷數組的元素

var fruits = ["蘋果", "香蕉", "橘子"];
for (var fruit of fruits) {
    console.log(fruit);
}

總結

JavaScript 的循環結構為我們提供了強大的工具來處理重復任務。for 循環適合于當我們知道循環次數時使用；while 和 do...while 循環適合于循環次數未知，但是循環條件明確的情況；for...in 和 for...of 循環則讓對象和數組的遍歷變得更加簡潔。掌握這些循環結構有助于我們編寫更加高效和可讀性更強的代碼。

JavaScript 中，當我們想要一種簡單的方法來處理重復時，我們會使用循環。在本文中，我們將了解在代碼中創建循環的所有不同方法 - 我們將考慮每種方法的優缺點。

考慮循環的一種方法可能是考慮向機器人發出命令。你可以告訴它執行 10 個步驟 - 而不是發出 10 個單獨的命令，我們可以創建一個循環：

let i;
for (i = 0; i < 10; i++) {
  document.write("Take one step!\n");
}

這是一個 for 循環的例子。起初，這可能會令人困惑 - 但我們將在下一節中將其全部分解！在本文中，我們將回顧許多不同類型的循環語句，例如：for、do...while、while、labeled 語句、break 語句、continue 語句、for...in & for...of。值得注意的是，盡管它們在語法上有所不同 - 循環基本上都做同樣的事情：多次重復一個動作。這種情況決定了哪種類型的循環最適合。

for 循環

正如我們在上面的例子中看到的，一個 for 循環將重復，直到我們的條件評估為 false。邏輯結構是這樣的：

for ([initialExpression]; [condition]; [incrementExpression])
  statement

我們首先初始化 initialExpression，它通常初始化一個或多個循環計數器，但語法甚至允許更復雜的表達式，例如變量。我們接下來評估我們的條件，如果為真，循環語句將執行。如果為假，則循環終止。

然后執行語句。當我們希望執行多個語句時，我們使用塊語句 ({ ... }) 將它們組合在一起。如果存在，則執行更新表達式 incrementExpression。然后控制返回到評估條件。

現在讓我們回到我們之前的例子：

let i;
for (i = 0; i < 10; i++) {
  document.write("Take one step!\n");
}

在這里，我們可以看到我們的 for 語句正在計算最多為 10 的步數。變量 i 將通過將其初始化為零來確保我們從頭開始。然后它將檢查 i 是否小于我們指定的數字，在我們的例子中是 10。 i++ 是在每次通過循環后將 i 增加 1 的計數。所以我們的循環知道什么時候完成！

do…while 語句

do...while 語句將重復，直到條件評估為假。結構是這樣的：

do
  statement
while (condition);

這是相當不言自明的，語句總是在檢查條件之前執行一次。然后再一次，直到 while 條件返回 false。我們可以執行多個語句，使用塊語句 ({ ... }) 對它們進行分組。如果條件為真，則語句再次執行。在每次執行結束時，都會檢查條件。當條件返回 false 時，執行停止，控制權傳遞給 do...while 后面的語句。

讓我們看一個例子：

let i = 0;
do {
  i += 1;
  console.log(i);
} while (i < 10);

這里我們的 do 循環至少迭代一次，然后重復直到 i 不再小于 10。

while 語句

只要指定條件的計算結果為真，while 語句就會執行其語句。它的語法如下：

while (condition)
  statement

如果條件變為假，則循環內的語句停止執行，然后控制權傳遞給循環后面的語句。

條件測試發生在執行循環中的語句之前。如果條件返回 true，則執行語句并再次測試條件。如果條件返回 false，則執行將停止并將控制權傳遞給 while 后面的語句。

和 do...while 一樣，我們可以使用塊語句 ({ ... }) 執行多個語句，將它們組合在一起。

只要 a 小于 3，下面的 while 循環就會迭代：

let a = 0;
let b = 0;
while (a < 3) {
  a++;
  b+= a;
}

在每次迭代中，循環都會增加 a 并將該值添加到 b。因此，a 和 b 具有以下值：

第一次通過循環后：a = 1 和 b = 1
第二遍：a = 2 和 b = 3
第三遍：a = 3 和 b = 6

在完成第三遍之后，條件 a < 3 不再為真，因此我們的循環終止了！

注意：當您第一次開始使用循環時，您可能會意外創建一個無限循環。這是循環條件永遠不會評估為假的時候。以下 while 循環中的語句將永遠執行，因為條件永遠不會為假：

while (true) {
  console.log('Hi there!');
}

注意：如果您運行此代碼 - 請注意它可能會導致您的瀏覽器崩潰！因此，請確保您已備份打開的標簽頁 - 如果您想看看會發生什么。

label 語句

您可以將標簽附加到任何語句以用作標識符，以便您可以在程序的其他地方引用它。例如，您可以使用標簽來標識循環，然后使用 break 或 continue 語句來指示程序是應該中斷循環還是繼續執行（我們將在下面看看這些）。

label :
   statement

label 的值可以是您喜歡的任何值（JavaScript 保留字除外）。然后提供要執行的語句。

因此，例如，您可以使用標簽 totalLoop 來識別 while 循環。

totalLoop:
while (total == true) {
   doSomething();
}

中斷語句

我們使用 break 語句來終止循環或切換，或者與帶標簽的語句一起使用。

當您使用不帶標簽的 break 時，它會立即終止最內層的 while、do-while、for 或 switch，并將控制權轉移到以下語句。
當您使用帶有標簽的 break 時，它會終止指定的標簽語句。

break 語句如下所示：

break [label];

例如，讓我們遍歷一個數組，直到我們找到一個值為：foundMe 的元素的索引

for (let i = 0; i < a.length; i++) {
  if (a[i] == foundMe) {
    break;
  }
}

讓我們使用帶有標簽的語句的中斷：

let x = 0;
let z = 0;
endLoops: while (true) {
  console.log('Outer loops: ' + x);
  x += 1;
  z = 1;
  while (true) {
    console.log('Inner loops: ' + z);
    z += 1;
    if (z === 10 && x === 10) {
      break endLoops;
    } else if (z === 10) {
      break;
    }
  }
}

continue 語句

我們使用 continue 語句重新啟動 while、do-while、for 或 label 語句。

當您使用不帶標簽的 continue 時，它會終止最里面的 while、do-while 或 for 語句的當前迭代，并在下一次迭代中繼續執行循環。這與 break 語句形成對比，因為 continue 不會完全終止循環的執行。在 while 循環中，它跳回到條件。在 for 循環中，它跳轉到初始表達式。當您對標簽使用 continue 時，它適用于使用該標簽標識的循環語句。

continue 語句如下所示：

continue [label];

例如，以下代碼塊顯示了一個帶有 continue 語句的 while 循環，該語句將在 i 的值為 3 時執行。所以 n 取值 1、3、7 和 12。

let i = 0;
let n = 0;
while (i < 5) {
  i++;
  if (i == 3) {
    continue;
  }
  n += i;
  console.log(n);
}
// 1,3,7,12
let i = 0; 
let n = 0; 
while (i < 5) { 
  i++; 
  if (i == 3) { 
     // continue; 
  } 
  n += i; 
  console.log(n);
}
// 1,3,6,10,15

for...in 語句

for...in 語句在對象的所有可枚舉屬性上迭代指定變量。對于每個不同的屬性，JavaScript 執行指定的語句。語法如下：

for (variable in object) {
  statements
}

以下函數將對象和對象名稱作為其參數。然后它遍歷對象的所有屬性并返回一個列出屬性名稱及其值的字符串。

function get_names(obj, obj_name) {
  let result = '';
  for (let i in obj) {
    result += obj_name + '.' + i + ' = ' + obj[i] + '<br>';
  }
  result += '<hr>';
  return result;
}

對于具有午餐和晚餐屬性的對象食物，結果將是：

food.lunch = Sandwich
food.dinner = Lasagna

注意：鑒于 for...in 是為迭代對象屬性而構建的，因此不建議將其與數組一起使用——其中索引順序很重要。對于數組，最好使用更傳統的 for 循環。

for...of 聲明

for ... of 語句創建一個循環，該循環遍歷可迭代對象，例如 Array、Map、Set、arguments 等。語法是這樣的：

for (variable of object) {
  statement
}

下面的示例顯示了 for...of 循環和 for ... in 循環之間的區別。雖然 for...in 迭代屬性名稱，但 for...of 迭代屬性值：

let arr = [10, 20, 30];
arr.greet = 'hello';
for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "greet"
}
for (let i of arr) {
   console.log(i); // logs 10, 20, 30
}

概括

我們已經了解了許多不同的循環語句，例如：for、do...while、while、labeled 語句、break 語句、continue 語句、for..in 和 for...of。我們已經查看了一些示例，這些示例突出了每種循環的理想用例。無論我們選擇使用哪種語句，我們現在都可以很好地為我們的程序添加邏輯和推理。

關注七爪網，獲取更多APP/小程序/網站源碼資源！

avaScript 語言中的 for 循環用于多次執行代碼塊，它是 JavaScript 中最常用的一個循環工具，還可用于數組的遍歷循環等。

我們為什么要使用 for 循環呢？打個比方，例如我們想要控制臺輸出1到1000之間的所有數字，如果單寫輸出語句，要寫1000句代碼，但是如果使用 for 循環，幾句代碼就能實現。總之，使用 for 循環能夠讓我們寫代碼更方便快捷（當然啦，否則要它干嘛）。

for 循環語法

語法如下所示：

for(變量初始化; 條件表達式; 變量更新) {
    // 條件表達式為true時執行的語句塊
}

變量初始化，表示代碼塊開始前執行。
條件表達式，定義運行循環代碼塊的條件。
變量更新，在循環代碼塊每次被執行之后再執行。

示例：

例如我們在一個HTML文件中，編寫如下代碼，實現計算1到100的總和：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_俠課島(9xkd.com)</title>
</head>
<body>
<script>
  var result = 0;
  for(var i = 1; i <= 100; i++) {
    result = result + i;
  }
  alert(result);
</script>
</body>   
</html>

在瀏覽器中打開這個文件，會彈出一個彈出層，彈出層中顯示的是1到100的總和：

上述代碼中，我們聲明了一個變量 result 并給它賦值為 0，表示初始的總和為 0 。

然后在 for 循環中三個語句：

變量初始化 i = 1，表示從 1 開始計算。
條件表達式 i <= 100，表示只要 i 小于等于 100 循環就會一直執行，當 i 大于 100 循環會停止。
變量更新 i++，之前我們學運算符的時候學過，這是遞增運算符 ++，表示為其操作數增加 1。

此時我們可以一點點來看這個 for 循環：

第一次循環： result = 0 + 1   // 此時result值為0，  i的值為1
第二次循環： result = 1 + 2   // 此時result值為0+1，i的值為2
第三次循環： result = 3 + 3   // 此時result值為1+2，i的值為3
第四次循環： result = 6 + 4   // 此時result值為3+3，i的值為4
第五次循環： result = 10 + 5  // 此時result值為6+4，i的值為5
...

我們只需要搞清楚 for 循環中的執行原理，不需要手動來計算求和，只要寫好代碼，執行代碼后計算機會很快會告訴我們1到 100 的總和。

再補充一下，上述代碼中result = result + i，我們也可以寫成 result += i，這是我們之前學過的加賦值運算符，還記得嗎？

示例：

再來看一個例子，例如我們可以使用 for 循環來實現數組遍歷，首先定義一個數組 lst：

var lst = ["a", "b", "c", "d", "e"];

在寫 for 循環時，首先就是要搞清楚小括號里面的三個語句，因為我們可以通過數組中元素的下標索引來獲取元素的值，而數組的索引又是從 0 開始，所以變量初始化可以設置為i = 0。第二個條件表達式，因為數組中最后一個索引為 lst.length - 1，所以只要小于等于 lst.length - 1，循環就會一直執行。而i <= lst.length - 1 就相當于 i<lst.length。第三個變量更新，當循環每循環一次，索引值就加一，所以為 i++。

所以循環可以像下面這樣寫：

for(i = 0; i<lst.length; i++){
    console.log(lst[i]);  // 輸出數組中的元素值，從索引為0的值開始輸出，每次加1，一直到lst.length-1
}

輸出：

a
b
c
d
e

其實遍歷數組還有一種更好的方法，就是使用 for...in 循環語句來遍歷數組。

for...in 循環

for...in 循環主要用于遍歷數組或對象屬性，對數組或對象的屬性進行循環操作。for...in 循環中的代碼每執行一次，就會對數組的元素或者對象的屬性進行一次操作。

語法如下：

for (變量 in 對象) {
    // 代碼塊
}

for 循環括號內的變量是用來指定變量，指定的可以是數組對象或者是對象屬性。

示例：

使用 for...in 循環遍歷我們定義好的 lst 數組：

var lst = ["a", "b", "c", "d", "e"];
for(var l in lst){
    console.log(lst[l]);
}

輸出：

a
b
c
d
e

除了數組，for...in 循環還可以遍歷對象，例如我們遍歷俠俠的個人基本信息：

var object = {
    姓名:'俠俠',
    年齡:'22',
    性別:'男',
    出生日期:'1997-08-05',
    職業:'程序員',
    特長:'跳舞'
}

for(var i in object) {
    console.log(i + ":" + object[i]);
}

輸出：

姓名: 俠俠
年齡: 22
性別: 男
出生日期: 1997-08-05
職業:程序員
特長:跳舞

動手小練習

請自定義一個長度為7的數組，然后通過 for 循環將數組中的元素遍歷出來。
求和：1~100的奇數和。
求和：1~100的偶數和。
使用對象定義一個人的個人信息（包括姓名、性別、年齡、出生日期、興趣愛好、職業、特長等），然后使用 for...in 循環將這些信息遍歷輸出。

在線咨詢

上一篇：html中textarea標簽高度內容自適應
下一篇："決勝移動端：H5頁面如何一鍵禁用雙擊放大、雙指縮放與整體

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

32.Javascript循環結構

for 循環

基本語法

示例：輸出 1 到 10 的數字

while 循環

基本語法

示例：使用 while 循環輸出 1 到 10 的數字

do...while 循環

基本語法

示例：使用 do...while 循環輸出 1 到 10 的數字

for...in 循環

基本語法

示例：遍歷對象的屬性

for...of 循環

基本語法

示例：遍歷數組的元素

總結

for 循環語法

示例：

for...in 循環

動手小練習

您的項目需求