JavaScript中的重复处理
本文将解释JavaScript中的重复处理。
YouTube Video
JavaScript中的for语句
基本语法
1for (initialization; condition; update) {
2 // Code to repeat
3}JavaScript中的for语句是一种用于执行迭代的语法。只要满足特定条件，它就会重复执行指定的代码块。通过使用for语句，可以高效地多次执行相同的过程。
- 初始化（
initialization）：在开始循环之前只执行一次的部分。初始化变量，例如循环计数器。 - 条件（
condition）：决定是否继续循环的条件。如果为true，循环继续；如果为false，循环结束。 - 更新（
update）：在每次循环结束时执行，用于更新循环计数器。
示例
1for (let i = 0; i < 5; i++) {
2 console.log(i);
3}在这个例子中，i从0开始，只要i < 5为true时循环继续运行。i++ 会在每次循环迭代中将 i 增加 1。因此，会显示从0到4的数字。
循环计数器的作用域
在for语句的初始化部分声明或初始化变量。在此声明的变量仅在循环内有效。
1for (let i = 0; i < 3; i++) {
2 console.log(i); // Outputs 0, 1, 2
3}
4console.log(i); // ReferenceError
- 如示例中所示，在
for语句外部引用变量会导致错误。
无限循环
设置一个不会结束循环的条件会导致无限循环。这可能会给浏览器或系统带来负担，因此需要谨慎。
1for (;;) {
2 console.log("Infinite loop");
3 break; // Exits the infinite loop with break
4}数组与for语句
通常将for语句与数组结合使用。处理数组的每个元素非常方便。
示例
1let fruits = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4 console.log(fruits[i]);
5}
6// Outputs "apple", "banana", "cherry"
通过这种方式，可以使用索引处理数组的每个元素。
其他循环结构
for...of 语句
for...of 语句用于可迭代对象，例如数组和字符串。
1let fruits = ["apple", "banana", "cherry"];
2
3for (let fruit of fruits) {
4 console.log(fruit);
5}
6// Outputs "apple", "banana", "cherry"
它允许你在不使用索引的情况下处理每个元素。
for...in 语句
for...in 语句用于遍历对象的属性。
1let person = { name: "John", age: 30, city: "Tokyo" };
2
3for (let key in person) {
4 console.log(key + ": " + person[key]);
5}
6// Outputs "name: John", "age: 30", "city: Tokyo"
通过这种方式，可以使用键对每个元素执行操作。
总结
for语句是一种包含三个部分的循环结构：初始化、条件和更新。- 可以使用
break或continue控制循环的行为。 - 与数组或对象结合时，可以高效地处理元素或属性。
JavaScript 中的 while 语句
基本语法
1while (condition) {
2 // Code that repeats while the condition is true
3}JavaScript 中的 while 语句是一种循环结构，只要指定条件为 true 就会执行重复操作。与 for 语句类似，while 语句仅指定条件。
- 条件：编写决定是否继续循环的条件表达式。当条件为
true时循环继续，当条件变为false时结束。
示例
1let i = 0;
2
3while (i < 5) {
4 console.log(i);
5 i++;
6}
7console.log(i); // 5
在此示例中，循环从变量 i 等于 0 开始，当 i < 5 为 true 时执行。在每次循环迭代中，i 增加 1，当 i 变为 5 时，条件变为 false，循环结束。因此，while 语句显示从 0 到 4。
与 for 语句不同，在 while 语句中，变量的初始化和更新被写成单独的语句。在 while 语句之后还可以引用该变量。在这种情况下，while 语句结束后会显示 5。
无限循环
如果条件始终为 true，会发生无限循环而不会结束。应避免无限循环，但如果有意使用，可以通过 break 语句终止循环。
示例
1while (true) {
2 console.log("Infinite loop");
3 break; // Ends the loop with `break`
4}使用 while 循环处理数组
也可以使用 while 语句处理数组。
示例
1let fruits = ["apple", "banana", "cherry"];
2let i = 0;
3
4while (i < fruits.length) {
5 console.log(fruits[i]);
6 i++;
7}
8// Outputs "apple", "banana", "cherry"
do...while 语句
基本语法
1do {
2 // Code that is executed at least once
3} while (condition);do...while 语句是 while 语句的一种变体，它至少执行一次循环后才检查条件。while 语句会先检查条件，而 do...while 语句会先执行一次操作，然后再验证条件。
示例
1let i = 0;
2
3do {
4 console.log(i);
5 i++;
6} while (i < 5);在此示例中，i 的值从 0 展示到 4。do...while 语句不同于 while 语句，即使条件为 false，它也会先执行一次代码。
总结
while语句用于在条件为true时重复执行代码。- 请注意避免无限循环，可以使用
break和continue控制循环流程。 - 当您需要至少执行一次循环时，
do...while语句非常有用。
break 和 continue
您可以在循环内使用 break 和 continue。
break用于提前终止循环。continue跳过当前迭代并继续下一次迭代。
break 示例
1for (let i = 0; i < 10; i++) {
2 if (i === 5) {
3 break; // Exits the loop when i is 5
4 }
5 console.log(i);
6}
7// Outputs 0, 1, 2, 3, 4
8
9let i = 0;
10
11while (i < 10) {
12 if (i === 5) {
13 break; // Ends the loop when i is 5
14 }
15 console.log(i++);
16}
17// Outputs 0, 1, 2, 3, 4
在这种情况下，当 i 等于 5 时执行 break。因此，会显示从0到4的数字。
continue 示例
1for (let i = 0; i < 5; i++) {
2 if (i === 2) {
3 continue; // Skips when i is 2
4 }
5 console.log(i);
6}
7// Outputs 0, 1, 3, 4
8
9let i = 0;
10while (i < 5) {
11 if (i === 2) {
12 i++;
13 continue; // Skips when i is 2
14 }
15 console.log(i);
16 i++;
17}
18// Outputs 0, 1, 3, 4
在这种情况下，当 i 等于 2 时执行 continue。结果显示除了 2 以外的数字。
JavaScript 中的嵌套循环
在 JavaScript 编程中，嵌套循环 是指一个循环嵌套在另一个循环中的结构。当特定算法或过程跨越多个维度或层次时，嵌套循环非常有效。例如，处理包含数组的多维数组是一个典型的案例。
在这里，我们将介绍嵌套循环的基本结构、使用示例、注意事项和优化考虑。
嵌套循环的基本结构
嵌套循环的基本结构是一种将一个或多个循环包含在另一个循环中的形式。外层循环每执行一次，内层循环将执行多次。
以下是两个嵌套循环的基本示例。
1for (let i = 0; i < 3; i++) {
2 console.log(`Outer loop iteration: ${i}`);
3
4 for (let j = 0; j < 2; j++) {
5 console.log(` Inner loop iteration: ${j}`);
6 }
7}
8// Output:
9// Outer loop iteration: 0
10// Inner loop iteration: 0
11// Inner loop iteration: 1
12// Outer loop iteration: 1
13// Inner loop iteration: 0
14// Inner loop iteration: 1
15// Outer loop iteration: 2
16// Inner loop iteration: 0
17// Inner loop iteration: 1
在上述代码中，i 在外层循环中计数，j 在内层循环中计数。外层循环每执行一次，内层循环执行两次。
嵌套循环的实际应用示例
嵌套循环对于处理多维数组非常有用。例如，在处理二维数组时，需要同时处理行（外层循环）和列（内层循环）。
在下面的示例中，我们处理一个二维数组并打印每个元素。
1const matrix = [
2 [1, 2, 3],
3 [4, 5, 6],
4 [7, 8, 9]
5];
6
7for (let row = 0; row < matrix.length; row++) {
8 for (let col = 0; col < matrix[row].length; col++) {
9 console.log(`Element at [${row}][${col}] is: ${matrix[row][col]}`);
10 }
11}
12// Output:
13// Element at [0][0] is: 1
14// Element at [0][1] is: 2
15// Element at [0][2] is: 3
16// Element at [1][0] is: 4
17// Element at [1][1] is: 5
18// Element at [1][2] is: 6
19// Element at [2][0] is: 7
20// Element at [2][1] is: 8
21// Element at [2][2] is: 9
通过这种方式，使用嵌套循环可以访问二维数组的每个元素。
注意
使用嵌套循环时需要注意一些事项。
-
性能问题
随着嵌套循环层次加深，执行时间会急剧增加。例如，如果外层循环执行100次，内层循环也执行100次，则总共执行10,000次操作。因此，如果循环迭代次数较多，应考虑优化循环以提高效率。
-
在复杂算法中的应用
嵌套循环功能非常强大，但随着处理变得复杂，代码可能变得难以理解。因此，为了保持代码可读性，使用适当的注释和函数对处理进行组织非常重要。
优化考虑
在使用嵌套循环时，可以考虑以下优化方法。
-
提前终止循环
如果在循环内部满足特定条件，可以使用
break语句退出循环。这可以避免不必要的循环，从而提高性能。
1for (let i = 0; i < 5; i++) {
2 for (let j = 0; j < 5; j++) {
3 if (i + j > 5) {
4 break;
5 }
6 console.log(`i: ${i}, j: ${j}`);
7 }
8}-
将计算移到循环外部
与其每次在循环内执行相同的计算，不如在循环外先计算一次并使用结果来提高效率。
1let array = [1, 2, 3, 4, 5];
2
3// Inefficient example (calculating every time)
4for (let i = 0; i < array.length; i++) {
5 for (let j = 0; j < array.length; j++) {
6 let sum = array[i] + array[j];
7 console.log(sum);
8 }
9}
10
11// Efficient example (calculating outside)
12let arrayLength = array.length;
13for (let i = 0; i < arrayLength; i++) {
14 for (let j = 0; j < arrayLength; j++) {
15 let sum = array[i] + array[j];
16 console.log(sum);
17 }
18}总结
嵌套循环在处理复杂数据结构和算法时在JavaScript中非常有用。然而，如果使用不当，它们可能会导致性能下降和代码可读性降低。为了有效使用嵌套循环，重要的是要努力进行循环优化和代码组织，并根据具体情况采取适当的方法。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。