JavaScript (二) js的基本语法 - - 运算符、流程控制

绝地灬酷狼 2021-11-22 08:04 303阅读 0赞

个人博客网：[https://wushaopei.github.io/][https_wushaopei.github.io]    (你想要这里多有)

一、运算符

1、一元运算符

>     ++  -- 都是运算符
>       ++ 和 --  可以分为:前+ 和后+  and   前- 和后-
>     
>       如果++在后面:如: num++ +10参与运算
>       先参与运算,运算结束后自身再加1
>     
>       如果++在前面:如: ++num+10参与运算
>       先自身加1,然后再参与运算
>     
>       Ctrl+/可以把选中的代码全部注释掉

示例：

var num=10;
               num++;//自身加1--自加
               console.log(num); //11
    
               var num=10;
               ++num;//自身加1
               console.log(num);//11
    
               var num=10;
               var sum=num++ +10;
               console.log(sum);//20
    
               var num=10;
               var sum=++num +10;
               console.log(sum);//
               console.log(num);
    
    
               var num=10;
               var sum=--num +10;
               console.log(sum);//19
               console.log(num);//9
    
               var num=10;
               var sum=num-- +10;
               console.log(sum);//20
               console.log(num);//9

二、流程控制

1、流程控：代码的执行过程

2、流程控制:有三种方式

1.顺序结构:从上到下,从左到右执行的顺序,就叫做顺序结构(不是很眼睛)
    
    2.分支结构:if语句,if-else语句,if-else if-else if...语句,switch-case语句,三元表达式语句
    
    3.循环结构:while循环,do-while循环,for循环,后期还有一个for-in循环

3、分支结构：

（1）分支语句 之 if 语句：

if语句:主要是判断
    
     语法:
    
     if(表达式){
       代码块
     }

>     执行过程:
>     
>          先判断表达式的结果是true还是false,如果是true则执行代码块,如果是false,大括号中的代码是不执行的

例子:
     1.如果8大于6,请输出8,如果一个数字大于另一个数字则输出大的数字
     2.问:小苏的年龄是否大于18岁,如果是成年的,则提示,可以看电影了
    
    
    
               if(8>6){
                 console.log(8);
               }
           //例子1:
               var num1=10;
               var num2=100;
               if(num1>num2){
                 console.log(num1);
               }
               console.log("我执行了");
    
           //例子2
           var age=19;
           if(age>=18){
               console.log("可以看电影了,嘿嘿...");
           }
           //例子3:
           //问小杨帅不帅,则输出真的好帅
           var str="帅";
           if(str=="帅"){
               console.log("真的好帅");
           }

（2） if - else  语句

if-else 语句
         两个分支,只能执行一个分支
        
         if-else语句的语法:
        
         if(表达式){
           代码1
         }else{
           代码2
         }
         执行过程:
         如果表达式的结果是true则执行代码1,如果表达式的结果是false,则执行代码2

示例：

//例子:问；小苏的年龄是否是成年人,如果是成年人则提示,可以看电影,否则；回家写作业区
    
            //定义变量,并初始化
                var age = 100;
            //    //判断
                if (age >= 18) {
                  console.log("可以看电影了,嘎嘎...");
                } else {
                  console.log("看什么看,回家写作业去");
                }
    
    
            //提示用户请输入年龄----
                var age=prompt("请您输入您的年龄");//弹框---并且有输入,输入的内容在age变量中
                console.log(age);//最终的结果是字符串的类型
    
            //案例1:
                var age = parseInt(prompt("请您输入年龄"));
                //判断
                if (age >= 18) {
                  console.log("可以看电影了,嘎嘎...");
                } else {
                  console.log("看什么看,回家写作业去");
                }
    
            //练习1:找到两个数字中的最大值
            var num1=10;
            var num2=20;
            if(num1>num2){
                console.log(num1);
            }else{
                console.log(num2);
            }
    
            //练习2:判断这个数字是奇数还是偶数
    
            var number=parseInt(prompt("请输入一个数字"));
            if(number%2==0){
                console.log("偶数");
            }else{
                console.log("奇数");
            }

（3）分支语句之 三元表达式

三元表达式
              运算符号:  ?  :
             
              语法:
               var 变量=表达式1?表达式2:表达式3;
               执行过程:
               表达式1的结果是true还是false,如果是true则执行表达式2,然后把结果给变量
               如果表达式1的结果是false,则执行表达式3,把结果给变量

示例：

//两个数字中的最大值
            var x = 10;
            var y = 20;
            var result1 = x > y ? x : y;
            console.log(result1);
    
            //显示成年还是未成年
            var age = 10;
            var result2 = age >= 18 ? "成年了" : "未成年";
            console.log(result2);
    
            //总结:大多数情况,使用if-else的语句都可以用三元表达式的方式来表示

4、 循环结构

**循环** : 一件事不停的或者是重复的做

> 说明 :  循环要有结束的条件,循环还应该有计数器(记录循环的次数的)

（1） while 循环：

//  计数器
             var 变量=0;
             while(循环的条件){
               循环体;
               计数器++;
            
             }

*  执行过程：

>  先判断条件是否成立,(条件的结果是true还是false),如果是false,那么循环的代码(while的大括号中的代码都不执行),如果是true,那么先执行循环体,然后执行计数器,然后,直接去--->循环的条件,再次判断是否成立,成立则继续执行循环体,否则跳出循环,执行完循环体之后,计数器加1,然后再去循环的条件,判断,成立则循环,否则跳出循环

① 示例：

请输出100 次:哈哈,我又变帅了

var i=0;//计数器
               while(i<100){
                 console.log("哈哈,我又变帅了"+(i+1));
                 i++;//记录次数
               }

练习:计算1-100之间所有数字的和

var sum=0;//存储最终的和
            var i=1;//计数器
            while(i<=100){
                //sum=sum+i;//不停的计算数字的和
                sum+=i;
                i++;
            }
         console.log("和为:"+sum);

练习:计算0-5之间所有数字的和

var sum=0;//存储最终的和
               var i=0;//计数器
               while(i<=5){
                 //sum=sum+i;//不停的计算数字的和
                 sum+=i;
                 i++;
               }
               console.log("和为:"+sum);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70][]

