JS的控制流程

简介: Block一个块语句可以用来管理零个或多个语句。该区块是由一对大括号分隔。块声明:{ StatementList }通过var声明的变量没有块级作用域。在语句块里声明的变量作用域是其所在的函数或者 script 标签内,你可以在语句块外面访问到它。换句话说,语句块 不会生成一个新的作用域。尽管单独的语句块是合法的语句,但在JavaScript中你不会想使用单独的语句块,因为它们不像你想象的C或Java中的语句块那样处理事物。例如:

Block



一个块语句可以用来管理零个或多个语句。该区块是由一对大括号分隔。


块声明:


{ StatementList }


通过var声明的变量没有块级作用域。在语句块里声明的变量作用域是其所在的函数或者 script 标签内,你可以在语句块外面访问到它。换句话说,语句块 不会生成一个新的作用域。尽管单独的语句块是合法的语句,但在JavaScript中你不会想使用单独的语句块,因为它们不像你想象的C或Java中的语句块那样处理事物。例如:


var x = 1;
{
  var x = 2;
}
console.log(x); // 输出 2


使用letconst


相比之下,使用 letconst声明的变量是块级作用域的。


let x = 1;
{
  let x = 2;
}
console.log(x); // 输出 1
const c = 1;
{
  const c = 2;
}
console.log(c); // 输出1, 而且不会报错


相比之下,使用 letconst声明的变量是块级作用域的。


使用function


函数声明同样被限制在声明他的语句块内:

foo('outside');  // TypeError: foo is not a function
{
  function foo(location) {
   console.log('foo is called ' + location);
  }
  foo('inside'); // 正常工作并且打印 'foo is called inside' 
}


break



终止当前的循环,switch 或 label 语句,使程序跳到下一个语句执行。


break语句包含一个可选的标签,可允许程序摆脱一个被标记的语句。break语句需要内嵌在引用的标签中。被标记的语句可以是任何 语句;不一定是循环语句。

function testBreak(x) {
  var i = 0;
  while (i < 6) {
    if (i == 3) {
      break;
    }
    i += 1;
  }
  return i * x;
}


下面的代码中一起使用 break 语句和被标记的块语句。一个 break 语句必须内嵌在它引用的标记中。注意,inner_block 内嵌在 outer_block 中。

outer_block:{
  inner_block:{
    console.log ('1');
    break outer_block;      // breaks out of both inner_block and outer_block
    console.log (':-(');    // skipped
  }
  console.log ('2');        // skipped
}


continue


终止执行当前或标签循环的语句,直接执行下一个迭代循环。


break 语句的区别在于, continue 并不会终止循环的迭代,而是:


  • while 循环中,控制流跳转回条件判断;


  • for 循环中,控制流跳转到更新语句。


continue 语句可以包含一个可选的标号以控制程序跳转到指定循环的下一次迭代,而非当前循环。此时要求 continue 语句在对应的循环内部。


Empty



空语句用来表示没有语句的情况,尽管 JavaScript 语法期望有语句提供。


提示:在使用空语句的情况下专门写上注释是个不错的主意,因为不是很容易区分空语句和普通的分号。


一个例子:if...else 语句不带花括号({})。如果threetrue, 不会发生任何事,four不会执行,同时else从句中的launchRocket()函数也不会执行。

if (one)
  doOne();
else if (two)
  doTwo();
else if (three)
  ; // nothing here
else if (four)
  doFour();
else
  launchRocket();


if...else


如果指定的条件是 true ,则执行相匹配的一个语句,若为 false,则执行另一个语句。

if (condition)
   statement1
[else
   statement2]
// else if的语法
if (condition1)
   statement1
else if (condition2)
   statement2
else if (condition3)
   statement3
...
else
   statementN


  • 要在一个从句中执行多条语句,可使用语句块({ ... })。通常情况下,一直使用语句块是个好习惯,特别是在涉及嵌套if语句的代码中


不要将原始布尔值的truefalseBoolean对象的真或假混淆。任何一个值,只要它不是 undefinednull0NaN或空字符串(""),那么无论是任何对象,即使是值为假的Boolean对象,在条件语句中都为真。例如:

