循环语句(循环for与while等)

1.1for循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>循环1-100</title>
</head>
<body>
    <h2>循环1-100</h2>
    <script>
     for (let index = 1; index <= 100; index++) {
        //  const element = array[index];
         document.write(index+"<br/>");
     }
    </script>
    <h2>输出99-1的奇数</h2>
    <script>
    for (let m = 99; m >=1; m-=2) {
        document.write(m+"<br/>");
    }
    </script>


</body>
</html>

1.2for循环嵌套

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>循环嵌套</title>
</head>

<body>
    <h2>循环嵌套</h2>
    <p>当循环与循环发生嵌套时遵循下列规则:</p>
    <p>1.外层为假时内层不执行</p>
    <p>2.先执行外层再执行内层,直至内层的条件为假时再返回外层去执行</p>
    <script>
        for (let i = 1; i <= 3; i++) {
            document.write(i + "<br/>")
            for (let j = 1; j <= 5; j++) {
                document.write(j + "<br/>")
            }
        }
    </script>


</body>

</html>

2.1while循环

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>while循环</title>
</head>

<body>
    <h2>while循环</h2>
    <p>while(条件){需要执行的代码;}</p>
    <script>
        var i = 1;//变量初始值
        while (i <= 100) {
            document.write(i + "<br/>");
            i++;
        }
    </script>
</body>

</html>

计算1-100之和

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>do-while循环</title>
</head>

<body>
    <h2>do-while语句</h2>
    <p>do{需要执行的代码;}while(条件)</p>
    <p>说明:这种语法的循环至少要被执行一次</p>
    <script>//1-100的和
        //sun=0+1=1
        //sum=0+1+2
        var sum = 0;//
        var n = 1;
        while(n<=100){
            sum+=n;
            n++;
        }
        document.write(sum+"<br>")
    </script>
</body>

</html>
for循环求9-1之和
var num = 0;
     for(var i = 10;i>1;i--){
        //  num+=i;
         num=num+i//0+10
         //0+10+9  0+10+9+8 0+10+9+8+7 0+10+9+8+7+6 0+10+9+8+7+6+5 0+10+9+8+7+6+5+4 0+10+9+8+7+6+5+4+3 0+10+9+8+7+6+5+4+3+2
     }
     console.log(num)
     //54

 



//输出个位数是3,十位数是3开头的,能被3整除的和
<script>
        //输出个位数是3,十位数是3开头的,能被3整除的和
        var num1 = 0;
        var i = 100;
        while (i >=1) {
            i--;
            if ( i%10==3 || Math.floor(i/10)==3 || i%3 == 0) {
                num1 += i;
                document.write(i+' ')
            }
        }
        document.write(num1 + "<br>")
    </script>

 

for与while的区别

for:适合已知循环次数的循环体

while:适合未知循环的循环体

2.2 do-while语句(不大建议用,即使条件不成立,它也要被执行一次)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>do-while循环</title>
</head>

<body>
    <h2>do-while语句</h2>
    <p>do{需要执行的代码;}while(条件)</p>
    <p>说明:这种语法的循环至少要被执行一次</p>
    <script>
        //输出1-10的偶数
        var i = 1;
        do {
            if (i % 2 == 0) {
                document.write(i + "<br/>");
            }
            i++;
        } while (i <= 10);
    </script>
</body>

</html>

 多举例子:

0到100之和多种写法:

正常:

<script type="text/javascript">
    var sum = 0;
    for (var i = 0; i <= 100; i++) {
        sum+=i

    }
    console.log(sum) //5050
</script>

 

简写:

<script type="text/javascript">
    for (var sum=i = 0;i <= 100; sum+=i,i++) {
    }
    console.log(sum) //5050
</script>

 es6循环

let arrData = res.data;
                    // 清空ul里的所有标签
                    gongsiqmResultList.html("");
                    html = ""
                    arrData.forEach((item,index,arr)=>{
                        html += `<li><a href="javascript:;" data-item="${item}">${item}</a></li>`
                    });
                    //ul
                    gongsiqmResultList.append(html);
                    if (arrData.length < 48) {
                        page = 1
                    }
let arr = res.data;
                // 清空ul里的所有标签
                dzqmNameList.html("");
                arr.forEach(item => {
                    html += `<li><a href="javascript:;"><span class="J_name">${item.xm}</span>${item.fs}分</a></li>`
                });
                dzqmNameList.append(html);
                if(arr.length<36){
                    pageNum = 1
                    dzqmNameMore.text("没有更多了")
                }
posted @ 2018-09-10 22:49  前端HL  阅读(249)  评论(0编辑  收藏  举报