目录
1.2DOM (Document Object Model):
5.2在JavaScript中，代码块是用大括号 {} 来界定的。
5.3JavaScript中的for循环，如果循环体内只有一条语句
5.3. 多分支语句（if...else if...else）
前言:
今天我们继续来学习关于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.2else 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.4case 的限制：
每个 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行的列表。
结语:
好了,今天关于JavaScript的流程控制语句的分享就先到这里了,以上的内容都是我个人的学习成果如果有所遗漏欢迎大家的指正,同时也欢迎大家在评论区和谐讨论,小编在这里谢谢大家了。
扫一扫
824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
