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 相关文章推荐
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
json数据处理及数据绑定
Jan 25 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
ionic2中使用自动生成器的方法
Mar 04 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 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 开发工具
2006/12/06 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
js使用递归解析xml
2014/12/12 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
跟老齐学Python之复习if语句
2014/10/02 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
父亲的菜园教学反思
2014/02/13 职场文书
动员大会主持词
2014/03/20 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
2014年母亲节寄语
2014/05/07 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
2019年工作总结范文
2019/05/21 职场文书
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL