&

js循環(huán)結構注意事項

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

freeflydom

2025年6月4日 8:37 本文熱度 201

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

for 循環(huán)

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

語法：

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

示例：

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

性能優(yōu)化：

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

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

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

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

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

for in 循環(huán)

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

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
*/

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

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

for of 循環(huán)

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

const obj1 = {
  name: '前端路引', 
  age: 1,
  'favorite-color': 'red', 
}
// for of 循環(huán)
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 無法直接遍歷對象，需要遍歷對象時，需使用內(nèi)置方法 Object.entries 將對象轉為數(shù)組，再使用 for of 遍歷，或者使用 Object.keys/Object.values 將對象轉為鍵/值數(shù)組再遍歷。

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

while 循環(huán)

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

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

一般能用 for 循環(huán)的場景，都能使用 while 循環(huán)替代。

do while 循環(huán)

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

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

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

死循環(huán)

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

比如：

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

善用退出循環(huán)

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

continue：跳過當前循環(huán)，繼續(xù)下一次循環(huán)。
break：跳出當前循環(huán)，不再繼續(xù)循環(huán)。
return：跳出當前函數(shù)，不再繼續(xù)執(zhí)行。

continue 示例：

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

break 示例：

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

return 示例：

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