小白学js第四天
Posted 1020-jj
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小白学js第四天相关的知识,希望对你有一定的参考价值。
流程控制
目录
- 表达式和语句
- 流程控制的三大结构
- 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: 监视变量,不要监视表达式,因为监视了表达式,那么这个表达式也会执行。
以上是关于小白学js第四天的主要内容,如果未能解决你的问题,请参考以下文章