jquery语法学习03（循环 each，map用法）-CFANZ编程社区

首先需要了解一个概念什么叫伪数组

正常的数组 var array=[1,3,4,5,6]; OK吧~ 没问题吧~

伪数组典型的栗子：function里的arguments 还有JQuery查询的返回参数都是伪数组

定义：伪数组的定义是从0 开始到 length-1 并有length 属性

比如

var arraylist= [1,3,5,6,7,9]; //数组

var arrayobj= {0:1,1:3,2:5,3:6,4:7,5:9,length:5}; //对象伪数组

好我们来说Each 和Map

1）each

//数组 
           var arraylist= [1,3,5,6,7,9];
        
            arraylist.forEach(function(value,index)
            {
              console.log(index, value);   
            })

            //伪数组
              var arrayobj= {0:1,1:3,2:5,3:6,4:7,5:9,length:5};

            arrayobj.forEach(function(value,index)
            {
              console.log(index, value);   //报错
            })

这段代码写了原生态的JS foreach 只能遍历数组但是伪数组就无能为力了直接报错

BUT：JQ可以呀看代码（输出结果一样）就是那么便利这样可以遍历各种$(‘#div’)获得的元素（这里提示一下JQ与JS的 function里的参数相反）；

//JQ的方法 可以遍历伪函数
            $.each(arraylist,function(index,value)
            {
                console.log(index, value);     
            })
            console.log('---------------');   
            $.each(arrayobj,function(index,value)
            {
                console.log(index, value);     
            })

2）map

这里的Map 就好玩了 Jq的Map 和JS的Map的区别 JS的会把数组也输出出来 JQ的不会（map和each一样可以遍历伪数组在JQ里）

arraylist.map(function(value,index,array)
             {
                console.log(value,index,array);
             })
             console.log('---------------');  
            $.map(arraylist,function(value,index)
             {
                console.log(index,value);
                
             })

那么这个JQ的Map 和each 是一样的那它们之间有什么区别那？重点来了看！返回值！

var  $returnNum1=  $.map(arraylist,function(value,index)
             {
                //console.log(index,value);
           
               
             })
             console.log($returnNum1);
             console.log('-------------');

             var  $returnNum2=  $.each(arraylist,function(value,index)
             {
               // console.log(index,value);
             
             })
             console.log($returnNum2);

Map的返回值是一个空数组Array(0) []

each的返回值是 Array(6) [1, 3, 5, 6, 7, 9]

那问题又来了这么看来是是each好啊都用each多好要map 干嘛？好我们换一个姿势

var  $returnNum1=  $.map(arraylist,function(value,index)
             {
                //console.log(index,value);
                return index+value;
               
             })
             console.log($returnNum1);
             console.log('-------------');

             var  $returnNum2=  $.each(arraylist,function(value,index)
             {
               // console.log(index,value);
                 return index+value;
             })
             console.log($returnNum2);

Map的返回值是一个空数组Array(6) [1, 4, 7, 9, 11, 14]

each的返回值是 Array(6) [1, 3, 5, 6, 7, 9]

哦吼~ map的返回值是 index 和value相加的结果而each 不会

这就是Map的好处可以循环对元素进行操作并返回结果！

这里提示一下关键字的重要性

// 我们用MAP 来遍历伪数组 看lenght 是5 那么 他返回就是5个参数
    //用上文的map返回结果 Array(5) [1, 4, 7, 9, 13]
    //each 返回结果是  Object {0: 1, 1: 3, 2: 5, 3: 6, 4: 9, 5: 10, length: 5}
    var arrayobj= {0:1,1:3,2:5,3:6,4:9,5:10,length:5};

    //如果length:6 
    //map的返回结果 Array(6) [1, 4, 7, 9, 13, 15] 
    //each的返回结果 Object {0: 1, 1: 3, 2: 5, 3: 6, 4: 9, 5: 10, length: 6}
    var arrayobj= {0:1,1:3,2:5,3:6,4:9,5:10,length:6};

    //如果length 换成 len
    //map的返回结果 Array(7) ["01", "13", "25", "36", "49", "510", "len6"]
    // each的返回结果 Object {0: 1, 1: 3, 2: 5, 3: 6, 4: 9, 5: 10, len: 6}
    var arrayobj= {0:1,1:3,2:5,3:6,4:9,5:10,len:6};

加油~