Featured image of post (五)JavaScript流程控制

(五)JavaScript流程控制

(五)流程控制

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

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:跳过本轮循环,进行当前循环的下一轮。
  • breakcontinue 均可配合 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的能力。初学者不要觉得调试代码麻烦就不去调试,
  • 知识点花点功夫肯定学的会,但是代码调试这个东西,自己不去练,永远都学不会。
  • 今天学的代码调试非常的简单,只要求同学们记住代码调试的这几个按钮的作用即可,后面还会学到很多的代码调试技巧。
Powered by GitHub.Pages
Built with Hugo
主题 StackJimmy 设计
© Licensed Under CC BY-NC-SA 4.0