循環作為 算法與數據結構 中的基石，JS 與其他編程語言一樣，都提供了多種循環結構用于處理數據。

for 循環

事物的開端往往都是從最常用的開始，循環結構咱們從 for 循環說起。

語法：

for (初始化; 條件; 增量) {
  // ...
}

示例：

// 增量每次 +1
for (let i = 0; i < 10; i++) {
  console.log(i);
}
// 增量每次 +2
for (let i = 0; i < 10; i += 2) {
  console.log(i);
}

性能優化：

在使用 for 循環遍歷數組的時候，可以提前緩存數組長度，減少 length 的訪問次數。

const arr = ['前', '端', '路', '引'];
// 提前使用 len 緩存數組長度
for (let i = 0, len = arr.length; i < len; i++) {
  console.log(arr[i]);
}

此示例中使用了 let 同時聲明了多個變量，在常規的代碼編寫中，不建議這么使用，但在循環體這種特殊情況下，這么寫也能接受。

// 同時聲明多個變量
let a = '前端路引', b = 2, c = true;

增量不一定要使用 i++ 自增，也可以使用 i-- 遞減，或者使用 i += 2 步進，甚至可以是 i += 10。

for in 循環

ES6 規范出現之前，只能使用 for in 循環遍歷對象，但這哥們有個坑，不止會遍歷對象自身屬性，還能遍歷原型鏈上可枚舉屬性。

const obj1 = {
  name: '前端路引', 
  age: 1,
  'favorite-color': 'red', 
}
for (let key in obj1) {
  console.log(key, obj1[key]);
}
/*
// 輸出結果
name 前端路引
age 1
favorite-color red
*/

看個遍歷原型鏈例子：

// 如果有兄弟不小心給對象的原型鏈上填了一筆
Object.prototype.test = '我是原型鏈上的測試屬性';
const obj1 = {
  name: '前端路引', 
  age: 1,
  'favorite-color': 'red', 
}
for (let key in obj1) {
  console.log(key, obj1[key]);
}
/*
// 輸出結果
name 前端路引
age 1
favorite-color red
test 我是原型鏈上的測試屬性
*/
for (const key in obj1) {
  if (obj.hasOwnProperty(key)) {  // 過濾掉原型鏈屬性
    console.log(key, obj1[key]);
  }
}
/*
// 輸出結果
name 前端路引
age 1
favorite-color red
*/

如上所示，代碼編寫規范建議不要對 JS 自身的原型鏈做修改，擴展原型鏈雖然方便了一些對象操作，但實際上這是埋了雷的，不知道啥時候就會引爆！！

在使用 for in 循環也需要注意原型鏈的屬性，必須使用 hasOwnProperty 方法來過濾掉原型鏈上的屬性。

for of 循環

由于 for in 的各種弊端，后來定規范的大佬們，就新增了一個 for of 循環用于遍歷可迭代對象，比如：數組、字符串、Set、Map 等等。

const obj1 = {
  name: '前端路引', 
  age: 1,
  'favorite-color': 'red', 
}
// for of 循環
for (let [key, value] of Object.entries(obj1)) {
  console.log(key, value);
}
/* // 以上 let [key, value] 使用了 解構賦值，其代碼等于
for (let item of Object.entries(obj1)) {
  const [key, value] = item;
  console.log(key, value);
}
// 又等于
for (let item of Object.entries(obj1)) {
  const key = item[0];
  const value = item[1];
  console.log(key, value);
}
*/

for of 無法直接遍歷對象，需要遍歷對象時，需使用內置方法 Object.entries 將對象轉為數組，再使用 for of 遍歷，或者使用 Object.keys/Object.values 將對象轉為鍵/值數組再遍歷。

相比于 for in 循環，for of 循環性能更好，也不用考慮原型鏈問題。

while 循環

while 循環多用于不確定循環次數的應用場景，比如讀取文件數據流，并不知道需要循環多少次才能讀取完。

let i = 0;
while (i < 3) {
  console.log(i);
  i++;
}

一般能用 for 循環的場景，都能使用 while 循環替代。

do while 循環

這個循環可有意思了，不管條件是否滿足，都會先跑一次循環體，再判斷條件。

應用場景例子：必須讓用戶先輸入，再判斷條件，直到輸入正確才繼續。

let userInput;
do {
  userInput = prompt("請輸入一個大于 10 的數字：");
} while (isNaN(userInput) || Number(userInput) <= 10);
console.log("有效輸入:", userInput);

死循環

在使用循環遍歷時候，需特別注意 死循環 問題，條件處理不好，就進入死循環，導致程序崩潰。

比如：

let i = 0;
while (i < 3) {
  console.log(i);
  // i++; // 忘記修改 i 的值，導致進入死循環
}

善用退出循環

continue / break / return 三個關鍵字都可以用來處理循環邏輯，不同的是：

• continue：跳過當前循環，繼續下一次循環。
• break：跳出當前循環，不再繼續循環。
• return：跳出當前函數，不再繼續執行。

continue 示例：

function loop1 () {
  for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
      continue; // 跳過偶數次循環，只輸出奇數次循環
    }
    console.log(i); // 輸出 1 3 5 7 9
  }
  console.log('循環結束'); // 會執行
}
loop1()

break 示例：

function loop2 () {
  for (let i = 0; i < 10; i++) {
    if (i === 5) {
      break; // 在第 6 次循環退出
    }
    console.log(i); // 輸出 0 1 2 3 4
  }
  console.log('循環結束'); // 會執行
}
loop2()

return 示例：

function loop3 () {
  for (let i = 0; i < 10; i++) {
    if (i === 5) {
      return; // 在第 6 次循環退出函數，不會執行循環體后面的代碼
    }
    console.log(i); // 輸出 0 1 2 3 4
  }
  console.log('循環結束'); // 此行代碼不會執行
}
loop3()

三個退出循環關鍵字都可以用于所有的循環語句，不要局限于 for 循環~~

寫在最后

如果說算法是程序的靈魂，那么循環可以算是算法的基石，很多常見的算法都需要使用循環實現，比如各種數組排序算法、查找算法、最短路徑算法等等。

循環是程序中的必修課，任何編程語言都有它的身影。

轉自https://www.cnblogs.com/linx/p/18908725