JavaScript流程控制语句

前言:

1.JavaScript的组成:

1.1ECMAScript:

1.2DOM (Document Object Model):

1.3BOM (Browser Object Model)

2.js的写法:

2.1内部写法：

2.2 外部写法：

3.流程控制语句:

3.1从这开始，代码更具有逻辑性:

3.2从这开始，代码内容更有趣，可以做些小案例:

3.3从这开始，学习难度有所上升:

4.程序的三种流程:

4.1顺序执行（顺序结构）：

4.2 选择执行（选择结构）：

4.3 循环执行（循环结构）：

5.代码块权限:

5.1通过缩进来定义代码块。例如：

5.2在JavaScript中，代码块是用大括号 {} 来界定的。

5.3JavaScript中的for循环，如果循环体内只有一条语句

5.分支语句(if):

5.1. 单分支语句（if）

5.2. 双分支语句（if...else）

5.3. 多分支语句（if...else if...else）

5.4Tips:

5.4.1逻辑运算符:

5.4.2else if的数量:

5.4.3书写顺序:

5.4.4真值与假值:

6.选择分支语句(switch):

6.1示例

6.2要点解释:

6.2.1表达式：

6.2.2穿透机制：

6.2.3与 if 语句的区别：

6.2.4case 的限制：

7.while循环:

8.do while循环:

9.break与continue

9.1break 语句：

9.2continue 语句：

10.for循环:

10.1第一个for循环示例：

10.2第二个示例是一个嵌套for循环:

结语:

前言:

今天我们继续来学习关于JavaScript的流程控制语句,我们将继续深入的去学习和了解一下关于JavaScript的更深层次的学习,这些都是我个人的学习的成果,欢迎大家的指导,如果我的文章有任何的问题也欢迎大家的指正

1.JavaScript的组成:

JavaScript主要由三个部分组成：ECMAScript、DOM（文档对象模型）和 BOM（浏览器对象模型）。

1.1ECMAScript:

ECMAScript 是 JavaScript 的核心，它提供了语言的语法、类型、语句、关键字、保留字、运算符、对象等基础的编程语法和功能。

ECMAScript 描述了 JavaScript 的基础语法和对象，不依赖于任何特定的宿主环境（如浏览器或 Node.js）。

1.2DOM (Document Object Model):

DOM 是针对 HTML 和 XML 文档的一个编程接口，它定义了文档的结构化表示，同时也定义了一种方式，使得从程序中可以对文档结构进行访问和修改。

通过 DOM，JavaScript 能够动态地修改网页内容、结构和样式。例如，可以添加、删除或修改 HTML 元素，也可以改变元素的内容、属性等。

1.3BOM (Browser Object Model)

BOM 提供了独立于任何特定文档的对象，用于浏览器窗口和脚本之间进行交互。

BOM 允许 JavaScript 与浏览器窗口及其组件（如浏览器标签页、历史记录、屏幕位置、导航等）进行交互。例如，可以使用 BOM 来控制浏览器窗口的大小、位置，甚至可以使用它来弹出新的浏览器窗口或标签页。

2.js的写法:

2.1内部写法：

直接在HTML文档的<script>标签内编写JavaScript代码。

通常放在HTML文档的<body>标签的底部，以确保在解析执行JavaScript代码之前，HTML文档已经完全加载和解析。

<script>  
// 在这里编写JavaScript代码  
alert("Hello, World!");  
</script>

2.2 外部写法：

将JavaScript代码写在一个单独的.js文件中。

在HTML文档中使用<script>标签的src属性引入该.js文件。

这种方式更适用于大型项目，因为它可以帮助保持代码的模块化和可维护性。

示例：

<script src="path/to/your/script.js"></script>

在script.js文件中，你会有类似的内容：

// script.js 文件内容  
alert("Hello, World! This is from an external JavaScript file.");

3.流程控制语句:

流程控制语句是编程中的关键组成部分，它们允许我们根据特定的条件来执行不同的代码块，或者重复执行某段代码。流程控制语句使得程序能够根据输入或环境变化动态地改变其行为。

3.1从这开始，代码更具有逻辑性:

引入流程控制语句后，代码不再是简单地从上到下顺序执行，而是可以根据条件判断、循环等来控制程序的流程。这使得代码更加具有逻辑性和灵活性。

例如，一个简单的条件判断：

temperature = 25  
if temperature >= 20:  print("It's a warm day!")  
else:  print("It's a cold day!")

3.2从这开始，代码内容更有趣，可以做些小案例:

有了流程控制语句，我们可以编写更多有趣的小案例，比如猜数字游戏：

import random  secret_number = random.randint(1, 100)  
guess = int(input("Guess a number between 1 and 100: "))  while guess != secret_number:  if guess < secret_number:  print("Too low! Try again.")  else:  print("Too high! Try again.")  guess = int(input())  print("Congratulations! You guessed the number!")

3.3从这开始，学习难度有所上升:

引入流程控制语句后，代码的复杂性会增加，因为我们需要考虑更多的逻辑分支和循环结构。但是，这也是编程魅力的一部分，它允许创建更复杂、更有趣的项目。

4.程序的三种流程:

4.1顺序执行（顺序结构）：

程序代码按照编写的顺序，从左到右，从上到下依次执行。

这是程序中最基本的执行流程，没有分支，没有跳转，也没有重复。

如果在执行过程中遇到错误（如语法错误、运行时错误等），程序会停止执行并可能抛出异常。

4.2 选择执行（选择结构）：

根据某个或某些条件的判断结果，程序会选择执行不同的代码块。

选择结构通常通过if、else if（或在某些语言中为elseif或elif）、else等关键字来实现。

例如，在Python中：

x = 10  
if x > 0:  print("x is positive")  
elif x < 0:  print("x is negative")  
else:  print("x is zero")

4.3 循环执行（循环结构）：

根据某个条件的判断结果，程序会重复执行一段代码，直到条件不再满足。

常见的循环结构有for循环和while循环。

for循环通常用于遍历一个序列（如列表、元组、字符串等）或执行固定次数的循环。

while循环则用于在满足某个条件时不断重复执行代码块。

例如，在Python中：

count = 0  
while count < 5:  print(count)  count += 1

条件判断是基于布尔类型进行判断

5.代码块权限:

5.1通过缩进来定义代码块。例如：

if some_condition:  # 这是一个代码块，它通过缩进来定义  do_something()  do_something_else()

5.2在JavaScript中，代码块是用大括号 `{}` 来界定的。

例如：

if (someCondition) {  // 这是一个代码块，它用大括号来定义  doSomething();  doSomethingElse();  
}

5.3JavaScript中的`for`循环，如果循环体内只有一条语句

为了代码的可读性和可维护性，最佳实践是即使只有一条语句也使用大括号。这样可以避免在未来添加更多语句时引入错误。例如：

for (let i = 1; i <= 10; i++) {  document.write('❤');  // 如果有其他语句，可以方便地添加在这里，且不会破坏循环结构  
}  
document.write('好'); // 这行代码会在循环结束后执行一次

5.分支语句(if):

5.1. 单分支语句（`if`）

如果满足某个条件，则执行相应的代码块。

语法:

if (condition) {  // 执行语句  
}

案例:

let age = 28;  
if (age >= 18) {  document.write('成年了，要听话懂事。');  
}

5.2. 双分支语句（`if...else`）

如果满足某个条件，执行if代码块；否则，执行else代码块。

语法:

if (condition) {  // 执行语句（如果条件为真）  
} else {  // 执行语句（如果条件为假）  
}

案例:

let num = Number(prompt('请输入这次的考试成绩'));  
document.write(num, typeof num);  
if (num >= 80) {  document.write('考得不错，带你下馆子');  
} else {  document.write('这次没考好，下次加油。先带你买零食');  
}

5.3. 多分支语句（`if...else if...else`）

根据多个条件执行不同的代码块。

语法:

if (condition1) {  // 执行语句（如果condition1为真）  
} else if (condition2) {  // 执行语句（如果condition2为真）  
} else {  // 执行语句（如果所有条件都不满足）  
}

5.4Tips:

5.4.1逻辑运算符:

可以使用&&（逻辑与）、||（逻辑或）和!（逻辑非）来组合或修改条件。

5.4.2`else if`的数量:

在一个if...else结构中，只能有一个if和一个else，但可以有多个else if。

5.4.3书写顺序:

在写多分支结构时，要注意条件的书写顺序，因为一旦满足某个条件，就会执行相应的代码块，并跳过后续的条件判断。

5.4.4真值与假值:

在JavaScript中，某些值在布尔上下文中会被自动转换为false，如0、0.0、null、undefined和空字符串''。其他值通常被转换为true。

6.选择分支语句(switch):

switch 语句在编程中用于基于不同的情况执行不同的代码块。它特别适用于检查一个变量的多个可能值，并根据这些值执行相应的操作。

以下是一个 switch 语句的简单示例，以及对要点的解释：

6.1示例

let dayOfWeek = 'Monday'; // 假设这是我们要基于其值进行判断的变量  switch (dayOfWeek) {  case 'Monday':  console.log('It\'s Monday, let\'s start the week with motivation!');  break;  case 'Tuesday':  console.log('It\'s Tuesday, keep up the good work!');  break;  case 'Wednesday':  console.log('It\'s Wednesday, we\'re halfway through the week!');  break;  case 'Thursday':  console.log('It\'s Thursday, the weekend is almost here!');  break;  case 'Friday':  console.log('It\'s Friday, time to celebrate the end of the workweek!');  break;  default:  console.log('It\'s the weekend or an invalid day!');  break;  
}

6.2要点解释:

6.2.1表达式：

switch 括号中的数据确实是一个表达式，这意味着它可以是一个变量、函数调用或任何返回值的计算。这个表达式的值将与每个 case 语句后面的值进行比较。

6.2.2穿透机制：

如果没有 break 语句，程序会继续执行下一个 case 块，直到遇到 break 或者 switch 语句结束。这被称为 switch 的穿透（fall-through）行为。在某些情况下，这种行为可能是有用的，但在大多数情况下，为了避免意外的行为，每个 case 块后都应该有一个 break 语句。

