前言

  在日常开发中我们经常使用到递归、break、continue、return等语句改变程序运行的位置,其实,在 JavaScript 中还提供了标签语句,用于标记指定的代码块,便于跳转到指定的位置。本文来记录一下标签语句的使用方法。

正文

  1.标签语句介绍

  标签语句用于给语句加标签,标签可以与变量重名,它是一个独立的语法元素(既不是变量,也不是类型),其作用是标识”标签化语句(labeled statement)”相当于定位符,用于跳转到程序的任意位置,语法如下:
  label: statement

例如:

    hello:console.log("hello")

  标签语句可以改变程序的执行流程,类似于break,continue和return。其中break和continue可以和标签一起使用。

  2.标签语句使用

  (1)标签语句和 break 配合使用,跳出特定的循环
    let num = 0;
mylabel:
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
if (i == 5 && j == 5) {
break mylabel;
}
num++;
}
}
console.log(num); // 55
  在这个例子中, outermost 标签标识的是第一个 for 语句。正常情况下,每个循环执行 10 次,意味着 num++ 语句会执行 100 次,而循环结束时 console.log 的结果应该是 100。但是, break 语句带来了一个变数,即要退出到的标签。添加标签不仅让 break 退出(使用变量 j 的)内部循环,也会退出(使用变量 i 的)外部循环。当执行到 i 和 j 都等于 5时,循环停止执行,此时 num 的值是 55。
  (2)标签语句和 continue 配合使用
    let num = 0;
mylabel:
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
if (i == 5 && j == 5) {
continue mylabel;
}
num++;
}
}
console.log(num); // 95
  continue 语句会强制循环继续执行,但不是继续执行内部循环,而是继续执行外部循环。当 i 和 j 都等于 5 时,会执行 continue ,跳到外部循环继续执行,从而导致内部循环少执行 5 次,结果 num 等于 95。

写在最后

  组合使用标签语句和 break 、 continue 能实现复杂的逻辑,但也容易出错。注意标签要使用描述性强的文本,而嵌套也不要太深。

  以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。

js--标签语法的使用的更多相关文章

  1. JS高级语法与JS选择器

    元素(element)和节点(node) childNode属性和children属性的区别 <!DOCTYPE html> <html lang="en"> ...

  2. Vue.js 数据绑定语法详解

    Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...

  3. ECMall2.x模板制作入门系列之2(模板标签/语法)

    ECMall2.x模板制作入门系列之2(模板标签/语法) 今天给大家带来一个模板语法的教程.希望能为ECMall模板制作者提供一份参考资料.如有问题.建议和意见,欢迎提出. 在ECMall模板中,用& ...

  4. Vue.js 模板语法

    本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...

  5. HTML&CSS基础学习笔记1.3-HTML的标签语法

    HTML标签语法 1. 标签由英文尖括号<和>括起来,如<html>就是一个标签. 2. HTML中的标签一般都是成对出现的,分开始标签和结束标签.结束标签比开始标签多了一个/ ...

  6. ExtJs4 笔记(2) ExtJs对js基本语法扩展支持

    本篇主要介绍一下ExtJs对JS基本语法的扩展支持,包括动态加载.类的封装等. 一.动态引用加载 ExtJs有庞大的类型库,很多类可能在当前的页面根本不会用到,我们可以引入动态加载的概念来即用即取.这 ...

  7. js基本语法汇总

    1.分类 ECMAScript js基本语法与标准 DOM Document Object Model文档对象模型 BOM Browser Object Model浏览器对象模型 tips:DOM和B ...

  8. ExtJs对js基本语法扩展支持

    ExtJs对js基本语法扩展支持 本篇主要介绍一下ExtJs对JS基本语法的扩展支持,包括动态加载.类的封装等. 一.动态引用加载 ExtJs有庞大的类型库,很多类可能在当前的页面根本不会用到,我们可 ...

  9. JavaScript进阶 - 第2章 你要懂的规则(JS基础语法)

    第2章 你要懂的规则(JS基础语法) 2-1什么是变量 什么是变量? 从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品 ...

  10. [转载]ExtJs4 笔记(2) ExtJs对js基本语法扩展支持

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/) 本篇主要介绍一下ExtJs对JS基本语法的扩展支持,包括动态加载.类的封装等. 一.动态引 ...

随机推荐

  1. Data Augmentation

    常见操作: 水平翻转-Horizontal Flip Scale-亮度变化 透视变换-perspective,旋转-rotation,错切-Shear,仿射-affine等 尺寸变幻-Resize,可 ...

  2. SpringMVC笔记(2)

    一.SpringMVC的数据响应 1.1 数据响应方式 1.1.1 页面跳转 直接返回字符串 将返回的字符串与内部资源视图解析器的前后缀拼接 进行访问(默认为转发) 通过ModelAndView对象返 ...

  3. Servlet3.0注解配置访问路径和urlParttern配置

    一.Servlet用注解配置访问路径 二.IDEA的tomcat相关配置 其中,第一点的配置文件,直接在IDEA的可视化操作界面修改就可以改掉配置文件中内容: 三.urlParttern配置 其中,* ...

  4. [第十一篇]——Docker 仓库管理之Spring Cloud直播商城 b2b2c电子商务技术总结

    Docker 仓库管理 仓库(Repository)是集中存放镜像的地方.以下介绍一下 Docker Hub.当然不止 docker hub,只是远程的服务商不一样,操作都是一样的. Docker H ...

  5. MSSQL2008 无法分配空间,因为PRIMARY文件组已满

    1.收缩数据库日志 https://jingyan.baidu.com/article/1709ad808a279f4635c4f060.html 完整代码: --查看数据库的存放位置-- selec ...

  6. ms sql 带自增列 带外键约束 数据导入导出

    1,生成建表脚本 选中要导的表,点右键-编写表脚本为-create到  ,生成建表脚本 2,建表(在新库),但不建外键关系 不要选中生成外键的那部分代码,只选择建表的代码 3,导数据,用SQL STU ...

  7. freeswitch编译安装依赖

    ncurses:提供字符界面 zlib:数据压缩 libjpeg:JPEG图片格式数据的解码/编码/其他. lua:lua解释器 libedit:一种编辑操作的库,对一些可以交互操作的场景,或转为了自 ...

  8. ThinkCMF5.1主要特性

    更改框架协议为MIT,让你更自由地飞 基于ThinkPHP 5.1重构,但核心代码兼容5.0版本,保证老用户最小升级成本 增加对swoole支持,同时支持swoole协程和全同步模式(请单独安装扩展) ...

  9. 猪齿鱼 SaaS 版效能平台发布

    ​日前,猪齿鱼Choerodon全场景效能平台Saas版发布,提供体系化方法论和协作.测试.DevOps及容器工具,帮助企业拉通需求.设计.开发.部署.测试和运营流程,一站式提高管理效率和质量.从团队 ...

  10. Shell系列(13)- read

    前言 作用是往脚本中传递参数,之前文章的位置参数变量也有此功能,但是只适用于脚本的作者,为什么?第三方用户不知道这个脚本要传递哪些参数,这些参数分别是什么.本篇随笔read就可以实现上述功能,别且该命 ...