JavaScript02-基本语法2

JavaScript02-基本语法2

1. 逻辑运算符

JS中为我们提供了三种逻辑运算符

! 非

​ !可以用来对一个值进行非运算

​ 所谓非运算就是值对一个布尔值进行取反操作,true变false,false变true

​ 如果对一个值进行两次取反,它不会变化

​ 如果对非布尔值进行元素,则会将其转换为布尔值,然后再取反

​ 所以我们可以利用该特点,来将一个其他的数据类型转换为布尔值

可以为一个任意数据类型取两次反,来将其转换为布尔值,原理和Boolean()函数一样

&& 与

​ &&可以对符号两侧的值进行与运算并返回结果

​ 运算规则

​ 两个值中只要有一个值为false就返回false,只有两个值都为true时,才会返回true

​ JS中的“与”属于短路的与,如果第一个值为false,则不会看第二个值

|| 或

​ ||可以对符号两侧的值进行或运算并返回结果

​ 运算规则:

两个值中只要有一个true,就返回true,如果两个值都为false,才返回false

​ JS中的“或”属于短路的或,如果第一个值为true,则不会检查第二个值

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         
         //如果两个值都是true则返回true
         var result = true && true;
         
         //只要有一个false,就返回false
         result = true && false;
         result = false && true;
         result = false && false;
         
         //console.log("result = "+result);
         
         //第一个值为true,会检查第二个值
         //true && alert("看我出不出来!!");
         
         //第一个值为false,不会检查第二个值
         //false && alert("看我出不出来!!");
         
         //两个都是false,则返回false
         result = false || false;
         
         //只有有一个true,就返回true
         result = true || false;
         result = false || true ;
         result = true || true ;
         
         //console.log("result = "+result);
         
         //第一个值为false,则会检查第二个值
         //false || alert("123");
         
         //第一个值为true,则不再检查第二个值
         //true || alert("123");
         
         
         
         var a = false;
         
         //对a进行非运算
         a = !a;
         
         //console.log("a = "+a);
         
         var b = 10;
         b = !!b;
         
         //console.log("b = "+b);
         //console.log(typeof b);
         
      </script>
   </head>
   <body>
   </body>
</html>

&& || 非布尔值的情况

对于非布尔值进行与或运算时,会先将其转换为布尔值,然后再运算,并且返回原值

  • 与运算:
    • 如果第一个值为true,则必然返回第二个值
    • 如果第一个值为false,则直接返回第一个值
  • 或运算:
    • 如果第一个值为true,则直接返回第一个值
    • 如果第一个值为false,则返回第二个值

规律:&&遇到false就返回,||遇到true就返回,否则返回后面的那个

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      
      <script type="text/javascript">
         
         
         //true && true
         //与运算:如果两个值都为true,则返回后边的
         var result = 5 && 6;
         
         
         //与运算:如果两个值中有false,则返回靠前的false
         //false && true
         result = 0 && 2;
         result = 2 && 0;
         //false && false
         result = NaN && 0;
         result = 0 && NaN;
         
         
         //true || true
         //如果第一个值为true,则直接返回第一个值
         result = 2 || 1;
         result = 2 || NaN;
         result = 2 || 0;
         
         //如果第一个值为false,则直接返回第二个值
         result = NaN || 1;
         result = NaN || 0;
         
         result = "" || "hello";
         
         result = -1 || "你好";
         
         
         console.log("result = "+result);
         
      </script>
      
   </head>
   <body>
   </body>
</html>

2. 赋值运算符

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         /*
          * =
          *     可以将符号右侧的值赋值给符号左侧的变量
          * += 
          *     a += 5 等价于 a = a + 5
          * -=
          *     a -= 5 等价于 a = a - 5
          * *=
          *     a *= 5 等价于 a = a * 5
          * /=
          *     a /= 5 等价于 a = a / 5
          * %=
          *     a %= 5 等价于 a = a % 5
          *     
          */
         var a = 10;
         
         //a = a + 5;
         //a += 5;
         
         //a -= 5;
         
         //a *= 5;
         
         // a = a%3;
         a %= 3;
         
         console.log("a = "+a);
         
      </script>
   </head>
   <body>
   </body>
</html>

3. 关系运算符

通过关系运算符可以比较两个值之间的大小关系,

​ 如果关系成立它会返回true,如果关系不成立则返回false

通过关系运算符可以比较两个值之间的大小关系,

​ 如果关系成立它会返回true,如果关系不成立则返回false

> 大于号

​ 判断符号左侧的值是否大于右侧的值

​ 如果关系成立,返回true,如果关系不成立则返回false

>= 大于等于

​ 判断符号左侧的值是否大于或等于右侧的值

< 小于号

<= 小于等于

非数值的情况

对于非数值进行比较时,会将其转换为数字然后在比较

如果符号两侧的值都是字符串时,不会将其转换为数字进行比较,而会分别比较字符串中字符的Unicode编码

如果比较的两个字符串型的数字,可能会得到不可预期的结果

注意:在比较两个字符串型的数字时,一定一定一定要转型

     //比较两个字符串时,比较的是字符串的字符编码
     //console.log("a" < "b");//true
     //比较字符编码时是一位一位进行比较
     //如果两位一样,则比较下一位,所以借用它来对英文进行排序
     //console.log("abc" < "bcd");//true
     //比较中文时没有意义
     //console.log("戒" > "我"); //true
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         
         var result = 5 > 10;//false
         
         result = 5 > 4; //true
         
         result = 5 > 5; //false
         
         result = 5 >= 5; //true
         
         result = 5 >= 4; //true
         
         result = 5 < 4; //false
         
         result = 4 <= 4; //true
         
         //console.log("result = "+result);
         
         //console.log(1 > true); //false
         //console.log(1 >= true); //true
         //console.log(1 > "0"); //true
         //console.log(10 > null); //true
         //任何值和NaN做任何比较都是false
         //console.log(10 <= "hello"); //false
         //console.log(true > false); //true
         
         //console.log("1" < "5"); //true
         //console.log("11" < "5"); //true
         
         //比较两个字符串时,比较的是字符串的字符编码
         //console.log("a" < "b");//true
         //比较字符编码时是一位一位进行比较
         //如果两位一样,则比较下一位,所以借用它来对英文进行排序
         //console.log("abc" < "bcd");//true
         //比较中文时没有意义
         //console.log("戒" > "我"); //true
         
         //如果比较的两个字符串型的数字,可能会得到不可预期的结果
         //注意:在比较两个字符串型的数字时,一定一定一定要转型
         console.log("11123123123123123123" < +"5"); //true
         
      </script>
   </head>
   <body>
   </body>
</html>

4. 编码

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         /*
          * 在字符串中使用转义字符输入Unicode编码
          *     \u四位编码
          */
         console.log("\u2620");
         
      </script>
   </head>
   <body>
      
      <!--在网页中使用Unicode编码
         &#编码; 这里的编码需要的是10进制
      -->
      <h1 style="font-size: 200px;">&#9760;</h1>
      <h1 style="font-size: 200px;">&#9856;</h1>
      
   </body>
</html>

5. 相等运算符

相等运算符用来比较两个值是否相等,如果相等会返回true,否则返回false

使用 == 来做相等运算

当使用==来比较两个值时,如果值的类型不同,则会自动进行类型转换,将其转换为相同的类型,然后在比较
不相等

​ 不相等用来判断两个值是否不相等,如果不相等返回true,否则返回false

​ 使用 != 来做不相等运算

不相等也会对变量进行自动的类型转换,如果转换后相等它也会返回false

=== 全等

​ 用来判断两个值是否全等,它和相等类似,不同的是它不会做自动的类型转换

​ 如果两个值的类型不同,直接返回false

​ !== 不全等

​ 用来判断两个值是否不全等,和不等类似,不同的是它不会做自动的类型转换

​ 如果两个值的类型不同,直接返回true

NaN不和任何值相等,包括他本身。可以通过isNaN()函数来判断一个值是否是NaN,如果该值是NaN则返回true,否则返回false

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         /*
          * 相等运算符用来比较两个值是否相等,
          *     如果相等会返回true,否则返回false
          * 
          * 使用 == 来做相等运算
          *     - 当使用==来比较两个值时,如果值的类型不同,
          *        则会自动进行类型转换,将其转换为相同的类型
          *        然后在比较
          * 不相等
          *      不相等用来判断两个值是否不相等,如果不相等返回true,否则返回false
          *     - 使用 != 来做不相等运算
          *     - 不相等也会对变量进行自动的类型转换,如果转换后相等它也会返回false
          * 
          *        
          *  ===
          *        全等
          *        - 用来判断两个值是否全等,它和相等类似,不同的是它不会做自动的类型转换
          *           如果两个值的类型不同,直接返回false
          *     !==
          *        不全等
          *        - 用来判断两个值是否不全等,和不等类似,不同的是它不会做自动的类型转换
          *           如果两个值的类型不同,直接返回true
          */
         
         //console.log(1 == 1); //true
         
         var a = 10;
         
         //console.log(a == 4); //false
         
         //console.log("1" == 1); //true
         
         //console.log(true == "1"); //true
         
         //console.log(null == 0); //false
         
         /*
          * undefined 衍生自 null
          *     所以这两个值做相等判断时,会返回true
          */
         //console.log(undefined == null);
         
         /*
          * NaN不和任何值相等,包括他本身
          */
         //console.log(NaN == NaN); //false
         
         var b = NaN;
         
         //判断b的值是否是NaN
         //console.log(b == NaN);
         /*
          * 可以通过isNaN()函数来判断一个值是否是NaN
          *     如果该值是NaN则返回true,否则返回false
          */
         //console.log(isNaN(b));
         
         //console.log(10 != 5); //true
         //console.log(10 != 10); //false
         //console.log("abcd" != "abcd"); //false
         //console.log("1" != 1);//false
         
         //console.log("123" === 123);//false
         //console.log(null === undefined);//false
         
         console.log(1 !== "1"); //true
         
         
      </script>
   </head>
   <body>
   </body>
</html>

6. 条件运算符

条件运算符也叫三元运算符
语法:
条件表达式?语句1:语句2;

​ 执行的流程:

条件运算符在执行时,首先对条件表达式进行求值,

​ 如果该值为true,则执行语句1,并返回执行结果

​ 如果该值为false,则执行语句2,并返回执行结果

​ 如果条件的表达式的求值结果是一个非布尔值,

​ 会将其转换为布尔值然后在运算

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         /*
          * 条件运算符也叫三元运算符
          *     语法:
          *        条件表达式?语句1:语句2;
          *     - 执行的流程:
          *        条件运算符在执行时,首先对条件表达式进行求值,
          *           如果该值为true,则执行语句1,并返回执行结果
          *           如果该值为false,则执行语句2,并返回执行结果
          *        如果条件的表达式的求值结果是一个非布尔值,
          *           会将其转换为布尔值然后在运算
          */
         
         //false?alert("语句1"):alert("语句2");
         
         var a = 300;
         var b = 143;
         var c = 50;
         
         //a > b ? alert("a大"):alert("b大");
         
         //获取a和b中的最大值
         //var max = a > b ? a : b;
         //获取a b c 中的大值
         //max = max > c ? max : c;
         
         //这种写法不推荐使用,不方便阅读
         var max = a > b ? (a > c ? a :c) : (b > c ? b : c);
         
         //console.log("max = "+max);
         
         //"hello"?alert("语句1"):alert("语句2");
         
         
      </script>
   </head>
   <body>
   </body>
</html>

7. 运算符优先级

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         /*
          * , 运算符
          *     使用,可以分割多个语句,一般可以在声明多个变量时使用,
          */
         //使用,运算符同时声明多个变量
         //var a , b , c;
         
         //可以同时声明多个变量并赋值
         //var a=1 , b=2 , c=3;
         //alert(b);
         
         /*
          * 就和数学中一样,在JS中运算符也有优先级,
          *     比如:先乘除 后加减
          * 在JS中有一个运算符优先级的表,
          *     在表中越靠上优先级越高,优先级越高越优先计算,
          *     如果优先级一样,则从左往右计算。
          * 但是这个表我们并不需要记忆,如果遇到优先级不清楚
          *     可以使用()来改变优先级
          */
         
         //var result = 1 + 2 * 3;
         
         /*
          * 如果||的优先级高,或者两个一样高,则应该返回3
          * 如果与的优先级高,则应该返回1
          *        
          */
         var result = 1 || 2 && 3;
         
         console.log("result = "+result);   
         
      </script>
   </head>
   <body>
   </body>
</html>

8. 代码块

我们的程序是由一条一条语句构成的,语句是按照自上向下的顺序一条一条执行的

在JS中可以使用{}来为语句进行分组,同一个{}中的语句我们称为是一组语句,它们要么都执行,要么都不执行,

一个{}中的语句我们也称为叫一个代码块,在代码块的后边就不用再编写;了

JS中的代码块,只具有分组的的作用,没有其他的用途,代码块内容的内容,在外部是完全可见的。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         /*
          * 我们的程序是由一条一条语句构成的
          *     语句是按照自上向下的顺序一条一条执行的
          *     在JS中可以使用{}来为语句进行分组,
          *        同一个{}中的语句我们称为是一组语句,
          *        它们要么都执行,要么都不执行,
          *        一个{}中的语句我们也称为叫一个代码块
          *        在代码块的后边就不用再编写;了
          * 
          *     JS中的代码块,只具有分组的的作用,没有其他的用途
          *        代码块内容的内容,在外部是完全可见的
          */
         {
            var a = 10;    
            alert("hello");
            console.log("你好");
            document.write("语句");
         }
         
         
         console.log("a = "+a);
      
         
         
         
      </script>
   </head>
   <body>
   </body>
</html>

9. 流程控制语句

流程控制语句

​ JS中的程序是从上到下一行一行执行的,通过流程控制语句可以控制程序执行流程,使程序可以根据一定的条件来选择执行

语句的分类:

​ 1. 条件判断语句

​ 2. 条件分支语句

​ 3. 循环语句

9.1 条件控制语句

条件判断语句:

​ 使用条件判断语句可以在执行某个语句之前进行判断,如果条件成立才会执行语句,条件不成立则语句不执行。

if语句
语法一:
if(条件表达式){
语句…
}

if语句在执行时,会先对条件表达式进行求值判断,如果条件表达式的值为true,则执行if后的语句,如果条件表达式的值为false,则不

会执行if后的语句。

if语句只能控制紧随其后的那个语句,如果希望if语句可以控制多条语句,可以将这些语句统一放到代码块中,if语句后的代码块不是必须

的,但是在开发中尽量写上代码块,即使if后只有一条语句

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         
         var a = 25;
         
         if(a > 10 && a <= 20){
            alert("a大于10,并且 a小于等于20");
         }  
         
         
      </script>
   </head>
   <body>
   </body>
</html>

if语句
语法二:
if(条件表达式){
语句…
}else{
语句…
}

if…else…语句
当该语句执行时,会先对if后的条件表达式进行求值判断,
如果该值为true,则执行if后的语句
如果该值为false,则执行else后的语句

语法三:
if(条件表达式){
语句…
}else if(条件表达式){
语句…
}else if(条件表达式){
语句…
}else{
语句…
}

if…else if…else
当该语句执行时,会从上到下依次对条件表达式进行求值判断
如果值为true,则执行当前语句。
如果值为false,则继续向下判断。
如果所有的条件都不满足,则执行最后一个else后的语句
该语句中,只会有一个代码块被执行,一旦代码块执行了,则直接结束语句

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         
         var age = 50;
         
         /*if(age >= 60){
            alert("你已经退休了~~");
         }else{
            alert("你还没退休~~~");
         }*/
         
         age = 200;
         
         /*if(age > 100){
            alert("活着挺没意思的~~");
         }else if(age > 80){
            alert("你也老大不小的了~~");   
         }else if(age > 60){
            alert("你也退休了~~");
         }else if(age > 30){
            alert("你已经中年了~~");
         }else if(age > 17){
            alert("你已经成年了");
         }else{
            alert("你还是个小孩子~~");
         }*/
         
         age = 90;
         
         if(age > 17 && age <= 30){
            alert("你已经成年了");
         }else if(age > 30 && age <= 60){
            alert("你已经中年了");
         }else if(age > 60 && age <= 80){
            alert("你已经退休了");
         }else{
            alert("你岁数挺大的了~~");
         }
         
         
      </script>
   </head>
   <body>
   </body>
</html>

练习

prompt()可以弹出一个提示框,该提示框中会带有一个文本框,用户可以在文本框中输入一段内容,该函数需要一个字符串作为参数,

该字符串将会作为提示框的提示文字

用户输入的内容将会作为函数的返回值返回,可以定义一个变量来接收该内容

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>if练习3</title>
      <script type="text/javascript">
         /*
          *     编写程序,由键盘输入三个整数分别存入变量num1、num2、num3,
          *     对他们进行排序,并且从小到大输出。
          */
         
         //获取用户输入的三个数
         /*
          * prompt()函数的返回值是String类型的
          */
         var num1 = +prompt("请输入第一个数:");
         var num2 = +prompt("请输入第二个数:");
         var num3 = +prompt("请输入第三个数:");
         
         
         //找到三个数中最小的数
         if(num1 < num2 && num1 < num3){
            //num1最小,比较num2和num3
            if(num2 < num3){
               //num1 num2 num3
               alert(num1 +","+num2 + ","+num3);
            }else{
               //num1 num3 num2
               alert(num1 +","+num3 + ","+num2);
            }
            
         }else if(num2 < num1 && num2 < num3){
            //num2最小,比较num1和num3
            if(num1 < num3){
               //num2 num1 num3
               alert(num2 +","+num1 + ","+num3);
            }else{
               //num2 num3 num1
               alert(num2 +","+num3 + ","+num1);
            }
            
         }else{
            //num3最小,比较num1和num2
            if(num1 < num2){
               // num3 num1 num2
               alert(num3 +","+num1 + ","+num2);
            }else{
               //num3 num2 num1
               alert(num3 +","+num2 + ","+num1);
            }
            
         }
         
         
      </script>
   </head>
   <body>
      
   </body>
</html>

9.2 条件分支语句-switch语句

​ 语法:
​ switch(条件表达式){
​ case 表达式:
​ 语句…
​ break;
case 表达式:
​ 语句…
​ break;
​ default:
​ 语句…
​ break;
​ }

执行流程:

​ switch…case…语句

​ 在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较,

​ 如果比较结果为true,则从当前case处开始执行代码。

​ 当前case后的所有的代码都会执行,我们可以在case的后边跟着一个break关键字,这样可以确保只会执行当前case后的语句,而不会执行其他的case

​ 如果比较结果为false,则继续向下比较

​ 如果所有的比较结果都为false,则只执行default后的语句

​ switch语句和if语句的功能实际上有重复的,使用switch可以实现if的功能,

同样使用if也可以实现switch的功能,所以我们使用时,可以根据自己的习惯选择。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         //根据num的值,输出对应的中文
         
         var num = 3;
         
         /*if(num == 1){
            console.log("壹");
         }else if(num == 2){
            console.log("贰");
         }else if(num == 3){
            console.log("叁");
         }*/
         
         num = "hello";
         
         switch(num){
            case 1:
               console.log("壹");
               //使用break可以来退出switch语句
               break;
            case 2:
               console.log("贰");
               break;
            case 3:
               console.log("叁");
               break;
            default:
               console.log("非法数字~~");
               break;
         }
         
      </script>
   </head>
   <body>
   </body>
</html>

9.3 循环语句-while循环

通过循环语句可以反复的执行一段代码多次

while循环
语法:
while(条件表达式){
语句…
}

while语句在执行时,先对条件表达式进行求值判断,如果值为true,则执行循环体,循环体执行完毕以后,继续对表达式进行判断,如

果为true,则继续执行循环体,以此类推,如果值为false,则终止循环

do…while循环
语法:
do{
语句…
}while(条件表达式)

执行流程:

do…while语句在执行时,会先执行循环体,循环体执行完毕以后,在对while后的条件表达式进行判断,如果结果为true,则继续执行循

环体,执行完毕继续判断以此类推,如果结果为false,则终止循环

实际上这两个语句功能类似,不同的是while是先判断后执行,而do…while会先执行后判断,do…while可以保证循环体至少执行一次,

而while不能

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         
         /*
          * 向页面中输出连续的数字
          */
         /*var n = 1;
         document.write(n++ +"<br />");*/
         
         var n = 1;
         
         //向这种将条件表达式写死为true的循环,叫做死循环
         //该循环不会停止,除非浏览器关闭,死循环在开发中慎用
         //可以使用break,来终止循环
         /*while(true){
            alert(n++);
            
            //判断n是否是10
            if(n == 10){
               //退出循环
               break;
            }
            
         }*/
         
         //创建一个循环,往往需要三个步骤
         
         //1.创初始化一个变量
         var i = 11;
         
         //2.在循环中设置一个条件表达式
         /*while(i <= 10){
            //3.定义一个更新表达式,每次更新初始化变量
            document.write(i++ +"<br />")
            
         }*/
         
         /*do{
            document.write(i++ +"<br />");
         }while(i <= 10);*/
         
         /*while(true){
            alert(1);
         }*/
         
      </script>
   </head>
   <body>
   </body>
</html>

9.4 for循环

for语句,也是一个循环语句,也称为for循环

在for循环中,为我们提供了专门的位置用来放三个表达式:

  1. 初始化表达式

  2. 条件表达式

  3. 更新表达式

for循环的语法:
for(①初始化表达式;②条件表达式;④更新表达式){
③语句…
}

for循环的执行流程:

​ ①执行初始化表达式,初始化变量(初始化表达式只会执行一次)

​ ②执行条件表达式,判断是否执行循环。

​ 如果为true,则执行循环③

​ 如果为false,终止循环

​ ④执行更新表达式,更新表达式执行完毕继续重复②

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         
         //创建一个执行10次的while循环
         //初始化表达式
         /*var i = 0;
         
         //创建一个循环,定义条件表达式
         while(i < 10){
            //设置更新表达式
            alert(i++);
         }*/
         
         for(var i = 0 ; i < 10 ; i++ ){
            alert(i);
         }
         
         /*
          * for循环中的三个部分都可以省略,也可以写在外部
          *     如果在for循环中不写任何的表达式,只写两个;
          *     此时循环是一个死循环会一直执行下去,慎用
          *     for(;;){
               alert("hello");
            }
          */

      </script>
   </head>
   <body>
   </body>
</html>

练习

for循环的嵌套

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title></title>
      <script type="text/javascript">
         
         /*
          
            通过程序,在页面中输出如下的图形:
            
            *      1   <1   i=0
            **     2   <2   i=1
            ***    3   <3   i=2
            ****   4   <4   i=3
            *****  5   <5   i=4
            
            *****
            *****
            *****
            *****
            *****
            
            ***** 1   j<5(5-0)  i=0
            ****  2      j<4(5-1)  i=1
            ***   3   j<3(5-2)  i=2
            **    4   j<2(5-3)  i=3
            *     5   j<1(5-4)  i=4
            
          
          */
         
         //向body中输出一个内容
         //document.write("*****<br />");
         
         //通过一个for循环来输出图形
         //这个for循环执行几次,图形的高度就是多少
         //它可以用来控制图形的高度
         for(var i=0 ; i<5 ; i++){
            
            /*
             * 在循环的内部再创建一个循环,用来控制图形的宽度
             * 目前我们的外部的for循环执行1次,内部的就会执行5次
             * 内层循环可以来决定图形的宽度,执行几次图形的宽度就是多少
             */
            /*for(var j=0 ; j<i+1 ; j++){
               document.write("*&nbsp;&nbsp;&nbsp;");
            }*/
            for(var j=0 ; j<5-i ; j++){
               document.write("*&nbsp;&nbsp;&nbsp;");
            }
            
            //输出一个换行
            document.write("<br />");
            
            
         }
         
         
         
      </script>
   </head>
   <body>
      
   </body>
</html>

9.5 break和continue关键字

break关键字可以用来退出switch或循环语句

不能在if语句中使用break和continue

break关键字,会立即终止离他最近的那个循环语句

continue关键字可以用来跳过当次循环

同样continue也是默认只会对离他最近的循环循环起作用

可以为循环语句创建一个label,来标识当前的循环

label:循环语句

使用break语句时,可以在break后跟着一个label,这样break将会结束指定的循环,而不是最近的

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         
         /*
          * break关键字可以用来退出switch或循环语句
          *     不能在if语句中使用break和continue
          *     break关键字,会立即终止离他最近的那个循环语句
          */
         
         /*for(var i=0 ; i<5 ; i++){
            console.log(i);
            
            if(i == 2){
               break;
            }
            
         }*/
         
         
         /*for(var i=0 ; i<5 ; i++){
            console.log("@外层循环"+i)
            for(var j=0 ; j<5; j++){
               break;
               console.log("内层循环:"+j);
            }
         }*/
         
         
         /*
          * 可以为循环语句创建一个label,来标识当前的循环
          * label:循环语句
          * 使用break语句时,可以在break后跟着一个label,
          *     这样break将会结束指定的循环,而不是最近的
          */
         
         /*outer:
         for(var i=0 ; i<5 ; i++){
            console.log("@外层循环"+i)
            for(var j=0 ; j<5; j++){
               break outer;
               console.log("内层循环:"+j);
            }
         }*/
         
         
         /*
          * continue关键字可以用来跳过当次循环
          *     同样continue也是默认只会对离他最近的循环循环起作用
          */
         /*for(var i=0 ; i<5 ; i++){
            
            if(i==2){
               continue;
            }
            
            console.log(i);
         }*/
         
         outer:
         for(var i=0 ; i<5 ; i++){
            
            for(var j=0 ; j<5 ; j++){
               
               continue;
               
               console.log("-->"+j);
               
            }
            
            console.log("@--->"+i);
         }
         
         
      </script>
   </head>
   <body>
   </body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MarxistVive

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值