6.2.3与 `if` 语句的区别：

switch 语句在处理多个离散值时通常比多个 if-else if 语句更清晰、更易于阅读和维护。当检查的值是离散的、可枚举的，并且每个值都需要不同的处理时，使用 switch 是很合适的。另一方面，if 语句在处理更复杂的条件逻辑或范围检查时更为灵活。

6.2.4`case` 的限制：

每个 case 后面确实只能跟一个值进行比较（在某些语言中，如 JavaScript ES6 之后，可以使用表达式）。但是，可以通过逻辑结构（如将多个 case 的代码组合到同一个代码块中）来模拟多个值的匹配。

7.while循环:

while循环是一种基本的控制流语句，它允许程序在满足某个条件时重复执行一段代码。

循环的目的是减少重复代码,提高运行效率循环语句基于条件判断执行. 条件为真/满足时循环执行. 为假/不满足时结束循环

let num = 1; // 初始化变量num为1  
while(num <= 100){ // 设置循环条件：当num小于等于100时循环继续  console.log(`这是我喝的第${num}杯热水`); // 执行语句：打印当前num值对应的消息  num++; // 更新条件：将num的值增加1  
}

在这个例子中，num初始化为1，并且循环会继续执行，只要num的值小于或等于100。在每次循环迭代中，都会打印出一条消息，显示当前是“喝的第几杯热水”，然后通过num++将num的值增加1。这个过程会一直重复，直到num的值超过100，此时循环条件变为假，循环结束。

这个循环是安全的，因为它有一个明确的终止条件，即num的值最终会超过100，从而结束循环。这样的循环结构是有效的，因为它避免了无限循环（死循环）的风险，同时实现了代码的重复执行，提高了效率。

8.do while循环:

do...while 循环与 while 循环相似，但有一个关键的区别：do...while 循环会先执行一次循环体内的代码，然后再检查循环条件，而 while 循环则先检查条件再执行循环体内的代码。因此，do...while 循环至少会执行一次，即使循环条件在第一次判断时就不满足。

下面是 do...while 循环的语法：

do {  // 执行语句  
} while (循环条件);

这里是一个简单的 do...while 循环示例，它展示了循环至少会执行一次的特点：

let i = 0;  do {  console.log(i);  i++;  
} while (i < 1); // 这个条件在第一次执行后就不满足了  // 输出将会是: 0  
// 即使初始条件 i < 1 在第一次判断后即为 false，do...while 也会先执行一次循环体

在这个例子中，即使 i 的初始值使得 i < 1 这个条件在第一次判断时即为 false，do...while 循环仍然会执行一次，打印出 0。

do...while 循环在处理需要至少执行一次的循环任务时特别有用，比如用户输入验证，你可能想至少给用户一次机会输入正确的信息，即使他们的第一次尝试不符合要求。

在实际编程中，选择 while 循环还是 do...while 循环取决于你的具体需求。如果你希望在条件不满足时也至少执行一次循环体，那么 do...while 是更好的选择。如果你希望在条件不满足时避免执行循环体，那么应该使用 while 循环。

9.break与continue

在循环结构中，break 和 continue 提供了对循环流程的额外控制。

`9.1break` 语句：

当循环遇到 break 时，会立即终止当前整个循环，不论循环条件是否还满足，循环都不会再继续执行。例子中，当 num 等于70时，打印出提示信息并使用 break 终止循环，

`9.2continue` 语句：

当循环遇到 continue 时，会跳过当前循环的剩余部分，直接进入下一次循环。作业例子中，当 page 等于70、19、50或13时，使用 continue 跳过这些页码，不执行 document.write，就像跳过没写的作业页码一样。

let page = 1; // 作业页码从1开始  
while (page <= 100){  if(page == 70 || page == 19 || page == 50 || page == 13){  page++; // 跳过当前页码，进入下一页  continue;  }  document.write(`我在写第${page}页作业<br>`);  page++; // 完成一页后，页码递增  
}

10.for循环:

迭代循环 -- 循环次数已知/遍历数据时. 比起while更高效

for(初始化变量;循环条件;更新操作;){        执行语句  }

10.1第一个`for`循环示例：

for(let i=1; i<=10; i++){  console.log(i, '多喝热水');  
}

这个循环从i=1开始，每次循环i自增1，直到i大于10时循环结束。在每次循环中，它都会打印出当前的i值和字符串'多喝热水'。

10.2第二个示例是一个嵌套`for`循环:

用于输出一个10x10的爱心方阵：

for(let i = 1; i <= 10; i++){  for(let j = 1; j <= 10; j++){  document.write('❤');  }  document.write('<br>');  
}

在这个示例中，外循环控制行数（i从1到10），内循环控制每行的列数（j从1到10）。对于每一行（由外循环控制），内循环会输出10个爱心符号（'❤'）。当内循环结束时，表示一行的10个爱心已经输出完毕，此时通过document.write('<br>');输出一个换行符，以便开始新的一行。这个过程会重复10次，直到外循环也结束，最终形成一个10x10的爱心方阵。

实际上内循环和外循环都是执行10次，因此输出的是一个10x10的方格，而不是仅仅是一个10行的列表。