一、for循環(huán)

終止for循環(huán)的方式：break和continue

break：退出循環(huán) continue：退出本次循環(huán)

let list = [1, 2, 3, 4]
for (let i = 0; i < list.length; i++) {
  if (i == 1) {
    continue
  }
  if (i == 2) { 
    break;
  }
}

二、forEach循環(huán)

用return、break、continue的方式都不能終止forEach循環(huán)，return在forEach里相當(dāng)于for循環(huán)里的continue，能夠退出本次循環(huán)，可以使用try...chtch終止foreach循環(huán)

try{
  var array = ["first","second","third","fourth"];
  // 執(zhí)行到第3次,結(jié)束循環(huán)
  array.forEach(function(item,index) {
    if(item == "third"){
      throw new Error("EndIterative");
    }
 
    console.log(item); // first second
  });
}catch(e){
  if(e.message != "EndIterative") throw e;
}
// 下面的代碼不影響繼續(xù)執(zhí)行
console.log("繼續(xù)執(zhí)行。。。");

二、map循環(huán)

·map和forEach的區(qū)別

• map不會改變原數(shù)組，而是會返回一個(gè)新的數(shù)組，數(shù)組中的元素為原數(shù)組調(diào)用callback函數(shù)處理后的值；如果是空數(shù)組，map返回的也是空數(shù)組
• forEach只針對數(shù)組的每個(gè)元素調(diào)用callback，沒有返回值，對于空數(shù)組是不會調(diào)用回調(diào)函數(shù)的，也沒有返回值

終止map循環(huán)的方式和forEach相同

let list = [1, 2, 3, 4]
try {
  list?.map(item => {
    console.log('執(zhí)行');
    if (item == 1) {
      throw new Error('stop')
    }
  })
} catch (e) {
  if (e.message !== 'stop') {
    throw e
  }
}

list?.some(item => {
  if (item == 1) {
    return true
  }
})

可以看出，forEach和map并不適合提前終止循環(huán)的情景，可以用every()、some()代替

三，for in 循環(huán)

for…in循環(huán)主要是為了遍歷對象的，break或continue可以生效

注：當(dāng)for…in用來遍歷數(shù)組時(shí)，遍歷的結(jié)果為當(dāng)前元素索引值的字符串形式

const person = {
  name: "111",
  age: 18,
  1: 1,
  job: "student",
};

for (const key in person) {
  if (key === "age") {
    break;
  }
  if (key === 'name') {
    continue;
  }
}

四，for of 循環(huán)

for…of和for…in都能用break和continue結(jié)束(跳出當(dāng)前)循環(huán)

我們都知道for…of只能用來遍歷那些內(nèi)置iterator（Array, Atring, ArrayLike, Set, Map…）或者實(shí)現(xiàn)了@@iterator方法的數(shù)據(jù)類型，而普通的Object并沒有內(nèi)置iterator

for (const val of arr) {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
if (val === 2) {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
continue;
}
if (val === 3) {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
break;
}
}

五，every()和some()

every()：相當(dāng)于且，只要有一個(gè)不滿足條件，就return false，只有都滿足條件才會返回true

some()：相當(dāng)于或，只要有一個(gè)滿足條件，就return true

let list = [
  { name:"aaa", age:3 },
  { name:"bbb", age:4 },
  { name:"ccc", age:5 },
]

var every = list.every(function (item) {
  return item.age > 4
})
console.log(eve) // false

var some = list.some(function (item) {
  return item.age > 4
})
console.log(some) // true

some退出循環(huán)：return / return true（不能return false） every退出循環(huán)：return false

附：return、continue、break三者的區(qū)別

• break: 終止整個(gè)循環(huán)(有內(nèi)層循環(huán)時(shí)終止的是內(nèi)層循環(huán))，退出switch語句；只能用于循環(huán)或者switch語句中，其他地方使用會報(bào)錯(cuò)
• continue：與break相似，不同之處在于結(jié)束的是本次循環(huán)，相當(dāng)于跳過本次循環(huán)執(zhí)行下一次循環(huán)；只能用于while,do/while,for,for/in循環(huán)中，其他地方使用會報(bào)錯(cuò)
• return: return false截?cái)嗾Z句之后的代碼執(zhí)行，如果用于函數(shù)中，可以返回一個(gè)特點(diǎn)的值，做完函數(shù)的返回值；不能用在循環(huán)中

總結(jié) 

到此這篇關(guān)于js中幾種循環(huán)的退出方式的文章就介紹到這了,更多相關(guān)js循環(huán)退出方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論