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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
一种JavaScript的设计模式
Nov 22 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 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&amp;mysql(三)
2006/10/09 PHP
php 购物车实例(申精)
2009/05/11 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
类似CSDN图片切换效果脚本
2009/09/17 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
Python中实现的RC4算法
2015/02/14 Python
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
python超简单解决约瑟夫环问题
2015/05/12 Python
Python中字符串的修改及传参详解
2016/11/30 Python
浅析python协程相关概念
2018/01/20 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
python远程邮件控制电脑升级版
2019/05/23 Python
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
高中体育教学反思
2014/01/24 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
党员自我剖析材料
2014/08/31 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang