JavaScript跳出语句

最新推荐文章于 2024-08-24 20:00:00 发布

仙鹤__

最新推荐文章于 2024-08-24 20:00:00 发布

阅读量458

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_52629158/article/details/130304804

版权

文章详细介绍了JavaScript中的break和continue语句在循环中的作用，以及debugger语句的调试功能。同时，讨论了JS中的错误类型，包括加载时错误、运行时错误和逻辑错误。此外，还解释了在循环中this的指向，特别是在事件处理函数中的应用。

摘要由CSDN通过智能技术生成

1.1.1 break;

语法：break;"跳出"并且终止循环（离开循环，循环结束了）

例如：

{
        //  break;"跳出"并且终止循环
        for(let i=1;i<=10;i++){
            if(i==5){
                break;
            }
            console.log(i);
           

        }

        }

预览：

1.1.2 continue;

格式：continue;跳出并且终止当前(当次)的循环，如果下个值仍满足循环中条件，循环体里的语句块会继续执行。

例如：

 {
            // continue;"跳出"并且终止当次循环,如果下个值满足条件值循环体仍进行
            for(let i=1;i<=10;i++){
            if(i==5){
                continue;
            }
            console.log(''+i);
           

        }
        }

预览：

1.2 debugger语句

debugger 语句调试语句。

debugger 语句用于停止执行 JavaScript，并调用 (如果可用) 调试函数。

使用 debugger 语句类似于在代码中设置断点。

断点设置，并调试的方法：

（1）通常，你可以通过按下 F12 打开开发者工具面板

（2）打开，sources资源面板，在行号上点击，点击后的当前行变成蓝色。这一行就是我们设置的断点行。

（3）接着，刷新一下当前页面。这时，页面变成灰色。

如下所示：

（4）按F8，单步输出（一步一步输出）。当你按F8的时候，计算机会从当前蓝色断点那一行，跳到debugger语句那一行，把javascript脚本停止掉。

注意： 如果调试工具不可用，则调试语句将无法工作。

例如：

 {
 for(let i=0;i<=6;i++){
            console.log(i);
            debugger;
           
        }
        }

JS 中的主要有哪几类错误(面试题)

JS有三类的错误:

加载时错误：加载web页面时出现的错误(如语法错误)称为加载时错误，它会动态生成错误。

运行时错误：由于滥用html语言中的命令而导致的错误。

逻辑错误：这些错误是由于对具有不同操作的函数执行了错误的逻辑而导致的。

1.3 循环中this指向

循环中你直接输出this，这个this，指的是window对象。

在循环中，当前对象身上，添加单击事件，事件处理函数中的this，指向的是当前你点击的这个对象。

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .pic-box li{
        list-style-type: none;
        width: 300px;
        height: 300px;
        float: left;
    }
    .pic-box li img{
        width: 100%;
        height: 100%;
    }
    .active{
        border: 2px solid orange;
    }
</style>
<body>
    <ul id="pic-box" class="pic-box">
        <li class="active"><img src="img/1.jpeg" alt="" width="300"></li>
        <li><img src="img/2.jpeg" alt="" width="300"></li>
        <li><img src="img/3.jpeg" alt="" width="300"></li>
        <li><img src="img/4.png" alt="" width="300"></li>
       
    </ul>
    <script>
// 抓取元素
let picBox =document.getElementById('pic-box');

let ulLis=picBox
// for 循环中的this指向
// 遍历
for(let i=0;i<=ulLis.length-1;i++){
    // console.log(this);
    // 1.给遍历到的当前的这个 li元素身上，添加index属性，并且将i的值，赋值给该属性。
    ulLis[i].index=i;
    // console.log(ulLis[i].index);
    // 2.点击 每个li
    ulLis[i].onclick=function(){
        // 循环体中 单击事件 事件处理函数中的this，指向的是当前操作对象自身
        console.log(this.index);
        // (1).去掉所有对象身上带的active类
        for(let j=0;j<=ulLis.length-1;j++){
            ulLis[j].className = '';
        }
        // (2).当前点击的对象身上，添加边框，其他对象身上的边框去掉。
        this.className='active';
    }
   
}
    </script>