② while 循环练习：

求6的阶乘：

var ji = 1;//存储最终的阶乘的结果
                   var i = 1;//开始的数字
                   while (i <= 6) {
                     ji *= i;
                     i++;
                   }
    
                   console.log(ji);

分别 求1-100之间所有的偶数、奇数的和

练习要点：

>     求帐号和密码是否一致,登录的效果实现
>     提示用户输入帐号
>     提示用户输入密码
>     如果帐号或者密码不对,则一直提示用户输入帐号和密码
>     帐号--admin
>     密码--123---字符串类型

var userName=prompt("请您输入帐号");//存储帐号的
            var userPwd=prompt("请您输入密码");//存储密码
            while(userName!="admin"||userPwd!="123"){
                //变量的重新赋值
                userName=prompt("请您输入帐号");//存储帐号的
                userPwd=prompt("请您输入密码");//存储密码
            }
            console.log("登录成功");

（2） do - while 循环 (至少执行一次)

语法：

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

**执行过程:**

> 先执行一次循环体,然后判断条件是否成立,不成立,则跳出循环,成立则执行循环体,然后再判断条件是否成立,成立则继续循环,否则跳出.....

① 示例：

输出:哈哈,我又变帅了..10次

var i=0;//计数器
               do{
                 console.log("哈哈,我又变帅了");
                 i++;
               }while(i<10);

问用户:您觉得我帅吗?提示用户请输入y/n ,如果n就一直问,我帅不帅,如果用户输入的y,则结束,并提示用户,您真有眼光

do {
                 //把用户输入的结果存储到result变量中
                 var result = prompt("您觉得我帅吗?y/n");
               } while (result != "y");
               console.log("您真有眼光");

**② 总结：**

>  *  while循环特点:先判断,后循环,有可能一次循环体都不执行
>  *  do-while循环特点:先循环,后判断,至少执行一次循环体

示例：求100以内所有3的倍数的和 （while 与 do-while 对比）

var i = 1;
               var sum = 0;
               while (i <= 100) {
                 if (i % 3 == 0) {
                   sum += i;
                 }
                 i++;
               }
               console.log(sum);//1683

var i = 1;
            var sum = 0;
            do {
                if (i % 3 == 0) {
                    sum += i;
                }
                i++;
            } while (i <= 100);
            console.log(sum);

（3） for 循环

**语法**:

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

**执行过程:**

>     先执行一次表达式1,然后判断表达式2;如果不成立则直接跳出循环
>     如果表达式2成立,执行循环体的代码,结束后,跳到表达式3执行,然后跳到表达式2,判断表达式2是否成立,不成立,则跳出循环
>     如果表达式2成立,则执行循环体,然后再跳到表达式3,再跳到表达式2,判断是否成立,一直如此

示例：

//例子:打印10次,哈哈,我又变帅了
            for (var i = 0; i < 10; i++) {
                console.log("日照香炉生紫烟,一对情侣在林间.远看身影如神仙,近看竟然是于千");
            }
    
            //求1-100之间所有数字的和
    
            var sum = 0;
            for (var i = 1; i <= 100; i++) {
                sum += i;
            }
            console.log("和为:" + sum);
    
    
            for (var i = 0; i < 10; i++) {
                console.log("小杨好帅");
            }

练习：

①区域求和

//求1-100之间所有能被3整除的数字的和
            var sum3=0;
            for(var i=1;i<=100;i++){
                if(i%3==0){
                    sum3+=i;
                }
            }
            console.log(sum3);
    
    
            //求1-100之间所有能被7整除的数字的和
            var sum4=0;
            for(var i=1;i<=100;i++){
                if(i%7==0){
                    sum4+=i;
                }
            }
            console.log(sum4);

② for 循环 打印 **正方形**、 **五角星**

//控制行数的---正方形的
            for (var i = 0; i <= 5; i++) {
                //控制每一行有几个星星
                for (var j = 0; j <= 5; j++) {
                    document.write("★");
                }
                document.write("<br/>");
            }
    
            //
            //    for(var j=0;j<=2;j++){
            //      document.write("★");
            //    }
    
            //三角形的---五角星----随着行数的增加,每一行都会比上一行多一个五角星
            for (var i = 0; i <= 5; i++) {
                //控制每一行有几个星星
                for (var j = 0; j <= i; j++) {
                    document.write("★");
                }
                document.write("<br/>");
            }

③ 乘法口诀表

//掌握------必须要写出来的
               for(var i=1;i<=9;i++){
                 //控制每一行有多少个表达式
                 for(var j=1;j<=i;j++){
                   document.write(i+"*"+j+"="+i*j);
                 }
                 document.write("<br/>");
               }

表格版本的 九九乘法表

document.write("<table  border='1' cellpadding='0' cellspacing='0'>");
            for (var i = 1; i <= 9; i++) {//控制的行数
                document.write("<tr>");
                for (var j = 1; j <= i; j++) {
                    document.write("<td>");
                    document.write(i + "*" + j + "=" + i * j);
                    document.write("</td>");
                }
                document.write("</tr>");
            }
            document.write("</table>");

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 1][]

[https_wushaopei.github.io]: https://wushaopei.github.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70]: /images/20211122/c4233d00abd042a58b45b677b0ffcfd4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 1]: /images/20211122/ba519de6f19c4c46a55fa257fba8ddb5.png