前端开发小 -JavaScript- break、continue、return、try-catch:间的区别终止数组的 forEach 循环

前言

• 本编文章主要重点在比较 break、continue、return、try-catch 结束循环的区别和对应的使用场景；
  • 明白这几种终止循环方式的区别，也就知晓如何中终止 forEach 循环了；
• 终止数组的 forEach 循环也会详细有记录的；
• ⚠ break 和 continue 只能用来结束循环语句，不能用来结束函数；

一、break

• 退出整个循环（结束循环）；
• 一般用于结果已经得到，都需的循环不需要的时候；
• 在一些计算机语言中 break 是保留字，起作用大多数情况下终止上一层循环；
• 代码展示：

  const arr = [1, 2, 3, 4, 5];
  for(let i = 0; i < arr.length; i  ) {
      if (arr[i] >= 3) {
          console.log(111);
          break;
      }
      console.log(arr[i]);
  }
  

• 运行结果展示：
  

二、continue

• 退出本次循环，继续下一次循环；
• 一般能用于排除或者跳过某一个选项的时候；
• continue在循环结构中用来跳过本次循环中剩余的代码，并且在条件求值为真的时候开始下一次循环；
• 🔺 注意：
  • 不能省略 continue 后面的分号，会导致胡乱；
• 代码展示：

const arr = [1, 2, 3, 4, 5];
for(let i = 0; i < arr.length; i  ) {
    if (arr[i] >= 3) {
        console.log(111);
        continue;
    }
    console.log(arr[i]);
}

• 运行结果展示：
  

三、return

• 用来结束函数，不能终止循环；
• 注意：
  • return 不能用来结束 数组的 forEach 方法；
  • 如果想要结束 forEach 可以使用 try-catch；
• 运行结果展示：
  

四、try-catch

• 语法：

  try {
      // 有可能出错的逻辑
  } catch(err) {
      // 出错之后的处理
  }
  

• ⚠ 注意：
  • 如果 try 中的代码没有出错，则程序正常运行 try 中的内容后，不会执行 catch 中的内容；
  • 如果 try 中的代码一旦出错，程序立即跳入 catch 中去执行代码，那么 try 中出错代码后的所有代码就不再执行；

五、以上方式在 forEach 中的使用

✅ 使用 try-catch 结束 forEach 循环：

const arr = [1, 2, 3, 4, 5];
try {
    arr.forEach(item => {
        if (item >= 4) throw Error();
        console.log(item);
    });
} catch(err) {
    console.log('终止循环');
}

• 运行结果展示：

❌ forEach 中使用 return（不能结束循环）

• forEach 中的 return 是：结束当前循环继续下一次循环；
• 代码展示：

  const arr = [1, 2, 3, 4, 5];
  arr.forEach(item => {
      if (item >= 3) {
          console.log(111);
          return;
      }
      cosnole.log(item);
  })
  

  

❌forEach 中使用 break 和 continue（不能用在函数中，会报错）

• 注意：
  • break continue 用来结束循环语句，但是不能用来结束函数；
  • 在 forEach 中使用的时候，会报错；
• 代码展示：

const arr = [1, 2, 3, 4, 5];
arr.forEach(item => {
    if (item >= 3) {
        console.log(111);
        // break;
        continue;
    }
    console.log(item);
})

• 运行效果展示：
  

这篇好文章是转载于：学新通技术网