快捷導(dǎo)航

JavaScript 循環(huán)結(jié)構(gòu)注意事項示例詳解

更新時間：2025年06月28日 10:09:44 作者：隨記

循環(huán)作為算法與數(shù)據(jù)結(jié)構(gòu)中的基石,JS與其他編程語言一樣,都提供了多種循環(huán)結(jié)構(gòu)用于處理數(shù)據(jù), 本文給大家介紹JavaScript 循環(huán)結(jié)構(gòu)注意事項,結(jié)合實例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧

for 循環(huán)

事物的開端往往都是從最常用的開始，循環(huán)結(jié)構(gòu)咱們從 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]);
}
/*
// 輸出結(jié)果
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]);
}
/*
// 輸出結(jié)果
name 前端路引
age 1
favorite-color red
test 我是原型鏈上的測試屬性
*/

for (const key in obj1) {
  if (obj.hasOwnProperty(key)) {  // 過濾掉原型鏈屬性
    console.log(key, obj1[key]);
  }
}
/*
// 輸出結(jié)果
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] 使用了 解構(gòu)賦值，其代碼等于
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 將對象轉(zhuǎn)為數(shù)組，再使用 for of 遍歷，或者使用 Object.keys/Object.values 將對象轉(zhuǎn)為鍵/值數(shù)組再遍歷。

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

while 循環(huán)

while 循環(huán)多用于不確定循環(huán)次數(shù)的應(yīng)用場景，比如讀取文件數(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)體，再判斷條件。

應(yīng)用場景例子：必須讓用戶先輸入，再判斷條件，直到輸入正確才繼續(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)，導(dǎo)致程序崩潰。

比如：

let i = 0;

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

善用退出循環(huán)

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

continue：跳過當(dāng)前循環(huán)，繼續(xù)下一次循環(huán)。
break：跳出當(dāng)前循環(huán)，不再繼續(xù)循環(huán)。
return：跳出當(dāng)前函數(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)結(jié)束'); // 會執(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)結(jié)束'); // 會執(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)結(jié)束'); // 此行代碼不會執(zhí)行
}
loop3()

三個退出循環(huán)關(guān)鍵字都可以用于所有的循環(huán)語句，不要局限于 for 循環(huán)~~

寫在最后

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

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

到此這篇關(guān)于Web前端入門第 62 問：JavaScript 循環(huán)結(jié)構(gòu)注意事項的文章就介紹到這了,更多相關(guān)JavaScript 循環(huán)結(jié)構(gòu)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: