JavaScript流程控制

前端

流程控制

作者

yangjh

发布日期

November 14, 2023

和其他语言一样，JavaScript 也是由上到下逐行执行代码，还可以通过分支、循环改变执行流程。

语句块

语句块用来组织多条语句。用一对花括号界定语句块。语法如下：

{
  statement_1;
  statement_2;
  ...
  statement_n;
}

注意语句块不是以分号结尾。语句块常在流程控制语句中使用。

if…else

根据设定条件，选择性地执行语句，当指定条件为 true 时会执行一条语句，如果该条件为 false，则执行另一条语句。

if (condition) {
   statements1
} else {
   statements2
}

if语句可以使用多个条件，例如：

let year = prompt('In which year was ECMAScript-2015 specification published?', '');

if (year < 2015) {
  alert( 'Too early...' );
} else if (year > 2015) {
  alert( 'Too late' );
} else {
  alert( 'Exactly!' );
}

三元运算符`?`

简单的判断，还可以使用三元运算符?来简写，?是JavaScript中唯一的三元运算符。例如：

let result = condition ? value1 : value2;

如果结果为真，则返回 value1，否则返回 value2。

switch

switch 语句对一个表达式求值，将结果与 case 子语句比较，如果匹配，则从 case 处的语句向下执行。

switch (expression) {
  case value1:
    // 当 expression 的结果与 value1 匹配时，从此处开始执行
    statements1；
    [break;]
  case value2:
    // 当 expression 的结果与 value2 匹配时，从此处开始执行
    statements2;
    [break;]
  ...
  case valueN:
    // 当 expression 的结果与 valueN 匹配时，从此处开始执行
    statementsN;
    [break;]
  default:
    // 如果 expression 与上面的 value 值都不匹配时，执行此处的语句
    statements_def;
    [break;]
}

switch 语句中的 break 语句，能保证程序执行到该语句时，不再执行后续语句，而是跳出 switch 语句块。

for

for 语句创建一个包含初始条件、终止条件和步进规则的循环体。例如下面的代码将循环 10 次（从 0-9），然后在控制台中打印出 0-9 的数字：

for (let i = 0; i < 9; i++) {
   console.log(i);
   // more statements
}

while

while 语句可以在某个条件表达式为真的前提下，循环执行指定的一段代码，直到那个表达式不为真时结束循环。语法如下：

while (condition) {
  statement
}

do…while

do...while 语句创建了一个循环，该循环执行一个指定的语句直到 condition 的值为 false。 condition 在执行 statement 后才会被赋值，statement 至少执行一次。语法如下：

do {
   statement;
   ...
 }
while (condition);

break

break 语句中止当前循环，switch 语句或 label 语句，并把程序控制流转到紧接着被中止语句后面的语句。

function testBreak(x) {
  let i = 0;

  while (i < 6) {
    if (i == 3) {
      break;
    }
    i += 1;
  }

  return i * x;
}

continue

continue 指令是 break 的“轻量版”。它不会停掉整个循环。而是停止当前这一次迭代，并强制启动新一轮循环（如果条件允许的话）。

如果我们完成了当前的迭代，并且希望继续执行下一次迭代，我们就可以使用它。

下面这个循环使用 continue 来只输出奇数：

for (let i = 0; i < 10; i++) {

  //如果为真，跳过循环体的剩余部分。
  if (i % 2 == 0) continue;

  alert(i); // 1，然后 3，5，7，9
}

回到顶部

语句块