流程控制
目录
- 表达式和语句
- 流程控制的三大结构
- debug
流程控制脑图请戳?[http://naotu.baidu.com/file/30ab2cfa33a855fb631c04f849b4a2e3?token=d497f04ccc07ad7b]
1 表达式和语句
1.1 表达式
- 可以产生一个值，有可能是个运算、函数、字面量
- 可以放在任何需要值的地方
1.2 语句
- 可以理解为一个行为，用；结束一个语句
2 流程控制的三大结构
2.1 顺序结构
- 由上到下依次执行
- 程序默认都是由上到下依次执行
2.2 分支结构
根据不同的情况执行相应的代码
2.2.1 if 语句
//语法
//第一种
if(条件表达式) {
执行语句
}
//第二种：
if(条件表达式) {
语句1 //如果条件表达式为true，则执行语句1
} else {
语句2 //如果条件表达式为false，则执行语句2
}
// 第三种
if（条件表达式）{ //如果条件表达式为true，则执行语句1，//如果条件表达式为false，则判断else if内的条件表达式是否成立，成立则执行相应花括号内的代码，否则一直直接跳到下一个else if，反复判断，直到执行到else结束
语句1
} else if （条件表达式）{
语句2
}else if （条件表达式）{
语句 3
}else if （条件表达式）{
语句4
}else if （条件表达式）{
语句5
}else if（条件表达式） {
语句6
}else {
语句7
}
// 案例
// 判断一个数是偶数还是奇数
//
// var num1 = 5;
// if( num1 % 2 === 0) {
// console.log('num1是偶数');
// }else {
// console.log('num1是奇数');
// }
// 分数转换，把百分制转换成ABCDE <60 E 60-70 D 70-80 C 80-90 B 90 - 100 A
var score = 55;
if (score >= 90){
console.log('A');
}else if(score >= 80){
console.log('B');
}else if(score >= 70){
console.log('c');
}else if(score >= 60){
console.log('D');
}else {
console.log('E');
}2.2.2 三元运算符
- 表达式1 ? 表达式2 : 表达式3
- 如果表达式1成立则返回表达式2的值否则返回表达式3的值
- 是对if……else语句的一种简化写法
//案例
//是否年满18岁
var age = 18;
console.log(age >= 18 ? '成年' : '未成年' );
// 从两个数中找最大值
var num1 = 5 ;
var num2 = 3;
console.log(num1 > num2 ? num1 : num2);2.2.3 swith 语句
语法格式
switch (expression) {
case 常量1:
语句;
break;
case 常量2:
语句;
break;
case 常量3:
语句;
break;
…
case 常量n:
语句;
break;
default:
语句;
break;
}- break可以省略，如果省略，代码会继续执行下一个case
- switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换（例如，字符串‘10‘ 不等于数值 10）
案例
```
//显示星期几
var day = 1;
switch(day) {
case 1 :
console.log("星期一");
break;
case 2 :
console.log("星期二");
break;
case 3 :
console.log("星期三");
break;
case 4 :
console.log("星期四");
break;
case 5 :
console.log("星期五");
break;
case 6 :
console.log("星期六");
break;
default:
console.log("星期日");
}
//素质教育（把分数变成ABCDE）千万不要写100个case哟
var score = 100;
var num = parseInt(score / 10);
switch(num) {
case 10 :
case 9 :
console.log('A');
break;
case 8 :
console.log('B');
break;
case 7 :
console.log('C');
break;
case 6 :
console.log('D');
break;
default :
console.log('E');
}#### 2.4 Boolean的隐式转换结构
- 流程控制语句会把后面的值隐式转换成布尔类型
- 转换为true 非空字符串 非0数字 true 任何对象
- 转换成false 空字符串 0 false null undefined
案例var a = !!‘123‘; // true
#### 2.3 循环结构
- 重复做一件事
- 注意事项：避免死循环
##### 2.3.1 while 循环
语法 // 当循环条件为true时，执行循环体，
// 当循环条件为false时，结束循环。
while(循环条件) {
//循环体
}案例 //打印100以内的奇数
var i = 0;
while(i < 101){
if(i % 2 !== 0) {
console.log(i);
}
i++;
}
//打印100以内的奇数的和
//
//
var oddNum = 1;
var sum = 0;
while(oddNum < 101){
if( oddNum % 2 !== 0){
sum += oddNum;
}
oddNum++;
}
console.log(sum);##### 2.3.2 do-while 循环
>do..while循环和while循环非常像，二者经常可以相互替代，但是do..while的特点是不管条件成不成立，都会执行一次。
语法do {
// 循环体;
} while (循环条件);
案例//求100以内所有3的倍数的和
var num = 1;
var sum = 0;
do {
if(num % 3 === 0){
sum += num;
}
num++;
}while(num < 101);
console.log(sum);
//使用do-while循环：输出询问“我爱你，嫁给我吧？”，选择“你喜欢我吗？(y/n):"，如果输入为y则打印”我们形影不离“，若输入为n,则继续询问"
do {
var msg = prompt('你爱我吗？','请输入yes or no');
} while(msg !== 'yes');
console.log('萨拉黑哟');
</script>
//prompt('参数1'， '参数2')； 参数1是提示的内容，参数2是输入文本框内提示的内容。##### 2.3.3 for循环
和whil以及 do-while的区别
- 一般在循环次数确定的时候使用
- while和do-while一半在循环次数不确定的时候使用
语法：// for循环的表达式之间用的是;号分隔的，千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
// 循环体4
}
执行顺序：1243 ---- 243 -----243(直到循环条件变成false)
1. 初始化表达式
2. 判断表达式
3. 自增表达式
4. 循环体
案例//打印1-100之间所有数
//
for(var i = 0; i <= 100; i++){
console.log(i);
}
//求1-100之间所有数的和
//
//
var sum = 0;
for( var i = 1; i <= 100; i++){
sum += i;
}
console.log(sum);
//同时求1-100之间所有偶数和奇数的和
var oddSum = 0;
var evenSum = 0;
for( var i = 1; i <= 100; i++){
if(i % 2 == 0){
evenSum += i;
}else {
oddSum += i;
}
}
console.log(evenSum);
console.log(oddSum);
// 打印正方形‘
var str = ‘‘;
//控制行的输出
for(var i = 0; i < 10; i++){
//控制一行输出几个
for(var j = 0; j < 10; j++){
str += ‘* ‘;
}
str += ‘\n‘;
}
console.log(str);
// 打印直角三角形
var str = ‘‘;
//控制行的输出
for(var i = 0; i < 10; i++){
//控制一行输出几个
for(var j = i; j < 10; j++ ){
str += ‘* ‘;
}
// 换行
str += ‘\n‘;
}
console.log(str);
// // 打印9*9乘法表
var str = '';
for( var i = 1; i <= 9; i++){
for(var j = i; j <= 9; j++){
str += i + '*' + j + '=' + i * j + '\t';
}
str += '\n';
}
console.log(str);##### 2.3.4 continue 和 break
> break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到最外层大括号）
>
> continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）
案例 // 求整数1～ 100 的累加值， 但要求碰到个位为3的数则停止累加
var sum = 0;
for (var i = 0; i <= 100; i++) {
if (i % 10 !== 3) {
sum += i;
} else {
break;
}
}
console.log(sum);
//求整数1～ 100 的累加值， 但要求跳过所有个位为3的数
var sum = 0;
for (var i = 0; i <= 100; i++) {
if (i % 10 === 3) {
continue;
}
sum += i;
}
console.log(sum);```
debug
- 过去调试JavaScript的方式
- alert()
- console.log()
- 断点调试
断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。
- 调试步骤
浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点--> f5 --> f11- 调试中的相关操作
Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
F10: 程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
F8：跳到下一个断点处，如果后面没有断点了，则程序执行结束。tips: 监视变量，不要监视表达式，因为监视了表达式，那么这个表达式也会执行。
原文地址：https://www.cnblogs.com/1020-jj/p/10848838.html