JavaScript整理

3.2 if选择结构

if（条件满足为true）{

执行该语句。

}else{

执行另一个或者不执行。

}

if语句的套路：一个选择依据，两个选项

 

3.3switch语句

Switch的优点：1.选择结构更加清晰，一目了然；

               2.执行速度相对较快；

Switch的执行逻辑：指switch后面圆括号里的变量与case后面的常量相等的地方开始依次执行后面的指令，直至指令结束。

Case的作用：不会参与到运算当中，不起条件判断作用，否则执行逻辑就解释不通了，Case是起到标号的作用。只是执行的指令的入口标号。

标号是什么？

在计算机里，只是存储了指令的地址。

break的作用：直接跳出选择结构。

break在switch里，只是起到了一个辅佐作用。并不属于switch语句。

<script>
    /*
    * 假设：
    * 12月、1月、2月为“冬”
    * 依次类推
    * 1.得到月份
    * 2.一共四个分支
    * 3.每个分支三个月
    * 4.12个case，每个月一个case
    * */
    var month = Number(prompt("请输入月份"));
    var season;
    switch (month){
        case 12:
        case 1:
        case 2: season = "冬"; break;
        case 3:
        case 4:
        case 5:season = "春"; break;
        case 6:
        case 7:
        case 8:season = "夏"; break;
        case 9:
        case 10:
        case 11:season = "秋";break;
    }
    alert(season);
</script>

 

在switch中，几个case是可以共用一条指令的，相邻的相同指令，可以只写最后一条指令，并break结束选择结构。

 

4.错误与调试

4.1 错误的概念与处理

计算机程序的错误有两种：语法错误和逻辑错误。

比如alert拼写错误，写成了alter。

 

运行结果只显示了7，后面的结果没有显示，说明后面的代码没有执行。因为输出7之后遇到了语法错误，程序终止执行。

上例也进一步说明了解释型语言的特点：翻译一条执行一条，遇到错误提前终止执行。

 

语法错误的排除的方法：

（1）开发者工具的console窗口，能显示错误及其说明

（2）try......catch捕获异常

 

逻辑错误：程序在语法上没有问题，但是实际执行结果和预期结果有出入。

 

当输入年龄96或者3，都显示能报名参军，结果显然是错误的，但执行过程中没有任何语法错误。

调试的基本原理：

程序的执行是自动的，而且速度非常快，无法了解中间的执行过程。

但是几乎所有的开发者工具都提供了调试的功能，可以去控制程序的执行节奏，从而可以让开发者看清执行的过程。

 

怎么去控制节奏？

（1）设置断点

打开开发者工具

在source页打开源代码

在代码左侧（行号边上）单击即可在该处设置断点

 

（2）单行执行（step）、

每执行一步都会停下来，然后再继续下一步

快捷键F10

 

控制节奏的目的：

是看清或者了解程序的执行过程，而不仅仅是结果。

怎么看结果？

（1）查看程序执行的步骤，也就是上图中的指示即将要执行的代码指示器，如果轨迹与预期不一致，说明上一步执行的代码出现了逻辑错误。

（2）查看变量、表达式的值

a.在watch窗口添加要查看的变量或表达式，比方输入age

 

此时就可以看到变量age的值

 

b.也可以通过在代码中选中的要查看的变量或表达式，右键选择添加到watch

 

在watch窗口就可以看到添加的变量或者表达式的值

 

因为计算机程序的每一步执行的结果都是唯一的、可预期的，同时我们又可以通过上述手段控制程序的运行节奏并查看程序执行的状态（如轨迹、变量表达式的值），也就是可以看到实际执行结果，那么将实际结果和预期结果对比，如果出现不一致，说明刚刚执行的那一步出现的错误，即定位错误。

一旦定位错误，根据所学知识和经验，应该就很容易分析出错原因，从而找到解决方案。

再来调试一个程序

