js常用的遍历方法

js原生用法
数组类型

each(_array, function(i, v){
 console.log(i + ': ' + v);
});

输出如下:

image

对象类型

var object = {a:1, b:2, c:3} 
each(object, function(i, v){ console.log(i + ': ' + v); });

输出如下:

image

类数组类型

var ele = document.querySelectorAll('div');
each(ele, function(i, v){
 console.log(i + ': ' + v);
});

输出如下:

image

jQuery中$.each()方法的使用

$.each()是对数组，json和dom结构等的遍历，说一下他的使用方法吧。

1、遍历一维数组

 $.each(arr1,function(i,val){ //两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值
 console.log(i+'```````'+val) })

输出的结果为：

0```````aa

1```````bb

2```````cc

3```````dd
2 处理json

 $.each(json1,function(key,value){  //遍历键值对
            console.log(key+'````'+value);
  })```
输出的结果为：

key1````a
key2````b
key3````c

3 处理dom元素

<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
<input name="ddd" type="hidden" value="444"/>

$.each($('input:hidden'),function(i,val){
            console.log(i+'````'+val);
            /*0````[object HTMLInputElement]
            1````[object HTMLInputElement]
            2````[object HTMLInputElement]
            3````[object HTMLInputElement]*/
            console.log(val.name+'`````'+val.value);
           /* aaa`````111
           bbb`````222
            ccc`````333
           ddd`````444*/
        })

jQuery中还有另外一种写法来遍历元素

$("input:hidden").each(function(i,val){  //第一个参数表示索引下标，第二个参数表示当前索引元素
    alert(i);
    alert(val.name);
    alert(val.value);       
});