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

目录

1 遍历数组

1.1 JQuery遍历数组

1.2 原生JS遍历数组

2 遍历对象

2.1 JQuery遍历对象

2.2 原生JS遍历对象

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>

---