49--JS数组遍历

目录

• JavaScript遍历方式
  • 方式一:for循环遍历
  • 方式二:forEach遍历
  • 方式三:forEach新玩法
• jQuery中的$.each方法：
  • • 遍历一维数组
    • 遍历二维数组
    • $(selector).each()

JavaScript遍历方式

方式一:for循环遍历

普通的for循环遍历

var arr =[1,2,3,4,5];
for(var i =0;i<arr.length;i++){
    console.log(arr[i])
}

遍历结果:

1 2 3 4 5

方式二:forEach遍历

var arr =[1,2,3,4,5];
arr.forEach(function(value,index,arr){
// Array在ES5新增的方法中，参数都是function类型，默认有传参，forEach方法中的function回调支持3个参数，第1个value是遍历的数组内容；第2个index是对应的数组索引，第3个arr是数组本身  
    console.log(arr[index])
})

遍历结果:

1 2 3 4 5

或者直接输出

console.log(value)

方式三:forEach新玩法

var arr =[1,2,3,4,5];
arr.forEach(ele=>console.log(ele))//es6特性
//ele 表示数组中的任意元素,(ele这个名字可以随意起名)
// =>  箭头表达式:此箭头左侧为数组元素,表达式右侧是对数组元素的操作.

遍历结果:

1 2 3 4 5

jQuery中的$.each方法：

遍历一维数组

//该参数顺序与js中的foreach前两个相反
$.each([], function(index, value, array) {
  // ...
});

案例:

var arr =[1,2,3,4,5];
var sum =0;
$.each(arr,function(index,val,arr){
    sum+=val;
})
console.log(sum);

结果:

15

遍历二维数组

$(function () {
    $.each([["aa", "bb", "cc"], ["dd", "ee", "ff"], ["gg", "hh", "ii"]], function (index, item) {
         alert(index + "..." + item);
         //输出0...aa,bb,cc  1...dd,ee,ff  2...gg,hh,ii   
        //这时的index为数组下标,item相当于取这二维数组中的每一个数组
        //然后遍历每一个元素(每一个元素仍然是一个一维数组)
         $.each(item, function (index, item2) {
              alert(index + "....." + item2);
         });
    });    
 });

遍历结果:

//输出0...aa,bb,cc  0...aa 1...bb 2...cc  1...dd,ee,ff  0...dd 1...ee 2...ff  2...gg,hh,ii 0...gg 1...hh 2...ii

$(selector).each()

$("table tr").each(function(){
	var temp =$(this).find("td").eq(1).html();
})
//遍历每一行元素,并拿到第二列的值