2019-09-12发表2019-09-12更新前端3 分钟读完 (大约380个字)

静态方法-map

同原生 JS 的 forEach 方法一致,原生 JS 的map 方法也不能遍历伪数组,但是 JQuery 的 map 方法可以实现遍历伪数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态方法-map</title>
    <script
            src="https://code.jquery.com/jquery-1.12.4.js"
            integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
            crossorigin="anonymous">
    </script>
    <script>
        $(function () {
            var arr = [1, 3, 5, 7, 9];
            console.log(arr);
            $div = $("div");
            console.log($div);

            /*
            * 利用原生 JS 的 map 方法遍历真数组
            * 注意:
            * 与原生 JS 的forEach 一样不能遍历伪数组
            */
            arr.map(function (value, index, array) {
                console.log(index, value)
            });

            /*
            * jQuery 中的 map 方法遍历真数组
            * 注意:
            * jQuery 的 map 方法可以遍历伪数组
            */
            $.map(arr, function (value, index) {
                console.log(index, value)
            });

            //jQuery 的 map 方法遍历伪数组
            $.map($div, function (value, index) {
                console.log(value, index);
            })
        })
    </script>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>

既然jQuery的each方法和map方法都是遍历(伪)数组,那么这两者有什么区别呢?

还是以此为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态方法-map</title>
    <script
            src="https://code.jquery.com/jquery-1.12.4.js"
            integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
            crossorigin="anonymous">
    </script>
    <script>
        $(function () {
            $div = $("div");
            /*
            * 问:each 方法和 map 方法的区别?
            * 答:
            * 区别一:
            * map 方法返回的为一个空的数组; each 方法返回的是遍历的数组(遍历谁,返回谁)
            *
            * 区别二:
            * map 方法中可以添加 return 语句,可实现一些复杂的操作,而 each 则不支持返回值(即使添加了 return 语句,返回值仍然为遍历的数组)
            *
            * 区别三:
            * 回调函数中传入的参数顺序不同
            * */

            //jQuery 的 map 方法遍历伪数组
            var map = $.map($div, function (value, index) {
                console.log(value, index);
            });

            //jQuery 的 each 方法遍历伪数组
            var each = $.each($div, function (index, value) {
                console.log(value, index);
            });

            //查看两个方法的返回值
            console.log(map);
            console.log(each);
        })
    </script>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>

#前端 jQuery

支付宝

微信

静态方法-map

喜欢这篇文章？打赏一下作者吧

评论

最新文章

标签

分类

Your browser is out-of-date!