jQuery学习一（foreach，each，map）

相关名词解释：

• $.each() 方法为每个匹配元素规定要运行的函数。
• $.map() 函数用于使用指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回。
• 伪数组：jQuery对象是一个伪数组，伪数组就是有0到length-1的属性，并且有length属性。

1.原生foreach方法和利用jquery的each静态方法的区别

var arr = [1, 3, 5, 7, 9];
var obj = {0: 1, 1: 3, 2: 5, 3: 7};
//foreach（）：
arr.forEach(function(index, value) {
console.log("序列：" + index + ",值：" + value);
});
// obj.forEach(function(index, value ) {
//console.log("序列：" + index + ",值：" + value);//会报错
// })
//利用jquery的each静态方法
$.each(arr, function(index, value) {
console.log("序列：" + index + ",值：" + value);
})
$.each(obj, function(index, value) {
console.log("小的" + index + ",大的：" + value);
})

从上面的结果看，可以知道：原生foreach方法只能遍历数组，不能遍历伪数组。而利用jquery的each静态方法就可以遍历数组和伪数组。

2.js原生map和利用jQuery的map静态方法的区别

一个map的实例如下：

//html中：
//
<div></div>
//
<p></p>
//
<span></span>
// 使用$.map() 修改一个数组的值
$(function() {
var arr = ["a", "b", "c", "d", "e"];
// a, b, c, d, e
$("div").text(arr.join(", "));
arr = $.map(arr, function(n, i) {
return (n.toUpperCase() + i);
});
// A0, B1, C2, D3, E4
$("p").text(arr.join(", "));
arr = $.map(arr, function(a) {
return a + a;
});
// A0A0, B1B1, C2C2, D3D3, E4E4
$("span").text(arr.join(", "));
})

$.map() 函数用于使用指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回。

var arr = [1, 3, 5, 7, 9];
var obj = {0: 1, 1: 3, 2: 5, 3: 7, 4:9,length: 5};
//利用原生的js的map方法遍历数组和伪数组
arr.map(function(value, index, array) {
console.log(index, value, array);
})
// obj.map(function(value,index,array){
//
console.log(index,value,arry);//会报错
// })
//jQuery中的map方法
$.map(arr, function(value, index) {
console.log(index, value);
})
$.map(obj, function(value, index) {
console.log(index, value);
})

可以看到，原生的map原生的foreach一样，不可以遍历伪数组。而在jQuery下的map静态方法就可以遍历数组以及伪数组。

3.利用jQuery的each静态方法和map静态方法的区别

var res1 = $.map(obj, function(value, index) {
console.log(index, value);
})
var res2 = $.each(obj, function(value, index) {
console.log(index, value);
})
console.log(res1);
console.log(res2);

上面的代码中最后两句打印的依次是：Array(0)，Object。所以第一个区别就是each静态方法默认的返回值是：遍历谁就返回谁。map静态方法默认的返回值是：一个空数组。

var res1 = $.map(obj, function(value, index) {
console.log(index, value);
// return value + index;//这样子是两个字符串的拼接
return parseInt(value) + parseInt(index);
})
var res2 = $.each(obj, function(value, index) {
console.log(index, value);
// return value + index;
return parseInt(value) + parseInt(index);
})
console.log(res1);
console.log(res2);

上面的代码中最后两句输出的结果依次是：[1, 4, 7, 10, 13]，{0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5}。可以看出第二个区别就是each静态方法不支持在回调函数中对遍历的数组中进行处理；map静态方法可以支持在回调函数中通过return对遍历的数组中进行处理，然后生成一个新的数组返回。

最后

以上就是痴情流沙为你收集整理的jQuery学习一（foreach，each，map）jQuery学习一（foreach，each，map）的全部内容，希望文章能够帮你解决jQuery学习一（foreach，each，map）jQuery学习一（foreach，each，map）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。