js的三种基本循环方式

JavaScript 循环JavaScript 循环是反复执行同一段代码的循环功能

文章目录

• 三、do while的使用步骤
• 四、for 与 for each
• 五、结束循环

提示：以下是本篇文章正文内容，下面案例可供参考

一、for循环

语法结构：for(初始变量; 条件; 迭代变量){ 循环体 }

执行过程：声明初始值，判断条件是是否满足“条件满足执行循环体” 再迭代变量——>再判断条件——>循环体,直到条件不满足结束

输出位置：在循环内输出“每次循环的结果”。 在循环外输出“循环内最后一次输出的结果”。

** 循环嵌套：双重for循环**

嵌套循环内变量名不能重复，外层循环不能使用内层循环的变量。

执行过程：外层循环执行一次，内层循环执行结束。

eg：用for循环做出的简单案例

    // 99乘法表
    // 规则：九行，每行输出1 - 9个数相乘及结果
    // 
    for (var i = 1; i <= 9; i++) {
        for (var j = 1; j <= i; j++) {
            document.write(j + "*" + i + "=" + (i * j) + "\n");
        }
        document.write("<br>");
    }

二、while循环

语法：在外部声明初始变量，（）内添加判断条件，条件满足执行{}内的代码块“迭代变量放在代码块的下面添加”。

eg：简单示例

    var num = 10;
    while (num < 15) {
        //console.log(num);
        num++;
    }

三、do while循环

语法:do{ 循环体 }while(条件)

执行过程：至少执行一次循环体。先执行do后面的循环内容，再判断条件是否满足“成立则继续执行循环体”，不成立结束循环。

eg：简单示例

    var num1 = 0;
    do {
       //console.log(num1);
        num1++;
    } while (num1 > 5);

四、for 与 for each

    // for循环内部声明了一个变量，在循环内操作给同一个变量多次赋值
    // 在循环开始声明的变量i，之后每次循环都操作这个变量“”
    var lis = document.querySelectorAll('li');
    // for(var i =0;i<lis.length;i++){
    //     lis[i].onclick = function(){
    //         console.log('我是' + i);
    //     }
    // }
    // 调用数组的每一个元素，将元素传递给回调函数“forEach没有变量名但实际上每次循环都会创建了一个独立的不同的变量”
    // 注意：forEach内不能使用break结束循环“使用return”，return仅仅是结束函数，不能返回内容
    lis.forEach(function (item, index, lis) {
        item.onclick = function () {
            if (index > 3) {
                // break; //报错
                return;
            }
            console.log(index);
        }
    })

五、结束循环

continue : 用来跳出当前循环，继续下一次循环。

break ： 退出，结束，用来结束整个循环。

总结

本文只是一些简单的写法，如有差错，请多担待~~