（五）流程控制

顺序结构
选择分支结构
循环结构

1. 顺序结构

2. 选择结构

if-else
if-else if-else
switch-case

2.1 if-else

语法

1
2
3
4


if (condition)
   statement1
[else
   statement2]

2.2 if-else if-else

语法

1
2
3
4
5
6
7
8
9


if (condition1)
  statement1
else if (condition2)
  statement2
else if (condition3)
  statement3
...
else
  statementN

2.3 switch-case

语法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


switch (expression) {
  case value1:
    //Statements executed when the
    //result of expression matches value1
    [break;]
  case value2:
    //Statements executed when the
    //result of expression matches value2
    [break;]
  ...
  case valueN:
    //Statements executed when the
    //result of expression matches valueN
    [break;]
  [default:
    //Statements executed when none of
    //the values match the value of the expression
    [break;]]
}

3. 循环

3.1 概述

for
while
do...while
label
for...in
for...of

3.2 for 循环

语法

1
2


for ([initExpr]; [condExpr]; [incExpr])
    statement

initExpr: 变量初始化
condExpr: 循环条件
incExpr：增量表达式

例子

1
2
3
4


for (let step = 0; step < 5; step++) {
  // Runs 5 times, with values of step 0 through 4.
  console.log('Walking east one step');
}

3.3 while 循环

语法

1
2


while (condition) 
    statement

例子

1
2
3
4
5
6


let n = 0;
let x = 0;
while (n < 3) {
    n++;
    x += n;
}

3.4 do…while

语法

1
2
3


do 
    statement
while (condition);

例子

1
2
3
4


let n = 5
do {
    console.log('hello');
} while (--n)

3.5 label

语法：

1
2


label:
statement

label: 任何不属于保留关键字的 JavaScript 标识符。
statement: JS 语句。

说明：

可使用一个标签来唯一标记一个循环，然后使用 break 或 continue 语句来指示程序是否中断循环或继续执行。

需要注意的是，JavaScript 没有 goto 语句，==标记只能和 break 或 continue 一起使用。==

在严格模式中，你不能使用 “let” 作为标签名称。它会抛出一个 SyntaxError（因为 let 是一个保留的标识符）。

例子：

1
2
3
4
5
6
7
8
9


var str = ''
aLoop:
for (let i = 0; i < 5; i++) {
    if (i == 2) {
        continue aLoop;
    }
    str += i;
}
console.log(str); // 0134

3.6 break 与 continue

break：跳出当前循环，不再进行当前循环。
continue：跳过本轮循环，进行当前循环的下一轮。
break 与 continue 均可配合 label 语句使用来跳转循环。

3.7 for…in

语法：

1
2
3


for (variable in object) {
    //statements
}

说明：

for...in 语句用于对数组或者对象的属性进行循环操作。
for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

1
2
3
4


var arr = new Array(1,2,3,4,5);
for (let i in arr) {
    console.log(i+'.');
}

3.8 for…of

语法：

1
2
3


for (variable of iterable) {
    //statements
}

例子：

1
2
3
4
5


let iterable = [10, 20, 30];
for (let value of iterable) {
    value += 1;
    console.log(value);
}

4. chrome 代码调试

断点调试：断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。
断点调试可以帮我们观察程序的运行过程
浏览器中按F12–> sources –>找到需要调试的文件–>在程序的某一行设置断点
Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
F11: 程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试，
知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。
今天学的代码调试非常的简单，只要求同学们记住代码调试的这几个按钮的作用即可，后面还会学到很多的代码调试技巧。