WebStudy-JavaScript3

最新推荐文章于 2021-03-27 11:12:24 发布

Floatwor青舟

最新推荐文章于 2021-03-27 11:12:24 发布

阅读量234

点赞数

分类专栏：前端学习文章标签： javascript

本文链接：https://blog.csdn.net/f944913628/article/details/107669565

版权

前端学习专栏收录该内容

52 篇文章 0 订阅

订阅专栏

条件语句

通常在写代码时，总是需要为不同的决定来执行不同的动作。可以在代码中使用条件语句来完成该任务。

在 JavaScript 中，我们可使用以下条件语句：

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码

if (condition)
{
    当条件为 true 时执行的代码
}

tip：使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！

if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码

if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

if…else if…else 语句- 使用该语句来选择多个代码块之一来执行

if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

switch语句

switch 语句用于基于不同的条件来执行不同的动作。
工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

实例：显示今天的星期名称。注意 Sunday=0, Monday=1, Tuesday=2, 等等：

<body>

<p>点击下面的按钮来显示今天是周几：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var d=new Date().getDay();
	switch (d){
  		case 0:x="今天是星期日";
    	break;
 		case 1:x="今天是星期一";
        break;
  		case 2:x="今天是星期二";
        break;
        case 3:x="今天是星期三";
   	 	break;
  		case 4:x="今天是星期四";
    	break;
  		case 5:x="今天是星期五";
        break;
  		case 6:x="今天是星期六";
    	break;
 	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>

default关键词

default 关键词来规定匹配不存在时做的事情。
实例：如果今天不是星期六或星期日，则会输出默认的消息：

<body>

<p>点击下面的按钮，会显示出基于今日日期的消息：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var x;
	var d=new Date().getDay();
	switch (d)
    {
  		case 6:x="今天是星期六";
    	break;
  		case 0:x="今天是星期日";
    	break;
  		default:
    	x="期待周末";
  	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>

for循环

循环可以将代码块执行指定的次数。
如果想一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。
for 循环的语法：

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
tip：如果省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。
语句 3 在循环（代码块）已被执行之后执行
实例：

<body>
<p>点击按钮循环代码5次。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x="";
	for (var i=0;i<5;i++){
		x=x + "该数字为 " + i + "<br>";
	}
	document.getElementById("demo").innerHTML=x;
}
</script>
</body>

<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0;i<cars.length;i++){
	document.write(cars[i] + "<br>");
}
</script>
</body>

while循环

只要指定条件为 true，循环就可以一直执行代码块。
while 循环会在指定条件为真时循环执行代码块。

while (条件)
{
    需要执行的代码
}

==tip：==如果您忘记增加条件中所用变量的值，该循环永远不会结束。这可能导致浏览器崩溃。

do /while

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

do
{
    需要执行的代码
}
while (条件);

summary：
4 种循环的适用场景:
for : 比较适合遍历数组,字符串等等。
for in : 比较适合遍历对象，遍历对象时使用这个再合适不过了。
while : while 的话，与 for 的使用场景差不多。唯一不同的是，遍历的条件必须满足。
do while : 至少执行一边的循环，遍历数组和字符串也是很方便。

break和continue语句

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。

continue 语句（带有或不带标签引用）只能用在循环中。

break 语句（不带标签引用），只能用在循环或 switch 中。

通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：
实例：

<script>
cars=["BMW","Volvo","Saab","Ford"];
list:{
	document.write(cars[0] + "<br>"); 
	document.write(cars[1] + "<br>"); 
	document.write(cars[2] + "<br>"); 
	break list;
	document.write(cars[3] + "<br>"); 
	document.write(cars[4] + "<br>"); 
	document.write(cars[5] + "<br>"); 
}
</script>

结果BMW Volvo Saab

今天小练习

1、累加：

<script>
        var sum=0;
        for(i=0;i<=100;i++){
            sum+=i;
        
        } document.write(sum);
    </script>

2、阶乘：

<script>
         var num=1;
         for(i=1;i<=10;i++){
             num*=i;
         }  document.write(num);
    </script>

3、for循环的不同写法：

<script>
    for(i=0,j=10; i<10,j>7;i++,j--){
		document.write("i:"+i+";j:"+j+"<br>");
	}

    </script>

tip： for循环的语句1，语句2以及语句3在for（）中均是可以省略的，可以在其他地方声明。
4、用代码实现以下图形的类似样子：
图形1

      	       for(i=1;i<=5;i++){							//打印行数。
   	    	   
                  for(j=1;j<=5-i;j++) {	           
                      document.write("&nbsp;");					//控制行数前的空格数量，目的是让第一行的 * 能够居中显示。
                  }
                  
                  for(k=1;k<=2*i-1;k++) {    					//每行所需要打印 * 的数量。
                    document.write("*");
                   }
                  
                   document.write("<br>");						//换行
               }

图形2

   for(i=1;i<=5;i++){				    //打印行数。
   	    	   
                  for(j=1;j<=5-i;j++) {	                         
                    document.write("&nbsp;");	       //控制行数前的空格数量，目的是让第一行的 * 能够居中显示。
                  }
                  
                  for(k=1;k<=2*i-1;k++) {             //每行所需要打印 * 的数量。
                    if(k==1||k==2*i-1){
                                        document.write("*")
                                }else{
                                    document.write("&nbsp;")
                                }

                   }
                  
                   document.write("<br>");			    //换行
               }

图形3

   for(i=1;i<=5;i++){				    //打印行数。
   	    	   
                  for(j=1;j<=5-i;j++) {	                         
                    document.write("&nbsp;");	       //控制行数前的空格数量，目的是让第一行的 * 能够居中显示。
                  }
                  
                  for(k=1;k<=2*i-1;k++) {             //每行所需要打印 * 的数量。
                    if(k==1||k==2*i-1||i==5){
                                        document.write("*")
                                }else{
                                    document.write("&nbsp;")
                                }

                   }
                  
                   document.write("<br>");			    //换行
               }

图形4
这个样子的菱形其实就是把图形2倒着一放就可以了.

       	       for(i=1;i<=5;i++){				    //打印行数。
   	    	   
                  for(j=1;j<=5-i;j++) {	                         
                    document.write("&nbsp;");	       //控制行数前的空格数量，目的是让第一行的 * 能够居中显示。
                  }
                  
                  for(k=1;k<=2*i-1;k++) {             //每行所需要打印 * 的数量。
                    if(k==1||k==2*i-1){
                                        document.write("*")
                                }else{
                                    document.write("&nbsp;")
                                }

                   }
                  
                   document.write("<br>");			    //换行
               }
               for(i=5;i>=1;i--){					    //打印行数。
   	    	   
                  for(j=1;j<=5-i;j++) {	           
                      document.write("&nbsp;");	    	//控制行数前的空格数量，目的是让第一行的 * 能够居中显示。
                  }
                  
                  for(k=1;k<=2*i-1;k++) {                //每行所需要打印 * 的数量。
                    if(k==1||k==2*i-1){
                                        document.write("*")
                                }else{
                                    document.write("&nbsp;")
                                }
                   }
                  
                   document.write("<br>");				//换行
               }

5、九九乘法表：

<style>
    td{width: 60px;height: 10px;border: 1px solid blue;}
</style>
<script>
    // 九九乘法表
    document.write("<table>")
    for(i=1;i<10;i++){
        document.write("<tr>")
        for(j=1;j<=i;j++){
            document.write("<td>"+j+"*"+i+"="+i*j+"</td>")
        } 
        document.write("</tr>")
        document.write("<br>")
    }
    document.write("</table>")
</script>

6、三位数的水仙花数：

    for(x=1;x<10;x++){
        for(y=0;y<10;y++){
            for(z=0;z<10;z++){
                if(x*x*x+y*y*y+z*z*z==100*x+10*y+z){
                    document.write(100*x+10*y+z+"<br>")
                }

            }

        }
        
    }

结果：
153
370
371
407