html遍历商品数组,数组的遍历 · beneon/html-css-javascript-the-basic-things Wiki · GitHub

数组的遍历是经常要用到的功能

var arr = [1,2,3,4,5,6]

//下面四行:代码1

arr.forEach(function(e,i,a){

console.log("e:"+e + ",i:" + i);

console.log(a);

})

//下面7行：代码2

for(var i=0;i

iterate(arr[i],i,arr)

}

function iterate(e,i,a){

console.log("e:"+e + ",i:" + i);

console.log(a);

}

代码1和代码2做的是一样的东西。

一行一行的看一下上面的代码，首先var arr = [1,2,3,4,5,6] 新建了一个数组。数组自身有很多的方法，forEach, map, filter是其中的三个负责遍历数组的方法。

forEach()

arr.forEach(function(e,i,a){})

这一行程序实际上是两个东西的组合：arr.forEach()和function(e,i,a){},如果写成循环的形式就是下面这样：

arr = [1,2,3,4,5,6]

for(var i=0;i

iterate(arr[i],i,arr)

}

function iterate(e,i,a){

//对e，i，a做各种操作

}

以前我们写过输出数组所有元素的程序：

var arr = 某个数组

for(var i=0;i

console.log(arr[i])

}

和上面的程序有一定的相似之处，比较一下有助于理解。

forEach在javascript文档里面的定义是：

The forEach() method executes a provided function once for each array element.

也就是说它会将数组里面的每一个元素都作为参数把括号里面的函数运行一次，上面的程序可以改写成这样：

var arr = 某个数组

for(var i=0;i

console.log(arr[i])

}

//上面的可以改写成下面这样

arr.forEach(function(e){console.log(e)})

map()

加入现在我要给数组里面的每个元素加上10，也就是把[1,2,3]变成[11,12,13]

var arr = [1,2,3]

arr = arr.map(function(e,i,a){

return e+10

//在forEach使用的function里面，return值是不重要的，毕竟返回了也不会被用上。但是map所使用的函数一定要有return才好

}

如果用以前的for循环可以这么写

var arr = [1,2,3]

for(var i=0;i

arr[i]=arr[i]+10

}

相比起来map会简洁的多。

filter()

和前面的map，forEach一样，filter的括号里面也使用函数作为参数。

现在回头看一下下面的代码

var a = [1,2,3]

console.log(a)

function iterate(e,i,a){

//某些程序

}

a.forEach(iterate)

a = a.map(iterate)

在console.log里面，数组a作为参数被交给log方法进行输出，这也是我们一直以来熟悉的，把一个值，或者一个对象交给一个函数或者方法进行处理。但是在forEach，map或者filter里面，另外一个函数被当做参数交给前面的forEach，map，filter

说回filter。filter会把数组所有的元素交给括号里面的函数参数，这个函数根据传过来的东西做出判断，如果返回true那么就留下这个元素，如果返回false就不保留这个元素。但是，和其他遍历方法一样，原来的数组是不会被改变的(如果你只对e进行操作的话)

//选取大于2的全部元素

var a = [1,5,0,-1,10]

var aFiltered = a.filter(biggerThanTwo)

function biggerThanTwo(e){

return e>2

}

console.log(aFiltered)

console.log(a)