jQuery学习一（foreach，each，map）

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(value, index) {
            console.log("序列：" + index + ",值：" + value);
           
 });
// obj.forEach(function(value, index) {
        //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对遍历的数组中进行处理，然后生成一个新的数组返回。