前端笔记---3.javascript基础（流程控制）

学习目标：

1. JavaScript流程控

流程控制

流程控制 是 编程语言 与 其他语言区分的一个标识，

流程控制指的是，我们写的代码是如何去执行的。

顺序结构

代码从上到下依次执行，就是顺序结构。

程序默认就是从上倒下顺序执行的。

Created with Raphaël 2.2.0 开始 语句1 语句2 结束

分支结构

根据不同的情况，执行不同的代码

又叫选择结构

Created with Raphaël 2.2.0 开始 条件 语句1 结束 语句2 yes no

if语句

语法：

if(/* 条件表达式 */){
	// 执行语句
}


if(/* 条件表达式 */){
	// 成立执行语句
 }else{
 	// 否则执行语句   
}


if(/* 条件表达式1 */){
	// 成立执行语句
}else if(/* 条件表达式2 */){
 	// 成立执行语句   
}else if(/* 条件表达式3 */){
	// 成立执行语句
}else{
	// 否则执行语句    
}

案例：

1. 求两个数的最大数

var num1 = 2;
var num2 = 5;
if(num1>num2){
    console.log('较大数是：' + num1);
}
else{
   console.log('较大数是：' + num2); 
}

2. 判断一个数是奇数还是偶数

var num = 10;
if(num%2 === 0) {
    console.log('偶数');
}
else{
    console.log('奇数');
}

3. 分数转换，把百分制转换成ABCDE A(90-100) B(80-90) C(70-80) D(60-70) E(<60)

var score = 80;
if(score >= 90) {
    console.log('A');
}
else if(score >= 80){//隐藏条件 后边的值都是<90
   console.log('B'); 
}
else if(score >= 70){
   console.log('C'); 
}
else if(score >= 60){
   console.log('D'); 
}
else {
   console.log('E'); 
}

三元运算符

分支结构的另类写法

带有 三个 操作数的运算符

表达式1? 表达式2 : 表达式3;

表达式1： 布尔类型的表达式，它总会返回一个布尔类型的值

当表达式1成立 ，则返回表达式2的值，当表达式1不成立，则返回表达式3的值；

是对 if else语法的一种简化

var num1 = 3;
var num2 = 6;
// 表达式1 ? 表达式2 : 表达式3
console.log(num1>num2?num1:num2);


var age = 17;
console.log(age>=18 ? '成年' : '未成年');

switch语句

也常用语条件判断，用于多个分支。

只能做 值相等判断，而if可以做某个范围判断
在switch里面，使用的是===严格模式，注意类型要一致
case满足条件的时候，如果没有break，会一直往下穿透，所以break不能忘。

switch(expression){
    case 常量1:
        语句;
        break;
    case 常量2:
        语句;
        break;
    case 常量3:
        语句;
        break;
    ...
    case 常量n:
        语句;
        break;
    default:
        语句;
}

循环结构

重复做一件事。

在JavaScript中，循环语句有三种，while，do…while，for。

Created with Raphaël 2.2.0 开始 条件 语句1 语句2 结束 yes no

while语句

基本语法：

// 当循环条件为true的时候，执行循环体。
// 当循环条件为false的时候，结束循环。

while(循环条件){
    // 循环体
}

案例：

// 当循环条件永远是 true的时候，那么就会出现死循环
var i = 1;
while(i<=100){
    // 循环体
    console.log(i);
    i++;
}

// 计算1-100之间的累加和
var i = 1;
var sum = 0;
while(i <= 100){
    sum += i;
    i++;
}
console.log(sum);

do-while语句

do…while和while循环非常像，二者经常可以相互替换，但是do…while的特点是，

不管条件成立与不成立，都会先执行一次循环体。

Created with Raphaël 2.2.0 开始 语句1 条件 语句2 结束 yes no

do{
    // 循环体
}while(循环条件)

//1.使用do..while,输入询问“我爱你，嫁给我吧?”,选择“你喜欢我吗？(yes/no)”
//如果输入yes则打印，“我们形影不离”，如果输入no,则继续询问

do{
	var msg = prompt('你是猪吗？','请输入yes/no');
}while(msg !== 'yes');
alert('你是我的猪猪男孩~哈哈哈');

for循环

while 和do…while一般用于解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便

// for循环的表达式之间用;隔开，千万不能写成,
for(初始化表达式1;条件表达式2;自增表达式3){
    // 循环体 4
}
// 执行顺序
// 1243->243->243直到循环条件变成false

1. 初始化表达式
2. 判断表达式
3. 自增表达式
4. 循环体

Created with Raphaël 2.2.0 循环开始 表达式1 表达式2 循环体 表达式3 循环结束 yes no

案例：

1.求1-100之间所有数

for(var i=1; i <= 100; i++){
    console.log(i);
}

2.求1-100之间所有数的和

var sum = 0;
for(var i=1; i <= 100; i++){
    sum +=i;
}
console.log(sum);

3.求1-100之间所有数的平均值

var sum = 0;
for(var i=1; i <= 100; i++){
    sum +=i;
}
console.log(sum);
var avg = sum/100;
console.log(avg);

4.求1-100之间所有奇数，偶数的和

var evenSum = 0, oddSum = 0;
for(var i=1; i <= 100; i++){
    if(i % 2 ===0) {
        evenSum += i;
    }
    else{
        oddSum += i;
    }
}
console.log(evenSum, oddSum);

continue和break

break：立即跳出整个循环，即结束循环。开始执行后边的内容（直接跳到大括号后面）

continue：立即跳出当前循环，继续下一次循环（跳转到i++的地方）

// 求 50-200之间 第一个能被7整除的数
for(var i = 50; i<=200; i++ ){
    if(i % 7 === 0){
        console.log(i);
        break;
    }
}


// 求1-100之间的累加值，但是要求 跳过能所有 个位 为 3的数。
var sum  = 0;
for(var i = 0; i<100; i++){
    if( i % 10 === 3){
        console.log(i);
        continue;
    }
    sum += i;
}
console.log(sum);

调试

debug，调试的目的是确定错误的原因和位置，并解决错误。

• 程序中的错误

  • 语法错误

    浏览器中的console会报错，能快速定位到某个文件某一行

  • 逻辑错误

    程序执行的结果，跟预期的结果不一致，需要自己去分析那一行写错了。

• 简单调试方式

  • alert()
  • console.log()

• 断点调试

  断点调试是指自己在程序中某一行设置一个断点，调试的时候，程序运行到这一步就会停住，然后可以一步一步往下调试。调试过程中，可以看到各个变量当前的值，出错的话，调试到出错的代码行就会显示错误，停止运行。