06 - 静态方法（each，map）

最新推荐文章于 2021-03-15 23:04:05 发布

原创最新推荐文章于 2021-03-15 23:04:05 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

23 篇文章

订阅专栏

本文详细比较了JavaScript原生的forEach与map方法，以及jQuery的each与map静态方法在遍历数组和伪数组时的区别。探讨了它们的参数传递方式、适用范围及返回值类型，通过示例代码直观展示不同方法的应用场景。

forEach & each

JS的原生forEach
forEach（遍历到的元素，当前遍历到的索引）
- 只能遍历数组, 不能遍历伪数组

jQuery的each静态方法
each（当前遍历到的索引，遍历到的元素）

可以遍历伪数组

示例代码：

	<script>
		//数组
        var arr = [1, 3, 5, 7, 9];
        //伪数组
        var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
        
        arr.forEach(function (value, index) {
            console.log(index, value);
        });
        obj.forEach(function (value, index) {
            console.log(index, value);
        });

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

map & map

JS的原生map
forEach（当前遍历到的元素，当前遍历到的索引，当前被遍历的数组）
- 只能遍历数组, 不能遍历伪数组
jQuery的map静态方法
each（要遍历的数组，每遍历一个元素之后执行的回调函数 ( 遍历到的元素,遍历到的索引){}）
- 可以遍历伪数组

<script>
        var arr = [1, 3, 5, 7, 9];
        var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
        arr.map(function (value, index, array) {
            console.log(index, value, array);
        });
        obj.map(function (value, index, array) {
            console.log(index, value, array);
        });
       
        $.map(arr, function (value, index) {
            console.log(index, value);
        });
        $.map(obj, function (value, index) {
            console.log(index, value);
            return value + index;
        });
    </script>

each & map

each静态方法
默认的返回值：遍历谁就返回谁
不支持在回调函数中对遍历的数组进行处理
map静态方法
默认返回值：空数组
可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回

<script>
        var arr = [1, 3, 5, 7, 9];
        var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
        var res = $.map(obj, function (value, index) {
            console.log(index, value);
            return value + index;
        });

        var res2 = $.each(obj, function (index, value) {
            console.log(index, value);
            return value + index;
        });
        console.log(res);
        console.log(res2);
    </script>