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()在选取数组的子集时很有用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style/style.css">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(function () {
var a = ["12", "23", "34"];
var b = ["12", "14", "23"];
var c = $("div");
var each1 = $.each(a, function () {
var x = this//$(this)-->当前迭代对象(有this)
console.log($(this) + "----each1");
})
var each2 = $.each(c, function () {
var x = this//$(this)-->当前迭代对象(有this)
console.log($(this) + "----each2");
})
//不能这么用
//var each3 = a.each(function () {
//})
var each4 = c.each(function () {
var x = this//$(this)-->当前迭代对象(有this)
console.log($(this) + "----each4");
})
var map1 = $.map(c, function () {
var z = this //$(this)-->window
console.log($(this) + "--1--map1");
});
var map2 = $.map(a, function () {
var z = this//$(this)-->window
console.log($(this) + "--2--map2");
});
var map3 = a.map(function () {
var x = this//$(this)-->window
console.log($(this) + "--3-map3");
});
var map4 = c.map(function () {
var x = this//$(this)-->当前迭代对象(有this)
console.log($(this) + "--4--map4");
});
var grep1 = $.grep(a, function () {
var c = this//$(this)-->window
console.log($(this) + "----grep1");
})
var grep2 = $.grep(c, function () {
var c = this//$(this)-->window
console.log($(this) + "----grep2");
})
//不能这样使用
//var grep4 = c.grep(function () {
//})
})
</script>
</head>
<body>
<div class="border-box">1</div>
<div class="padding-box">2</div>
<div class="content-box">3</div>
<div class="solarLeft"> 4</div>
</body>
</html>