目录

for语句

基本语法

for循环的加载流程

for死循环

 例子：

循环遍历数组

 循环绑定事件

动态创建标签

while及do-while

基本语法

区别

while循环

 do-while循环

for循环和while循环的区别

continue及break

for语句

让特定的代码段执行指定的次数

• 基本语法

for(表达式1;表达式2;表达式3){
      循环体
}
表达式1:设置初始值
表达式2:循环条件 循环的终值
表达式3：更新循环变量
循环体：特定的代码段

• for循环的加载流程

// 求1-4的和
var total = 0;
for (var i = 1; i < 5; i++) {
    console.log(i);
    total = total + i; //total = 10;
    // total += i;
}
// 循环结束 i的值真好是条件不满的值
console.log(i, total); // 5   10

• for死循环

  • 循环条件恒成立

for(var k = 100; k>10;k++){
    console.log(k);
}   

 例子：

 <script>
        //1. 1-100之间的偶数
        for (var i = 1; i < 101; i++) {
            if (i % 2 == 0) {
                console.log(i);
            }
        }

        //2. 1-100的和 
        var sum = 0;
        for (var j = 1; j <= 100; j++) {
            sum += j;
        }
        console.log(sum);

        //3. 求输出1到100岁，并提示出生、死亡
        for (var k = 1; k <= 100; k++) {
            if (k == 1) {
                console.log("我出生了");
            }
            console.log("我今年" + k + "岁了~~~");
            if (k == 100) {
                console.log("挂了~~~");
            }
        }


          //4. 入职薪水10k，每年涨幅20%，10年后工资多少？
        var money = 10000;
        sum = money*10;
        for(var j = 1; j < 10; j++){
           money += money*0.2;
           var sum = sum+ money*10;
        }


        //5. 页面打印100颗星，10颗一行
        for (var i = 0; i < 100; i++) {
            if (i % 10 == 0) {
                document.write("<br/>");
            }
            document.write("☆");
        }
    </script>

循环遍历数组

   // 定义一个数组   []  
        // 数组是存储任意数据的集合，多个数据之间用逗号隔开
        // 特点：由索引和值组成，索引从0开始依次递增 0对应第一项1对应第二项依次类推，天生自带length属性表示数组的长度或数组中数据的个数
        var arr = ["hello", 10, 20, 30, true, "哈哈", false, "呵呵", 100, 200];
        console.log(arr);

        console.log(arr.length);

        // 获取数组中某一项 数组[索引]
        // console.log(arr[0]);
        // console.log(arr[1]);
        // console.log(arr[2]);
        // console.log(arr[arr.length - 1]);

        // for (var i = 0; i < 10; i++) {
        //     // console.log(i);
        //     console.log(arr[i]);
        // }

        for (var i = 0; i < arr.length; i++) {
            // console.log(i);
            console.log(arr[i]);
        }
    </script>

 循环绑定事件

<script>
        // 获取元素
        var oLis = document.getElementsByTagName("li");
        console.log(oLis);

        // oLis[0].onclick = function(){
        //     console.log("哈哈");
        // }

        // oLis[1].onclick = function(){
        //     console.log("哈哈");
        // }

        // oLis[2].onclick = function(){
        //     console.log("哈哈");
        // }

        // oLis[3].onclick = function(){
        //     console.log("哈哈");
        // }

        // ...

        for(var i = 0;i<oLis.length;i++){
            // console.log(i);
            // console.log(oLis[i]);
            oLis[i].onclick = function(){
                console.log("哈哈");
            }
        }
    </script>

动态创建标签

   <ul id="show">
        <!-- <li></li>
        <li></li>
        <li></li>
        <li></li> -->
    </ul>
    <script>
        // 获取元素
        var show = document.getElementById("show");

        // 数据
        var arr = ["周六休息", "周天上课", "五一放假", "放假不回家，在教室敲代码", "在宿舍敲代码", "在家里敲代码", "哈哈", "呵呵"];

        // 字符串拼接
        var str = '';
        for (var i = 0; i < arr.length; i++) {
            // str = '' + '<li>' + '周六休息' + '</li>' =>'<li>周六休息</li>'
            // str = '<li>周六休息</li>' + '<li>' + '周天上课' + '</li>' =>'<li>周六休息</li>''<li>周天上课</li>'
            str += '<li>' + arr[i] + '</li>';
        }

        console.log(str);
        // 赋值操作
        show.innerHTML = str;
    </script>

while及do-while

基本语法

while循环
设置初始值
while(条件){
	循环体
	更新循环变量
}

do-while循环
do{
	循环体
	更新循环变量
}while(条件)

区别

• while循环条件不成立一次都不执行，do-while不管条件成立与否最少执行一次，因为先执行的是do中的代码段

while循环

var i = 1;
        while (i < 51) {
            console.log(i);
            i++;
        }

        // for(var i = 50;i>=1;i--){
        //     console.log(i);
        // }
        var j = 50;
        while (j > 0) {
            console.log(j);
            j--;
        }


        var k = 10;
        while (k < 0) {
            console.log("哈哈");
            k--;
        }

 do-while循环

  var sum = 0;
        var n = 100;
        do{
            sum += n;
            n--;
        }while(n>0);
        console.log(sum);


        var m = 10;
        do{
            console.log(m);
            m++;
        }while(m<0);

for循环和while循环的区别

• for循环一般应用于初始值已知，终值已知，确定的循环次数

    // 输出1-100的奇数
  for(var i = 1;i<=100;i++){
              if(i%2!=0){
                  console.log(i);
              }
          }

• while循环一般应用于初始值未知，终值未知，循环次数不固定

  // 100块钱每天用一半，小于1块钱停止，能用几天？
        var money = 100;
        var day = 0;
        while(money > 1){
            money *= 0.5; 
            day++;
        }
        console.log("最后还剩"+money+"钱,用了"+day+"天");

continue及break

continue和break一般应用于循环中都是用来终止循环操作的，continue和break后边的代码都不执行了

continue是只终止当前这一次循环然后进入下一次循环

break是结束整个循环  

// 吃汤圆吃到第5个发现这个汤圆坏了
for(var i = 1;i<=10;i++){
    if(i == 5){
        console.log("第5个汤圆坏了");
        continue;
        console.log("哈哈哈");
    }

    console.log("当前吃的是第"+i+"个汤圆");
}


  // 吃汤圆吃到第5个发现汤里有老鼠
  for(var i = 1;i<=10;i++){
    if(i == 5){
        console.log("汤里有老鼠");
        break;
        console.log("哈哈哈");
    }

    console.log("当前吃的是第"+i+"个汤圆");
}