var b = new Boolean(false);
if (b) //表达式的值为true


建议不要在条件表达式中单纯的使用赋值运算,因为粗看下赋值运算的代码很容易让人误认为是等性比较。


如果你需要在条件表达式中使用赋值运算,用圆括号包裹赋值运算。例如:

if ((x = y)) {
   /* do the right thing */
}


switch



计算表达式,将子句于表达式的值做匹配,执行与该值相关联的语句。

switch (expression) {
  case value1:
    // 当 expression 的结果与 value1 匹配时,执行此处语句
    [break;]
  case value2:
    // 当 expression 的结果与 value2 匹配时,执行此处语句
    [break;]
  ...
  case valueN:
    // 当 expression 的结果与 valueN 匹配时,执行此处语句
    [break;]
  [default:
    // 如果 expression 与上面的 value 值都不匹配,执行此处语句
    [break;]]
}


一个 switch 语句首先会计算其 expression 。然后,它将从第一个 case 子句开始直到寻找到一个其表达式值与所输入的 expression 的值所相等的子句(使用 严格运算符===)并将控制权转给该子句,执行相关语句。(如果多个 case 与提供的值匹配,则选择匹配的第一个 case,即使这些 case 彼此间并不相等。)


如果没有 case 子句相匹配,程序则会寻找那个可选的 default 子句,如果找到了,将控制权交给它,执行相关语句。若没有 default 子句,程序将继续执行直到 switch 结束。按照惯例,default 子句是最后一个子句,不过也不需要这样做。

可选的 break 语句确保程序立即从相关的 case 子句中跳出 switch 并接着执行 switch 之后的语句。若 break 被省略,程序会继续执行 switch 语句中的下一条语句。

即使你把 default 放到其它 case 之上,它仍有效。但是建议将default语句放到最后一句.


try...catch



标记一个语句块,并指定一个应该抛出异常的反馈。(Marks a block of statements to try, and specifies a response, should an exception be thrown.)


try语句包含了由一个或者多个语句组成的try块, 和至少一个catch子句或者一个finally子句的其中一个,或者两个兼有, 下面是三种形式的try声明:


  1. try...catch


  1. try...finally


  1. try...catch...finally


catch子句包含try块中抛出异常时要执行的语句。也就是,你想让try语句中的内容成功, 如果没成功,你想控制接下来发生的事情,这时你可以在catch语句中实现。 如果在try块中有任何一个语句(或者从try块中调用的函数)抛出异常,控制立即转向catch子句。如果在try块中没有异常抛出,会跳过catch子句。


finally子句在try块和catch块之后执行但是在下一个try声明之前执行。无论是否有异常抛出或捕获它总是执行。


你可以嵌套一个或者更多的try语句。如果内部的try语句没有catch子句,那么将会进入包裹它的try语句的catch子句。


你也可以用try语句去处理 JavaScript 异常。参考JavaScript 指南了解更多关于 Javascript 异常的信息。


下面用符合 ECMAscript 规范的简单的 JavaScript 来编写相同的“条件catch子句”(显然更加冗长的,但是可以在任何地方运行):

try {
    myroutine(); // may throw three types of exceptions
} catch (e if e instanceof TypeError) {
    // statements to handle TypeError exceptions
} catch (e if e instanceof RangeError) {
    // statements to handle RangeError exceptions
} catch (e if e instanceof EvalError) {
    // statements to handle EvalError exceptions
} catch (e) {
    // statements to handle any unspecified exceptions
    logMyErrors(e); // pass exception object to error handler
}


throw



抛出一个用户定义的异常。


语法: throw expression;

throw "Error2"; // 抛出了一个值为字符串的异常
throw 42;       // 抛出了一个值为整数42的异常
throw true;     // 抛出了一个值为true的异常


