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对遍历的数组中进行处理,然后生成一个新的数组返回。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值