var a = prompt("请输入第一边长");

    var b = prompt("请输入第二边长");

    var c = prompt("请输入第三边长");

    var p = (a + b + c) / 2;//计算周长的一半

    var s = Math.sqrt(p * (p - a) * (p - b) * (p - c));//海伦公式计算面积

alert(s);

设置断点

 

运行程序，程序将在预定断点位置停下来

 

查看变量a,b,c的值

 

单步执行，查看p的值

 

 

再查看a+b+c的值

  

a+b+c的值并不是我们预期的6，而是“345”。原来是做了字符串的拼接运算，而不是我们希望的加法，所以是类型问题。

解决方案就是将输入的数据（字符串）转换为数值

 

再重新调试程序，并查看结果

 

调试工具不仅仅是定位错误的工具，也是一个非常重要的学习工具。

因为调试工具可以让我们直观地看到程序的运行轨迹以及运行状态，有助于我们对于一些抽象只是的理解

 

5.循环结构

5.1循环结构的概念

先来看看生活中的一些场景：

（1）食堂阿姨打菜：接过顾客的餐盘→询问菜品→打菜→递回餐盘，重复以上过程，直至所有顾客的菜打完。

（2）快递员送快递：查看送件地址→赶往目的地→电话告知收件人→收件人签收→交快递件，重复以上过程，直至所有快递处理完。

（3）公交车司机.......

（4）作业流程.......

以上场景都有一个共同的特点：有条件地重复地做一件事件，每次做的事情不同但类似。

程序是为了解决实际问题的，实际问题中存在着重复动作，那么程序中也应该有相应的描述，这就是循环。

/*计算1+2+3+......+10
* 方案一*/
var sum1 = 1+2+3+4+5+6+7+8+9+10;
/*方案二*/
var sum2 = 0;
sum2 +=1;
sum2 +=2;
sum2 +=3;
sum2 +=4;
sum2 +=5;
sum2 +=6;
sum2 +=7;
sum2 +=8;
sum2 +=9;
sum2 +=10;

 

但是这两种方案的描述方式都不太理想，如果是要加到10000呢？

注意观察方案二，它重复地做一件事（将一个数加到sum2中），每次做的不同但类似。

 

/*方案三 改造方案二*/
var sum3 = 0;
var n = 1;
while(n<=10){
    sum3 += n;
    n++;
}

方案三表达的含义和方案二一样，但是表达方式要好得多，比如加到10000，只需要把条件n<=10改成n<=10000。

 

5.2 while循环

While是表示“当...则...”，也就是当某个条件成立时，则一直重复做。

 

（调试工具查看程序运行轨迹以及变量的变化情况）

 

 

案例：

 

总结一下循环的套路：

（1）初始状态

（2）循环条件

（3）循环体（要重复做的事情）

（4）为下次循环做准备

 

那如何去写循环的程序呢？回答四个问题：

（1）初始状态是怎样的？

（2）重复做的条件是什么？

（3）重复做什么？

（4）怎么过渡到下一次的循环？

 

 

	水仙花数问题	GDP预测问题
初始状态	var num = 100	var a = 142562.75  var b = 49089.82  var year =2009
循环条件	num<999	美国GDP>中国GDP
循环体
为下次循环做准备	num++	year++

 

案列：计算圆周率，π=（1-1/3+1/5-1/7+...）*4

最后一项的绝对值小于10^-6

1-1/3+1/5-1/7+

变化成(+1/1)+(-1/3)+(+1/5)+(-1/7)

那么它和我们之前解决的1+2+3+.......+10问题就非常类似了，都是求和问题，只是加的内容不一样

（1）初始状态是怎样的？

sum=0 t=1 sign=1 deno=t

 

（2）重复做的条件是什么？

|t|>=10^-6

（3）重复做什么？

sum += t

（4）怎么过渡到下一次的循环？

sign = -sign

deno += 2

t=sign*1/deno