JS学习笔记(二) -- 分支语句、循环语句

最新推荐文章于 2022-10-15 18:16:17 发布

mr.ocean

最新推荐文章于 2022-10-15 18:16:17 发布

阅读量322

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_45020131/article/details/105987452

版权

javascript 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

一元运算符

一元运算符： ++ --，可分为前+ 和后+ and 前- 和后-
如果++再后面：如num++ + 10参与运算，先参与运算，运算结束之后自身+1
如果++在前面：如++num + 10，先自身加1，然后再参与运算

// 举例 后+
var num = 10;
var sum = num++ + 10;  // 后+，参与运算
console.log(sum); // 结果为20，说明后+并没有进行加1操作
console.log(num); // 结果为11， 说明num是参与运算后再加的1.

// 前+
var num2 = 10;
var sum2 = ++num2 + 10;  // 前+，参与运算
console.log(sum2); // 结果为21，说明前+做了加1操作
console.log(num2); // 结果为11

分支语句 – if语句

语法： if(表达式){
        *     代码块
        * }
        *

执行过程，先判断表达式的结果是true还是false，如果是true，则执行，如果是false, 则代码中的代码是不执行的。

// 例子1： 如果8大于6，请输出8
if (8 > 6) {
   console.log(8);
}

// 例子二： 小苏的年龄是否大于18岁，如果是成年的，则提示，可以看电影了
var su = 19;
if (su >= 18) {
   console.log("可以去看电影了")
}

// 例子三， 查看小杨帅不帅，如果帅，则输出真的好帅
var str = "帅";
if (str == "帅") {
   console.log("真的好帅...");
}

执行结果
在这里插入图片描述

if、else语句

语法如下

if(表达式){
   代码块1
}else{
   代码块二
}

如果表达式中的内容为true，则执行代码块1的内容，反之则执行代码块2的内容

举例

// 例子：给出两个数，输出看两个数的最大值。
var number1 = 10;
var number2 = 20;
if (number1 > number2) {
    console.log("最大值是", number1);
} else {
    console.log("最大值是", number2);
}

// 例子，有用户输入一个数字，判断这个数字是奇数还是偶数

var num = parseInt(prompt("请您输入一个数字:"));
if (num % 2 == 0) {
    console.log("这个数是一个偶数")
} else {
    console.log("这个数是一个基数")
}

三元表达式

语法: var 变量名 = 表达式1 ? 表达式2 : 表达式3 ;
如果表达式1中返回true，则执行表达式2，如果表达式1返回false，这执行表达式3

// 显示成年还是未成年
var age = 20;
var result = age >= 18 ? "成年了" : "未成年";
console.log(result); // 结果为成年了

// 两个数字中的最大值
var num1 = 100;
var num2 = 200;
var response = num1 > num2 ? num1 : num2;
console.log(response)  // 结果为200

总结，大多数情况下，使用if-else的语句都可以使用三元运算符来代替

if、else if语句

和python中的if， elif， else类似，它的语法结构是这样的

if(表达式1){
  代码块1;
}else if(表达式2){
    代码块2;
}else if(表达式3){
  代码块3;
}else{
  代码块4;
}

else if – 这种结构可以写多个，具体多少个看需求
else – 结构是可以不用写的，具体也是看需求

/*
*
* 例子：成绩的结果是90到100之间 则显示A级
* 如果成绩是80到90之间，则显示B级
* 如果成绩是70到80之间，则显示C级
* 如果成绩是60(包含)到70之间，则显示D级
* 如果成绩再60分以下，则显示E级
*
* */

var score = Number(prompt("请输入你的成绩..."));
// console.log(isNaN(score)); // 不是数字的话返回true，是数字返回false

if (!isNaN(score)){ // 如果score是一个数字，这执行下面的语句
  if (score>90 && score<=100){
   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级!");
}
}else{
   console.log("输入错误，请重新输入");
}

运行程序：
在这里插入图片描述

结果：
在这里插入图片描述

// 练习，判断一个年份是不是闰年
var year = 2020; //假设年份是2020
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
    console.log("闰年")
}else{
    console.log("平年")
}
// 结果为闰年

switch、case语句

语法：

switch-case语句

 语法：
switch(表达式){
case 值1: 代码块1;break;
case 值2: 代码块2;break;
case 值3: 代码块3;break;
case 值4: 代码块4;break;
...
default : 代码块;
* }

执行条件，当switch表达式中的值与case中的值相等时，就会执行相应的代码块,break，表示终止后续代码的运行

// 例子： 获取一个人的成绩的级别，如果时A级则显示90到100直接的分数
/*
*
* 如果是B级，则显示80到90的分数
* 如果是C级，则显示70到80的分数
* 如果是D级，则显示60到70的分数
*
* */

var score = "F"; // 假设成绩是F
switch (score) {
   case "A":
       console.log("成绩在90到100之间");
       break;
   case "B":
       console.log("成绩在80到90之间");
       break;
   case "C":
       console.log("成绩在70到80之间");
       break;
   case "D":
       console.log("成绩在60到70之间");
       break;
   default :
       console.log("成绩在0到60分之间");
}

运行代码，查看结果
在这里插入图片描述

//例子： 输入一个月份，返回该月份相应的天数， 以平年计算

// var month = parseInt(prompt("请输入月份:"));
// switch (month) {
//     case 1 : console.log("31天");break;
//     case 2 : console.log("28天");break;
//     case 3 : console.log("31天");break;
//     case 4 : console.log("31天");break;
//     case 5 : console.log("31天");break;
//     case 6 : console.log("31天");break;
//     case 7 : console.log("31天");break;
//     case 8 : console.log("31天");break;
//     case 9 : console.log("31天");break;
//     case 10 : console.log("31天");break;
//     case 11 : console.log("31天");break;
//     case 12 : console.log("31天");break;
//
// }

// 上面的写法太麻烦了，我们亦可以这样写, 把相同天数的月份放在一起，去除重复的代码部分。

 var month = parseInt(prompt("请输入月份:"));
switch (month) {
    case 1 :
    case 3 :
    case 5 :
    case 7 :
    case 8 :
    case 10 :
    case 12 : console.log("31天");break;

    case 4 :
    case 6 :
    case 9 :
    case 11 : console.log("30天");break;

    case 2 : console.log("28天");break;

}

运行程序：
在这里插入图片描述

在这里插入图片描述

注意问题：
default后面的break是可以省略的
default也可以省略
switch-case 语句中和case后面的值比较的时候用的严格(===)模式
break也是可以省略的

分支语句总结

分支语句：
if语句：一个分支
if-else语句：两个分支，最终只执行一个分支
if-else if if-else if…语句：多个分支，也是只会执行一个
switch-case语句：多分枝语句，最终也只会执行一个(必须要有break)
三元表达式：和if-else语句是一样的
什么时候使用if-else if…：一般是对范围的判断
什么时候使用switch-case语句：一般是对具体的值的判断
如果有多个分支，是针对范围的判断，一般选择if-else if 的语句
如果有多个分支，是针对具体的值判断，一般选择用switch-case语句.

循环语句 – while循环

语法:
while(表达式){
  代码块；
}

// 举例：求出1到100的和
var sum = 0; // 定义一个变量用来存储和
var num = 1; // 定义存储器
while (num <= 100) { // 循环100次
    sum +=  num;
    num++;
}
console.log("和为:", sum)

运行程序，结果为:
在这里插入图片描述

 /*
* 例子： 假如这里有个用户名为admin, 密码为123的客户账号，
* 要求用户输入用户名和密码，如果用户名或密码输入不对，则提示用户继续输入
*
* */

var userName = prompt("请您输入用户名：");
var password = prompt("请您输入密码：");
while (userName != "admin" || password != "123") {
   userName = prompt("用户名或账号错误，请重新输入用户名。");
   password = prompt("用户名或账号错误，请重新输入密码。")
}
console.log("登录成功...")

do、while循环

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

执行过程：
- 执行一次循环体，然后判断条件是否成立，不成立，则跳出循环，成立则执行循环体，然后再判断条件是否成立，成立则继续循环。

// 举例：提问用户，问用户您觉得我帅吗？如果是n则，一直提示，如果是y，则夸她有眼光
do{
    var shuai = prompt("您觉得我帅吗?y/n")
}while (shuai != "y");
console.log("您真有眼光!")

for循环

语法:
for (表达式1; 表达式2; 表达式3) {
  循环体;
}

先执行一次表达式1，然后判断表达式2；如果不成立则直接跳出循环,如果表达式成立，执行循环体中的代码，结束后，调到表达式3执行，如果表达式3的代码满足表达式2的需求，则继续执行代码，以此类推。

 // 举例, 求1-100所有和的值

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

//  使用for循环求1到100所有 能被7整除的和
var sum2 = 0;
for (var i = 0; i<=100; i++){
    if (i%7==0) {
        sum2 += i;
    }
}
console.log(sum2)

使用循环制作九九乘法表

首先，document.write() 表示可以在浏览器中输出东西。

for (var i = 1; i <= 9; i++) {
    for (var j = 1; j <= i; j++) {
           // 控制一行有多少个表达式
        document.write(j + "*" + i + "=" + i * j, "\t");
    }
    document.write("<br />"); // 写入换行符
}

运行程序，结果如下
在这里插入图片描述
感觉有点挤，不太美观，这里我又做了一个表格版本的，代码如下

document.write("<table border='1' cellpadding='0' cellspacing='0'>"); // 设置1个像素的边框，边框与边框之间的距离为0
for (var i=1;i<=9; i++){ // 控制行数
    document.write("<tr>");

    for (var j=1; j<=i; j++){
        document.write("<td bgcolor='#ffd700'>");//添加背景色
        document.write(j+"*"+i+"="+i*j,);
        document.write("</td>");
    }

    // document.write("<br />");
    document.write("</tr>");
}
document.write("</table>");

运行结果如下，这样是不是要好多啦。
在这里插入图片描述

总结

一元运算符:
- num++; //后+
- ++num; // 前+
- 无论是前+还是后+只要参与运算，结果可能就不太一样了
- 如：
- var sum=10;
- var sum = num++ + 10; //20
- ++在后面的时候，先参与运算，然后自身加一
- var num = 10;
- var sum = ++num +10; // 21
- ++ 在前面的时候，先自身加1，然后再参与运算
流程控制：代码执行的过程
- 1顺序结构：代码的执行顺序，从上到下，从左到右
- 2.分支结构： if, if-else, if-else if, switch-case, 三元表达式
- 3 循环结构： while 循环, do-while, for循环 for-in循环
总结分支：
- 如果只有一个分支，就用if
- 如果有两个分支，就用if-else
- 如果多个分支，一般是范围的，推荐使用if-else if
- 如果是多个分支，一般是具体的值，推荐使用switch-case
总结循环
- while: 先判断后循环，有可能一次循环都不执行
- do-while: 至少执行一次循环的次数，再判断
- for循环：知道了循环的次数，推荐使用for循环