1.while循环

While 循环会在指定条件为真时循环执行代码块。

    <button onclick="myfunction()">点击</button>
    <p id="one"></p>
    <script>
        function myfunction() {
            var x = "", i = 0;
            while (i < 9) {
                x = x + "这个数字是" + i + "<br>";
                i++;  //如果忘记增加条件中所用变量的值，该循环永远不会结束。该可能导致浏览器崩溃(已亲自尝试过)
            }
            document.getElementById("one").innerHTML = x;
        }
    </script>

tip:其中 i++ 不能掉

while循环.png

2.do/while循环

相比之前的while循环，do/while循环至少会执行一次。

其中i=0这次循环是一定会执行。

    <button onclick="myfunction()">点击</button>
    <p id="one"></p>
    <script>
        function myfunction(){
            var x="",i=0;
            do{
                x=x+i*3+"<br>";
                i++;
            }
            while(i<6)
            document.getElementById("one").innerHTML=x;
        }
    </script>

do。while循环.png

3.for与while的区别

表面区别，贼简单，看看代码就懂了。

    <script>
        names = ["平帅", "张路", "胡凯", "梁昊天", "刘奎元"];
        for (var i = 0; i < names.length; i++) {
            document.write(names[i] + "<br>");
        }
        cars = ["平帅", "张路", "胡凯", "梁昊天", "刘奎元"];
        var i=0;
        while(i<cars.length){
            document.write(cars[i]+"<br>");
            i++;
        }
    </script>

4.Break（停止）

即当i=6时循环停止，结果只输出0~5.

    <button onclick="myfunction()">点击</button>
    <p id="one"></p>
    <script>
        function myfunction(){
            var x="";
            for(var i=0;i<9;i++){
                if(i==6){
                    break;     //或者省略{}，改为    if (i==6) break;
                }
                x=x+"这个数字是"+i+"<br>";
            }
            document.getElementById("one").innerHTML=x;
        }
    </script>

Break.png

5.Continue（继续）

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

该例子跳过了值4

    <button onclick="myfunction()">点击</button>
    <p id="one"></p>
    <script>
        function myfunction(){
            var x="";
            for(var i=0;i<9;i++){
                if(i==4){
                    continue;   //与break一样  可简写；
                }
                x=x+i+"<br>";
            }
            document.getElementById("one").innerHTML=x;
        }
    </script>

continue.png

6.JavaScript标签

有点难懂 仔细看w3c上的解释

http://www.w3school.com.cn/js/js_break.asp

7.JS错误

try 语句测试代码块的错误

catch 语句处理错误

throw 语句创建自定义错误

catch 块会捕捉到 try 块中的错误，并执行代码来处理它

下面例子中应该是alert，故意打错点击看页面弹出错误消息

    <input type="button" value="查看消息" onclick="message()">
    <script>
        var txt="";
        function message(){
            try{
                alddert("欢迎光临!"); //正确为alert
            }
            catch(err)
            {
                txt="本页有一个错误。\n\n";
                txt+="错误描述："+err.message+"\n\n";
                txt+="点击确定继续。\n\n";
                alert(txt);
            }
        }
    </script>

JS错误.png

自己理解：用try{}包括你所需运行的代码块，若没有错误，则成功运行，若有错误，catch会抓住错误，并显示错误信息。

8.throw(创建或抛出异常)

    <p>请输入 5 到 10 之间的数字：</p>
    <input id="demo" type="text">
    <button type="button" onclick="myFunction()">测试输入值</button>
    <p id="mess"></p>
    <script>
        function myFunction() {
            try {
                var x = document.getElementById("demo").value;
                if (x == "") throw "值为空";
                if (isNaN(x)) throw "不是数字";
                if (x > 10) throw "太大";
                if (x < 5) throw "太小";
            }
            catch (err) {
                var y = document.getElementById("mess");
                y.innerHTML = "错误：" + err + "。";
            }
        }
    </script>

空.png
太小.png
太大.png

自己理解：你try里面的代码块有错误时，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自定义的错误消息。其中throw有点像switch，就是满足哪个错误条件就输出哪个错误信息。