1、return 語句

首先來說 return 語句，僅限函數(shù)內(nèi)部使用，在函數(shù)體內(nèi)部使用 return 語句會(huì)導(dǎo)致函數(shù)立即返回并跳出循環(huán)

function myFunction() {
   for (var i = 1; i < 5; i++) {
      if (i === 3) {
         return; // 當(dāng)i等于3時(shí)跳出循環(huán)并返回到調(diào)用處
      }
      console.log(i);
   }
    console.log('end') // 未執(zhí)行
}
myFunction();
// 輸出結(jié)果為：1 2

只輸出了1和2，第三次循環(huán)中return跳出了循環(huán)，同時(shí)也阻止了后面代碼的執(zhí)行，這就是return的特性：當(dāng)執(zhí)行return語句時(shí)，即使函數(shù)主體中還有其他語句，函數(shù)執(zhí)行也會(huì)停止！

2、break 語句

使用 break 關(guān)鍵字來立即結(jié)束當(dāng)前所在的循環(huán)

function myFunction() {
   for (var i = 1; i < 5; i++) {
      if (i === 3) {
         break; // 當(dāng)i等于3時(shí)跳出循環(huán)并返回到調(diào)用處
      }
      console.log(i);
   }
    console.log('end') // 執(zhí)行
}
myFunction();
// 輸出結(jié)果為：1 2 end

通過輸出了 end 可以看出他跟 return 語句的不同之處，break 語句只是跳出了當(dāng)前循環(huán)語句，并不會(huì)阻止函數(shù)內(nèi)其他語句的執(zhí)行

3、 給循環(huán)體增加別名

首先我們針對(duì) for 循環(huán)設(shè)置一個(gè)常量表示循環(huán)體，然后 break 指定跳出循環(huán)體。（tips：指定的循環(huán)體可以是英文也可以是中文，只適用于 for 循環(huán)，且每層都得用for循環(huán)）

foo: for (var i = 1; i <= 5; i++) {
    if (i === 3) {
      break foo;
    }
    console.log(i);
  }
// 輸出結(jié)果為 1 2

此方法還可跳出多個(gè)循環(huán)體，如下找出第一個(gè)吃草莓的人

const arr = [
    { name: '張三', fruit: ['蘋果', '香蕉']},
    { name: '李四', fruit: ['梨', '草莓']},
    { name: '王五',  fruit: ['櫻桃', '西瓜']},
    { name: '小紅', fruit: ['菠蘿', '芒果']},
]
let person = undefined

// 為緊鄰的for循環(huán)命名
冰淇淋: for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr[i].fruit.length; j++) {

        console.log(arr[i].name, arr[i].fruit[j])

        if (arr[i].fruit[j] === '草莓') {
            person = arr[i].name
            
            // 跳出命名的循環(huán)
            break 冰淇淋
        }
    }
}
console.log('這里仍然可以執(zhí)行', person)

// 執(zhí)行結(jié)果如下：
// 張三 蘋果
// 張三 香蕉
// 李四 梨
// 李四 草莓
// 這里仍然可以執(zhí)行 李四

看打印的結(jié)果，不僅阻斷了命名循環(huán)的執(zhí)行，而且執(zhí)行命名循環(huán)后續(xù)的代碼

4、continue 語句

和 break 語句相似。所不同的是，它不是退出一個(gè)循環(huán)，而是跳出當(dāng)前循環(huán)，繼續(xù)下一輪循環(huán)。

continue 語句只能用在 while 語句、do/while 語句、for 語句（包括 for/of、for/in 語句）循環(huán)體內(nèi), 在其他地方使用都會(huì)引起錯(cuò)誤

function fn() {
  for (var i = 1; i <= 5; i++) {
    if (i === 3) {
      continue;
    }
    console.log(i);
  }
  console.log('end'); // end
}
fn()
 // 輸出結(jié)果為  1，2，4，5

5、throw 語句

通過 throw 語句將自定義錯(cuò)誤對(duì)象拋出，從而觸發(fā) try-catch 機(jī)制進(jìn)行異常處理，達(dá)到類似跳出循環(huán)的效果。

相當(dāng)于強(qiáng)制拋錯(cuò)中斷執(zhí)行，不僅終止了循環(huán)，后續(xù)代碼也不再執(zhí)行。

try {
   for (var i = 0; i < 5; i++) {
      if (i === 3) {
         throw new Error('Jump out of loop'); // 當(dāng)i等于3時(shí)拋出錯(cuò)誤
      }
      console.log(i);
   }
} catch (error) {
   console.log(error.message); // 打印錯(cuò)誤信息
}
// 輸出結(jié)果為：0 1 2 Jump out of loop

附：JavaScript中 throw和return有什么區(qū)別？

throw 和 return 在 JavaScript 中都可以用于從函數(shù)中返回值，但它們之間有一些關(guān)鍵區(qū)別：

• 用途：return 語句用于從函數(shù)中返回一個(gè)值。當(dāng)程序執(zhí)行到 return 語句時(shí)，函數(shù)會(huì)立即終止，并將 return 語句后面的值返回給調(diào)用者。throw 語句用于拋出異常。當(dāng)程序執(zhí)行到 throw 語句時(shí)，程序會(huì)立即停止當(dāng)前執(zhí)行路徑，并嘗試查找適當(dāng)?shù)腻e(cuò)誤處理程序（如 catch 塊）。

• 錯(cuò)誤處理：throw 語句用于表示錯(cuò)誤或異常情況。當(dāng)使用 throw 拋出異常時(shí)，你通常需要在調(diào)用代碼中使用 try...catch 語句來捕獲并處理這些異常。而 return 語句只是簡單地返回函數(shù)的結(jié)果，不涉及錯(cuò)誤處理。

• 控制流：throw 語句會(huì)改變程序的控制流，使程序跳轉(zhuǎn)到離它最近的錯(cuò)誤處理程序（如 catch 塊）。如果沒有找到合適的錯(cuò)誤處理程序，程序會(huì)終止執(zhí)行。而 return 語句僅用于從函數(shù)中返回一個(gè)值，不會(huì)改變程序的控制流。

以下是一個(gè)簡單的示例，說明 throw 和 return 之間的區(qū)別：

function divide(a, b) {
  if (b === 0) {
    throw new Error("Division by zero"); // 拋出異常，表示錯(cuò)誤情況
  }
  return a / b; // 返回除法結(jié)果
}

try {
  console.log(divide(10, 2)); // 輸出：5
  console.log(divide(10, 0)); // 因?yàn)槌龜?shù)為零，將拋出異常
} catch (error) {
  console.error(error.message); // 輸出："Division by zero"
}

總之，throw 和 return 在 JavaScript 中都可以用于從函數(shù)中返回值，但它們的用途和行為有所不同。throw 用于表示錯(cuò)誤或異常情況，改變程序的控制流，并需要使用錯(cuò)誤處理程序（如 catch 塊）進(jìn)行捕獲和處理。而 return 用于簡單地返回函數(shù)的結(jié)果，不涉及錯(cuò)誤處理。

總結(jié) 

到此這篇關(guān)于JS跳出循環(huán)的5種方法(return、break、continue、throw等)的文章就介紹到這了,更多相關(guān)JS跳出循環(huán)方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論