each,map,grep的区别

var arr = ["aa","bb","{name:apple}"];

1.each的使用

var a = $.each(arr,function(index,value){

　　console.log(this.toString()+"---->>");//结果为aa---->> //bb---->> //{name:apple}---->

})

console.log(a);//a的结果为aa,bb,{name:apple}

2.map的使用

var b = $.map(arr,function(value,index){

　　return value ="ff";//map中没有this

})

console.log(b);//b的结果为ff,ff,ff

3.grep的使用

var c = $.grep(arr,function(value,index){

　　//return value.indexOf("a")>=0//grep中没有this

　　return value="ff"

})

3.1 console.log(c);//c的结果为aa,{name:apple};

3.2 console.log(c);//c的结果为aa,bb,{name:apple};

总结：

1.回调函数的参数的顺序的不同，

　　1.1each是(i,v)

　　1.2map和grep是(v,i)

2.返回值得不同

　　2.1map是返回一个新的数组

　　2.2each和grep还是原来的，但是grep可以返回选取数组的子集

3.是否有当前迭代对象this

　　3.1each有

　　3.2map和grep没有

each()在数组中的每个元素都调用别的函数时很有用

map()在更改数组中的所有原始值时很有用

grep()在选取数组的子集时很有用

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <meta charset="utf-8" />
 7     <link rel="stylesheet" href="style/style.css">
 8     <script src="js/jquery-1.10.2.min.js"></script>
 9     <script>
10         $(function () {
11             var a = ["12", "23", "34"];
12             var b = ["12", "14", "23"];
13             var c = $("div");
14             var each1 = $.each(a, function () {
15                 var x = this//$(this)-->当前迭代对象(有this)
16                 console.log($(this) + "----each1");
17             })
18             var each2 = $.each(c, function () {
19                 var x = this//$(this)-->当前迭代对象(有this)
20                 console.log($(this) + "----each2");
21             })
22             //不能这么用
23             //var each3 = a.each(function () {
24             //})
25             var each4 = c.each(function () {
26                 var x = this//$(this)-->当前迭代对象(有this)
27                 console.log($(this) + "----each4");
28             })
29             var map1 = $.map(c, function () {
30                 var z = this //$(this)-->window  
31                 console.log($(this) + "--1--map1");
32             });
33             var map2 = $.map(a, function () {
34                 var z = this//$(this)-->window
35                 console.log($(this) + "--2--map2");
36             });
37             var map3 = a.map(function () {
38                 var x = this//$(this)-->window
39                 console.log($(this) + "--3-map3");
40             });
41             var map4 = c.map(function () {
42                 var x = this//$(this)-->当前迭代对象(有this)
43                 console.log($(this) + "--4--map4");
44             });
45             var grep1 = $.grep(a, function () {
46                 var c = this//$(this)-->window
47                 console.log($(this) + "----grep1");
48             })
49             var grep2 = $.grep(c, function () {
50                 var c = this//$(this)-->window
51                 console.log($(this) + "----grep2");
52             })
53             //不能这样使用
54             //var grep4 = c.grep(function () {
55             //})
56         })
57     </script>
58 </head>
59 <body>
60     <div class="border-box">1</div>
61     <div class="padding-box">2</div>
62     <div class="content-box">3</div>
63     <div class="solarLeft"> 4</div>
64 </body>
65 </html>