function UserException(message) {
   this.message = message;
   this.name = "UserException";
}
function getMonthName(mo) {
   mo = mo-1; // 调整月份数字到数组索引 (1=Jan, 12=Dec)
   var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul",
      "Aug", "Sep", "Oct", "Nov", "Dec"];
   if (months[mo] !== undefined) {
      return months[mo];
   } else {
      throw new UserException("InvalidMonthNo");
   }
}
try {
   // statements to try
   var myMonth = 15; // 15 超出边界并引发异常
   var monthName = getMonthName(myMonth);
} catch (e) {
   var monthName = "unknown";
   console.log(e.message, e.name); // 传递异常对象到错误处理
}


重新抛出异常


你可以使用throw来抛出异常。下面的例子捕捉了一个异常值为数字的异常,并在其值大于50后重新抛出异常。重新抛出的异常传播到闭包函数或顶层,以便用户看到它。


try {
   throw n; // 抛出一个数值异常
} catch (e) {
   if (e <= 50) {
      // 异常在 1-50 之间时,直接处理
   } else {
      // 异常无法处理,重新抛出
      throw e;
   }
}




目录
相关文章
|
6月前
|
JavaScript 前端开发 算法
设计一个简单的JavaScript版“俄罗斯方块”游戏的基本逻辑流程。
```md 设计JavaScript版俄罗斯方块游戏涉及初始化环境、创建游戏容器、管理变量、加载音效。游戏循环中生成方块、键盘控制移动与旋转、碰撞锁定、行消除及分数更新。当游戏区域填满时结束游戏,显示结束画面。还包括暂停、重置等辅助功能。伪代码示例展示了核心逻辑,实际实现需考虑更多细节和用户体验增强。 ```
128 3
|
6月前
|
Web App开发 JavaScript 前端开发
Node.js 的事件循环原理、工作流程
Node.js 的事件循环原理、工作流程
112 0
|
6月前
|
JavaScript 前端开发 开发者
从0开始学习JavaScript--JavaScript 流程控制
JavaScript中的流程控制结构是编写结构化、可读性强的代码的关键。本文将深入研究JavaScript中的流程控制,包括条件语句、循环结构、跳转语句等,并通过丰富的示例代码来更全面地了解和运用这些概念。
|
6月前
|
Android开发
Autox.js 脚本开发环境搭建,从案例到打包apk(详细流程)
Autox.js 脚本开发环境搭建,从案例到打包apk(详细流程)
1885 0
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-流程控制之while循环
这篇文章介绍了JavaScript中的while循环和do...while循环的基础知识,并通过一个实际案例演示了如何使用while循环计算投资增长到特定金额所需的年数。
50 2
JavaScript基础知识-流程控制之while循环
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
65 3
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-流程控制之for循环
这篇文章讲解了JavaScript中的for循环的基础知识,并通过一个实例演示了如何使用for循环来找出所有的三位水仙花数。
47 6
JavaScript基础知识-流程控制之for循环
|
3月前
|
大数据 数据处理 分布式计算
JSF 逆袭大数据江湖!看前端框架如何挑战数据处理极限?揭秘这场技术与勇气的较量!
【8月更文挑战第31天】在信息爆炸时代,大数据已成为企业和政府决策的关键。JavaServer Faces(JSF)作为标准的 Java Web 框架,如何与大数据技术结合,高效处理大规模数据集?本文探讨大数据的挑战与机遇,介绍 JSF 与 Hadoop、Apache Spark 等技术的融合,展示其实现高效数据存储和处理的潜力,并提供示例代码,助您构建强大的大数据系统。
49 0
|
3月前
|
JavaScript 前端开发 API
解锁前端开发新境界:Vue.js携手Webpack,打造高效构建流程,你的项目值得拥有!
【8月更文挑战第30天】随着前端技术的发展,模块化与组件化趋势愈发显著。Vue.js 以其简洁的 API 和灵活的组件系统,深受开发者喜爱;Webpack 则凭借强大的模块打包能力成为前端工程化的基石。两者结合,不仅简化了组件编写与引用,还通过模块热替换、代码分割等功能大幅提升开发效率。本文将通过具体示例,展示如何利用 Vue.js 和 Webpack 构建高效、有序的前端开发环境。从安装配置到实际应用,逐步解析这一组合的优势所在。
49 0
|
4月前
|
前端开发 NoSQL 数据库
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改