JavaScript跳出循环的三种方法(break, return, continue)


Posted in Javascript onJuly 30, 2019

前言:

一位前端界的大神让我去思考的一个问题, 给了Big-man一段代码,如下:

function Seriously(options) {
  // if called without 'new', make a new object and return that
  if(window === this || !(this instanceof Seriously) || this.id !== undefined) {
    return new Seriously(options);
  }
}

return语句执行之后还会继续执行吗?这是大神上来让我解决的问题,既然提到了return那我也就随带解决JS中另外的两种结束循环的方法break, continue。

Break语句:

  • break语句会使运行的程序立刻退出包含在最内层的循环或者退出一个switch语句。
  • 由于它是用来退出循环或者switch语句的, 所以只有当它出现在这些语句的时候, 这种形式的break语句才是合法的。
  • 如果一个循环的终止条件非常复杂, 那么使用break语句来实现某些条件比用一个循环表达式所有的条件容易得多。
for(var i = 519; i < 550; i++) {
  if(i == 522) {
    break;
  }
  console.log(i);
  alert(i);
  document.write(i);
}
  • 当i = 521的时候,直接退出for这个循环。这个循环将不再被执行。
  • 对于输出结果的话,可以自己去测试的吧。

Continue语句:

  • continue语句和break语句相似。所不同的是,它不是退出一个循环,而是开始循环的一次新迭代。
  • continue语句只能用在while语句、do/while语句、for语句、或者for/in语句的循环体内, 在其他地方使用都会引起错误?
for(var i = 5; i >=0; i--) {
  if(i == 4 || i == 3 || i == 1) {
    continue;
  }
  console.log(i);
  alert(i);
  document.write(i);
}
  • 当i = 4、i = 3以及i = 1的时候,直接跳出for循环。下次继续执行。
  • 至于输出结果,还希望大家去打印一下。

Return语句:

return语句就是用于指定函数返回的值。return语句只能出现在函数体内,出现在代码中的其他任何地方造成语法错误!

for(var i = 1; i < 10; i++) {
  if(i == 8) {
    return;
  }
  console.log(i);
  alert(i);
  document.write(i);
}

执行结果Uncaught SyntaxError: illegal return statement(...)

  • 错误意思是非法捕获的查询返回语句。

当执行return语句时, 即使函数主题中还有其他语句, 函数执行也会停止!

<script type="text/javascript">
  if(username == "") {
    alert("please input your username: ");
    return false;
  } else if (qq == "") {
    alert("please input your qq number: ");
    return false;
  }
</script>

上面的实例里,当username为空时,就不会再向下执行,在一些表单提交中,也可以通过return false来阻止默认的提交方式,改用Ajax的提交方式,例如:

<form id="form" onSubmit="return false">
...
</form>

this对应的全局变量:

window == this这个Boolean等式,在不同的情况下的展现都不一样的。

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>

<body>
<script type="text/javascript">
  function a() {
    console.log(window === this)
  }
  a();
</script>
</body>
</html>

这个时候的window === this打印出来的是true,这也就意味着this绝对等于window。

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>

<body>
<script type="text/javascript">
  'use strict'
  function a() {
    console.log(window === this)
  }
  a();
</script>
</body>
</html>

这个时候window === this返回回来的值却是false, 而且打印出来的this是undefined的。

所以严格模式下面的代码操作需要更加的规范和合理才可以的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript数组前面插入元素的方法
Apr 06 Javascript
js实现新年倒计时效果
Dec 10 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
基于Require.js使用方法(总结)
Oct 26 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
typescript编写微信小程序创建项目的方法
Jan 29 Javascript
8个有意思的JavaScript面试题
Jul 30 #Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 #Javascript
原生js添加一个或多个类名的方法分析
Jul 30 #Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 #Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 #Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 #Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 #Javascript
You might like
PHP控制网页过期时间的代码
2008/09/28 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
PHP的PDO连接讲解
2019/01/24 PHP
jquery插件开发方法(初学者)
2012/02/03 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
virtualenv实现多个版本Python共存
2017/08/21 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
python离线安装外部依赖包的实现
2020/02/13 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
毕业生自我鉴定
2013/11/05 职场文书
大学生个人自我鉴定
2013/12/03 职场文书
物流专员岗位职责
2014/02/17 职场文书
小学社会实践活动总结
2014/07/03 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js