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 相关文章推荐
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
jQuery 性能优化手册 推荐
Feb 23 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
关于AOP在JS中的实现与应用详解
May 06 Javascript
vue实现搜索过滤效果
May 28 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
Opacity.js
2007/01/22 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
Python遍历numpy数组的实例
2018/04/04 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
python web框架中实现原生分页
2019/09/08 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
银行见习期自我鉴定
2014/01/29 职场文书
小学生家长评语集锦
2014/01/30 职场文书
大学生个人自荐信
2014/02/24 职场文书
汽车维修求职信
2014/06/15 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
护士自荐信范文
2015/03/25 职场文书
前台接待员岗位职责
2015/04/15 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
Mysql排序的特性详情
2021/11/01 MySQL
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL