java基础61 JavaScript循环语句之while、do...while、for及for...in循环（网页知识）

最新推荐文章于 2024-04-26 16:47:03 发布

weixin_30895603

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量131

点赞数

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/dshore123/p/9416306.html

版权

本文知识点（目录）：

    1、while循环语句
    2、do...while循环语句
    3、for循环语句
    4、for...in循环语句
    5、附录1（with语句）
    6、附录2（打印多边形及乘法表）

1、while循环语句

格式:
   while(判断条件){
       循环体内容代码;
   }

1.1、实例

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>while循环练习</title>
 6 </head>
 7 <script type="text/javascript">
 8     /*
 9     循环语句:while循环
10         格式:
11             while(判断条件){
12                 循环体内容代码;
13             }
14     */
15     //打印5次helloWorld
16     var a=0;
17     while(a<5){
18         document.write("helloWorld</br>");
19         a++;
20     }
21     //需求计算1-100的总和
22     var num=1;
23     var sum=0;
24     while(num<=100){
25         sum+=num;
26         num++;
27     }
28     document.write(sum+"</br>");
29 </script>
30 <body>
31 </body>
32 </html>

实例结果图

2、do...while循环语句

格式：
   do{
      循环体内容代码;
   }while(判断条件)

2.1、实例

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7 <script type="text/javascript">
 8     /*
 9     循环语句:do...while循环
10         格式：
11             do{
12                 循环体内容代码;
13             }while(判断条件);
14     */
15 
16     //需求计算1-100种中奇数的和
17     var b=1;
18     var sum=0;
19     do{
20         if(b%2!=0){
21             sum+=b;
22         }
23         b++;
24     }while(b<=100);
25     document.write(sum+"</br>");
26 
27 </script>
28 <body>
29 </body>
30 </html>

实例结果图

3、for循环语句

格式:
   for(初始化语句;判断条件;循环后的语句){
        循环语句代码;
   }

3.1、实例

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>for循环练习</title>
 6 </head>
 7 <script type="text/javascript">
 8     /*
 9     循环语句：for循环
10         格式:
11             for(初始化语句;判断条件;循环后的语句){
12                  循环语句代码;
13             }
14     */
15     
16     //计算1-100的偶数和
17     var sum=0;
18     for(var c=1;c<=100;c++){
19         if(c%2==0){
20             sum+=c;
21         }
22     }
23     document.write(sum);
24 </script>
25 <body>
26 </body>
27 </html>

实例结果图

4、for...in循环语句

格式:
    for(var 变量名 in 要遍历的目标变量名){
                
    }

4.1、for...in语句的作用

1.可以用于遍历数组的元素。 注意：使用for-in语句遍历数组元素时遍历出的是数组下标
2.可以用于遍历对象的所有属性。 注意：使用for-in遍历对象属性的时候，遍历出来的是属性名

4.2、实例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>for...in语句练习</title>
</head>
<script type="text/javascript">
    //for-in语句遍历数组
    var arr=[12,17,13,19,20];
    for(var a in arr){
        document.write(arr[a]+"&nbsp;");//返回值：12 17 13 19 20     这里，如果直接输出a,得到的是该数组的下标值
    }
    
    document.write("<br/>");//换行
    //for-in语句遍历对象的属性值
     function person(id,name){
        this.id=id;
        this.name=name;    
    }
    var p=new person(110,"张三");
    for(var a in p){
        document.write(p[a]+"&nbsp;");//返回值：110 张三     这里，如果直接输出a,得到的是该对象的属性名
    }
</script>
<body>
</body>
</html>

实例结果图

附录1

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7 <script type="text/javascript">
 8 /*
 9     with语句：有了with语句,在存储对象属性和调用方法时候不用重复指定对象了
10     
11     格式：
12         with(对象){
13     
14         }
15 */
16     with(document){
17         for(var i=0;i<5;i++){
18             for(var j=0;j<5;j++){
19                 write("*&nbsp;");//这里本来要写document.write()才能把值打印出到页面上，要想不重复写document，就在with()括号中写上document
20             }
21                 write("</br>");
22         }
23     }
24     
25     
26      function person(id,name){
27         this.id=id;
28         this.name=name;    
29     }
30     document.write("<hr/>");
31     var p=new person(110,"狗娃");
32     with(p){
33         document.write(id+"&nbsp;"+name);//这里本来要p.id和p.name才能获取到值的，要想不重复写p，则在with()括号中写上p即可，然后用大括号括起来
34     }
35     
36 </script>
37 <body>
38 </body>
39 </html>

附录2

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7 <script type="text/javascript">
 8     //需求1：打印出"*"的正方形,5行5列
 9     for(var i=0;i<5;i++){
10         for(var j=0;j<5;j++){
11             document.write("*&nbsp;&nbsp;&nbsp;");
12         }
13         document.write("<br/>");
14     }
15 
16     document.write("<hr/>");//水平线
17     //需求2：打印出一个正直角三角形,5行5列
18     for(var i=0;i<5;i++){
19         for(var j=0;j<=i;j++){
20             document.write("*&nbsp;&nbsp;&nbsp;");
21         }    
22         document.write("<br/>");
23     }
24     
25     document.write("<hr/>");//水平线
26     //需求3：打印出一个倒直角三角形,5行5列
27     for(var i=0;i<5;i++){
28         for(var j=4;j>=i;j--){
29             document.write("*&nbsp;&nbsp;&nbsp;");
30         }    
31         document.write("<br/>");
32     }
33     
34     document.write("<hr/>");//水平线
35     //需求4：打印出一个九九乘法表
36     for(var i=1;i<10;i++){
37         for(var j=1;j<=i;j++){
38             document.write(j+"*"+i+"="+(i*j)+"&nbsp;&nbsp;&nbsp;&nbsp;");
39         }
40         document.write("<br/>");
41     }
42 </script>
43 <body>
44 </body>
45 </html>

附录2结果图

原创作者：DSHORE

作者主页：http://www.cnblogs.com/dshore123/

原文出自：https://www.cnblogs.com/dshore123/p/9416306.html

欢迎转载，转载务必说明出处。（如果本文对您有帮助，可以点击一下右下角的推荐，或评论，谢谢！）

转载于:https://www.cnblogs.com/dshore123/p/9416306.html

weixin_30895603

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
java基础61 JavaScript循环语句之while、do...while、for及for...in循环（网页知识）

本文知识点（目录）： 1、while循环语句 2、do...while循环语句 3、for循环语句 4、for...in循环语句 5、附录1（with语句） 6、附录2（打印多边形及乘法表）1、while循环语句格式: while(判断条件){ 循环体内容代码; }1.1、实例 1 <!d...
复制链接

扫一扫