JQuery和原生JS遍历数组和对象的对比

程序猿tu

于 2022-03-01 10:56:21 发布

阅读量609

点赞数

分类专栏： JQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_41171409/article/details/123200380

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1 遍历数组

1.1 JQuery遍历数组

在JQuery中遍历数组和对象都是使用$.each(object,[callback])来进行遍历。

遍历数组

<script>
        $(function () {
            var arr = [1, 3, 5, 7, 9];

            // 通过jQuery静态方法遍历数组
            // 第一个回调函数参数是当前遍历的索引
            // 第二个回调函数参数是遍历到的元素
            // 返回值: 被遍历的数组

            var $res2 = $.each(arr, function (idx, ele) {
                console.log(idx, ele);
            });
            console.log($res2);
        });
    </script>

1.2 原生JS遍历数组

原生JS通过的forEach()方法对数组进行遍历

<script>
        $(function () {
            // 遍历数组
            var arr = [1, 3, 5, 7, 9];

            // 3.1.1通过原生方法遍历数组
            // 第一个回调函数参数是遍历到的元素
            // 第二个回调函数参数是当前遍历的索引
            // 返回值: 没有返回值

            var res = arr.forEach(function (ele, idx) {
                console.log(idx, ele);
            });
            console.log(res);
        });
    </script>

2 遍历对象

2.1 JQuery遍历对象

JQuery遍历对象和遍历数组方法一致，都是使用$.each(object,[callback])

<script>
        $(function () {
            // 遍历对象
            var obj = {name: "rtp", age:"33", gender:"male"};

            // 通过jQuery静态方法遍历对象

            $.each(obj,function (key, value) {
                console.log(key, value);
            });
        });
    </script>

2.2 原生JS遍历对象

原生的JS遍历对象没有forEach()方法，而是通过for in对对象进行遍历

<script>
        $(function () {

            // 遍历对象
            var obj = {name: "lnj", age:"33", gender:"male"};

            // js对象没有forEach方法,所以通过forin方法遍历对象
            for(var key in obj){
                console.log(key, obj[key]);
            }

        });
    </script>