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>