返回

纵览JavaScript流程控制之精妙：一览全貌，掌控节奏

前端

JavaScript流程控制概述

JavaScript流程控制是指控制程序执行顺序的语句。JavaScript提供了多种流程控制语句，可以帮助你编写出复杂且高效的程序。

JavaScript流程控制语句可以分为三类：

  • 顺序流程控制语句：用于控制程序按顺序执行。
  • 分支流程控制语句：用于控制程序根据条件的不同而执行不同的语句。
  • 循环流程控制语句：用于控制程序重复执行某些语句。

顺序流程控制语句

顺序流程控制语句是最简单的流程控制语句，它可以控制程序按顺序执行。顺序流程控制语句包括：

  • {和}：用于将多个语句组合在一起形成一个代码块。
  • ;：用于分隔多个语句。
{
  console.log("Hello, world!");
  console.log("I am a JavaScript program.");
}

这段代码将首先输出"Hello, world!"，然后输出"I am a JavaScript program."。

分支流程控制语句

分支流程控制语句可以控制程序根据条件的不同而执行不同的语句。分支流程控制语句包括：

  • if语句：用于根据条件执行不同的语句。
  • switch语句：用于根据变量的值执行不同的语句。
  • 三元表达式：用于根据条件返回不同的值。

if语句

if语句是最常用的分支流程控制语句，它可以根据条件执行不同的语句。if语句的语法如下：

if (condition) {
  // if condition is true, execute these statements
} else {
  // if condition is false, execute these statements
}

其中，condition是需要判断的条件。如果condition为真，则执行if语句块中的语句；如果condition为假，则执行else语句块中的语句。

if (age >= 18) {
  console.log("You are old enough to vote.");
} else {
  console.log("You are not old enough to vote.");
}

这段代码将判断age变量的值是否大于或等于18。如果age变量的值大于或等于18，则输出"You are old enough to vote."；如果age变量的值小于18，则输出"You are not old enough to vote."。

switch语句

switch语句也是一种分支流程控制语句，它可以根据变量的值执行不同的语句。switch语句的语法如下：

switch (variable) {
  case value1:
    // if variable is equal to value1, execute these statements
    break;
  case value2:
    // if variable is equal to value2, execute these statements
    break;
  ...
  default:
    // if variable is not equal to any of the above values, execute these statements
}

其中，variable是要判断的变量，value1、value2等是variable可能取的值。当variable的值等于value1时，执行case value1:语句块中的语句；当variable的值等于value2时，执行case value2:语句块中的语句；依此类推。当variable的值不等于任何一个case语句中的值时，执行default:语句块中的语句。

switch (day) {
  case "Monday":
    console.log("Today is Monday.");
    break;
  case "Tuesday":
    console.log("Today is Tuesday.");
    break;
  case "Wednesday":
    console.log("Today is Wednesday.");
    break;
  case "Thursday":
    console.log("Today is Thursday.");
    break;
  case "Friday":
    console.log("Today is Friday.");
    break;
  default:
    console.log("Today is not a weekday.");
}

这段代码将判断day变量的值。如果day变量的值等于"Monday", "Tuesday", "Wednesday", "Thursday"或"Friday", 则输出相应的字符串；如果day变量的值不等于以上任何一个值，则输出"Today is not a weekday."。

三元表达式

三元表达式也是一种分支流程控制语句，它可以根据条件返回不同的值。三元表达式的语法如下：

condition ? expression1 : expression2

其中，condition是要判断的条件，expression1是当condition为真时要返回的值，expression2是当condition为假时要返回的值。

const age = 18;
const message = age >= 18 ? "You are old enough to vote." : "You are not old enough to vote.";

console.log(message); // You are old enough to vote.

这段代码将判断age变量的值是否大于或等于18。如果age变量的值大于或等于18，则将"You are old enough to vote."赋值给message变量；如果age变量的值小于18，则将"You are not old enough to vote."赋值给message变量。最后，将message变量的值输出到控制台。

循环流程控制语句

循环流程控制语句可以控制程序重复执行某些语句。循环流程控制语句包括：

  • for循环：用于重复执行某些语句一定次数。
  • while循环：用于重复执行某些语句，直到某个条件为假。
  • do...while循环：用于重复执行某些语句，至少执行一次，然后直到某个条件为假。

for循环

for循环是最常用的循环流程控制语句，它可以重复执行某些语句一定次数。for循环的语法如下：

for (initialization; condition; increment) {
  // execute these statements
}

其中，initialization是循环开始时执行的语句，condition是循环继续执行的条件，increment是循环每次执行后执行的语句。

for (let i = 0; i < 10; i++) {
  console.log(i);
}

这段代码将循环输出从0到9的数字。

while循环

while循环也是一种循环流程控制语句，它可以重复执行某些语句，直到某个条件为假。while循环的语法如下：

while (condition) {
  // execute these statements
}

其中，condition是循环继续执行的条件。当condition为真时，执行while循环块中的语句；当condition为假时，退出循环。

let i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

这段代码将循环输出从0到9的数字。

do...while循环

do...while循环也是一种循环流程控制语句，它可以重复执行某些语句，至少执行一次，然后直到某个条件为假。do...while循环的语法如下：

do {
  // execute these statements
} while (condition);

其中，condition是循环继续执行的条件。当condition为真时，执行do...while循环块中的语句；当condition为假时，退出循环。

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 10);

这段代码将循环输出从0到9的数字。

总结

JavaScript流程控制语句是一门复杂而深奥的艺术，它能够帮助你编写出高效、健壮、灵活的程序。本文只是简单介绍了JavaScript流程控制语句的各种用法，如果你想了解更多，可以查阅JavaScript官方文档或其他相关资料。