Jquery的each(function(){})里:return false相当于break; return ture相当于continue

2023-10-16 17:27:15 浏览数 (1)

突然有点想不起Jq的each()回调函数里,return truereturn false的行为表现了。所以写下demo记录下。

1. 结论

each(function(){})中: return true(return) 相当于continue,跳出当次循环; return false 相当于 break,跳出当前循环。

2. 案例验证

代码语言:javascript复制
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">

    var testData = [
        {
            "id":1,
            "name":"aa",
            "age": 8

        },
        {
            "id":2,
            "name":"bb",
            "age": 12

        },
        {
            "id":3,
            "name":"cc",
            "age": 18

        },
        {
            "id":5,
            "name":"ee",
            "age": 1

        },
        {
            "id":4,
            "name":"dd",
            "age": 22

        },

    ]

    $(testData).each(function(){
        if (this.age >= 18) return true;
        console.log(this); // 返回 年龄 8/12/1
    });

    $(testData).each(function(){
        if (this.age >= 18) return false;
        console.log(this);// 返回 年龄 8/12
    });
    </script>

</body>
</html>

由于参考文章都提及需要通过try-catch来跳出函数,于是我又尝试each遍历标签jq对象,结果发现上面的结论是ok的。

代码语言:javascript复制
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div>8</div>
    <div>12</div>
    <div>18</div>
    <div>1</div>
    <div>22</div>

    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">

    $('div').each(function(){
        if (Number($(this).text()) >= 18) return true;
        console.log('test-for-return-true: ',$(this).text()); // 返回  8/12/1
    });

    $('div').each(function(){
        if (Number($(this).text()) >= 18) return false;
        console.log('test-for-return-false: ',$(this).text());// 返回  8/12
    });
    </script>

</body>
</html>

参考文章:

  1. jquery中each函数的return
  2. Jquery的each里面用return false代替break; return ture 代替continue 两篇文章都提到了:、 return true(return) 相当于continue,跳出当次循环; return false 相当于 break,跳出当前循环。 但又都提到需要用try-catch来跳出函数。有点奇怪,个人测试return false;在满足条件的时候就会跳出each循环。

0 人点赞