你必须知道的JQuery

最新推荐文章于 2024-03-09 11:41:00 发布

Jlins

最新推荐文章于 2024-03-09 11:41:00 发布

阅读量1.1k

点赞数

Jquery循环map与each

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title ></title>
    <script src="Js/jquery-1.5.1.js" type="text/javascript"></ script>
    <script type="text/javascript">
        $( function () {
            var arr = [3, 5, 9];
            //-----------$.map(array,fn):用来将一个数组，转成另一个数组。
            var arr2 = $.map(arr, function (item) { return item * 2; });
            var arr3 = MyMap(arr, function (item) { return item * 2; }); //联想C#委托的例子。函数式编程。
            for (var i = 0; i < arr8.length; i++) {
                alert(arr2[i]); //6 10 18
                alert(arr3[i]); //6 10 18
                alert(arr8[i]);
            }
            function MyMap(arr, func) {//func这个函数就叫回调函数 回调函数：自己定义，系统调用。
                var newArr = new Array(arr.length);
                for (var i = 0; i < arr.length; i++) {
                    newArr[i] = func(arr[i]);
                }
                return newArr;
            }
            //-----------$.each(array,fn)对数组arry每个元素调用fn函数进行处理，没有返回值。
            var arr4 = MyEach2(arr, function (index) { alert(index) }); //结果为 0 1 2 如果只传递一个参数 则打印结果为下标
            var arr5 = $.each(arr, function (index, item) { alert(index + ":" + item) });//结果为 0:3 1:5 2:9
            //推测实现如下
            var arr6 = MyEach(arr, function (index, item) { alert(index + ":" + item) }); //实现与arr8结果相同
            function MyEach(arr, func) {
                for (var i = 0; i < arr.length; i++) {
                    func(i, arr[i]); //Each中的回调函数可以传递两个参数 前者是下标 后者是值
                }
            }

            var json = { "id" : "1", "name": "wang" };
            var arrjson = [{ "id" : "1", "name": "wang" },
                { "id": "2" , "name": "hao" }
            ];
            //------------$.map不能处理json格式对象的数组。
            var arr7 = $.map(arrjson, function (item) { return item.id }); //map访问json数组确实实现了值的改变 但是访问json对象呢
            var arr8 = $.map(json, function (item) { alert(item); return item });//最终什么都没有alert 因为json没有length属性 而map方法内部遍历的时候用的就是for
            //而each能访问json对象 得到key value 说明each内部方法使用的是for in 进行的遍历 修改MyEach方法为MyEach2
            function MyEach2(arr, func) {
                for (var key in arr) {
                    func(key, arr[key]);
                    func.call(arr[key], key, arr[key]); //第一个参数指定匿名函数的作用域 可以修改为window等  Jquery中默认的each就是这么实现的
                }
            }
            var arr9 = MyEach2(json, function (index, item) { alert(index + ":" + item) });
            //----------在回调函数中的this会是谁？？？
            //var arr10 = MyEach2(arr, function (index) { alert(index + "this:" + this) }); //this显示为domWindow 
            //var arr11 = $.each(arr, function (index) { alert(index + "this:" + this) }); //而使用$.each时 this为结果为item的值 3 5 9？？？为什么呢？ 
            //改变函数作用域？！纳尼  即 系统$.each中真正实现函数时  使用了call 方法来改变函数的作用域func.call(arr[key], key, arr[key]);
            //var arr12 = $.each(arr, function (item) { alert(item); }); //Each没有返回值 如果只有一个参数 那就是下标 0 1 2
        });
       
        //总体说来jquery中的map方法适用于数组  each方法适用于dictionary
    </script >
</head>
<body>
</body>
</html>