js数组遍历方法

一、循环遍历
for(var i = 0; i < arr.length; i++){

    arr 是要遍历的数组
    arr[i] 是遍历的数组的元素

i 是数组的元素对应的下标(索引号)

}

二、for of 方法
for(var item of arr) {

    item 遍历的数组的元素

}

三、forEach 遍历
arrObj.forEach(function(item,index,self){

    item 遍历出的每一个元素

    index 元素对应的下标

    self 数组本身

    无返回值

})

四、map 映射
arrObj.map(function(item,index,self){

    item 遍历出的每一个元素

    index 元素对应的下标

    self 数组本身

    有返回值  

    数组元素个数不变，但是按照一定的条件转换

})

五、filter 过滤
arrObj.filter(function(item,index,self){

    item 遍历出的每一个元素

    index 元素对应的下标

    self 数组本身

    有返回值 

    返回满足某个条件的元素构成的数组

})

六、reduce 高阶函数（迭代（累加器））
arrObj.reduce(function(total,item,index,self){

    total 初始值或计算结束后的返回值

    item 遍历出的每一个元素

    index 元素对应的下标

    self 数组本身

    有返回值 

    返回计算结束后的total值

},初始值);

七、every
arrObj.every(function(item,index,self){

    item 遍历出的每一个元素

    index 元素对应的下标

    self 数组本身

    有返回值 

    检测数组里的每一个值是否满足指定条件，如果有一个值不满足，返回false，剩余的值不再进行检测

    如果所有的值都满足，则返回true

});

八、some
arrObj.some(function(item,index,self){

    item 遍历出的每一个元素

    index 元素对应的下标

    self 数组本身

    有返回值 

    检测数组里的每一个值是否满足指定条件，如果有一个值满足，返回true，剩余的值不再进行检测

    如果所有的值都不满足，则返回false

});

find()方法返回第一个满足过滤方法的元素，一个都没有满足的就返回undefined，遇到一个满足的元素后遍历就停止了
这个方法支持的浏览器太少，慎用。

const arr = [{name:“Jim”,age:“20”},{name:“Lily”,age:“18”},{name:“Mei”,age:“18”},]
arr.find((item)=>{
return item.age == ‘18’
})
//{name:“Lily”,age:“18”}

map是操作js数组的方法，也可以说是一个函数，作用是遍历整个数组，对里面的每个值做处理再返回一个新的值。

map方法的结构及入参
map的入参需要传递一个函数进去，因为说它是可以遍历数组的，所以传入的这个函数调用的次数由数组的长度决定，长度是3就是3次，是4就是4次。

//index可以不传
[1, 2, 3].map(function (item, index) {
//这个数组长度是3所以函数调用3次
//item指的遍历到的对应的数组值 函数调用的三次中 第一次是1 ，然后是2、3
//index是数组的索引，三次分别是0，1，2
})
1
2
3
4
5
6
上面的例子意思就是map里面的函数运行了3次，分别是function(1,0)、function(2,1)、function(3,2)。

然后你可以做什么呢，可以在函数里面return（return的内容将作为新值代替数组遍历到的旧值item），比如将函数里面的值都变成原来的两倍：

let b = [1, 2, 3].map(function (item, index) {
return item * 2
})
console.log(b)//[2,4,6]
1
2
3
4
语法糖
es6给我们提供了一些便利，比如箭头函数()=>{}
我们可以用箭头函数替代原来的函数：

let b = [1, 2, 3].map((item, index) => {
return item * 2
})
console.log(b)//[2,4,6]
1
2
3
4
用箭头函数有什么好处呢？好处是，如果里面不用进行复杂的判断，我们可以将右边的{}改成表达式直接返回，省略return：

let b = [1, 2, 3].map((item, index) => item * 2 )
console.log(b)//[2,4,6]
1
2
我们这里例子里面函数第二个入参index索引值没用到，所以我们可以不传，当入参只有一个时，前面的括号（）都可以省略。

let b = [1, 2, 3].map( item => item * 2 )
console.log(b)//[2,4,6]
1
2
语法糖会让你的代码看起来更加高级优雅。

还有，有时候你可能不想改变所有的值，比如我只想改变小于2的数字，其他的不变，那就进行判断不满足条件的把item原路返回：

let b = [1, 2, 3].map(item => {
if (item < 2) {
return item * 2
} else {
return item
}
})
console.log(b)//[2,2,3]
1
2
3
4
5
6
7
8
当然你可以改成用三目运算。

let b = [1, 2, 3].map(item=>{
//返回，当item<2的时候返回item*2否则返回item
return item < 2 ? item * 2 : item
})
console.log(b)//[2,2,3]
1
2
3
4
5
然后你又发现，它只有一个return，可以用语法糖。

let b = [1, 2, 3].map(item => item < 2 ? item * 2 : item)
console.log(b)//[2,2,3]
1
2
map一般不改变原数组
除非是嵌套了对象或者数组的数组你直接修改了内部的引用地址，一般数组使用map是不会改变原数组的，你得找人接收。

let a = [1, 2, 3]
let b = a.map(item => item < 2 ? item * 2 : item)
console.log(a)//[1,2,3]
console.log(b)//[2,2,3]
1
2
3
4
filter
相信你看完map已经对这种数组遍历形式有了一个概念，接下来介绍filter，它用于遍历，筛选掉你不需要的值，保留需要的。

说明
filter与map的区别就是：

map的入参函数中的return的内容将作为新值代替数组遍历到的旧值item。

而filter的的入参函数中的return负责返回true或false，当return为true时当前遍历到的item将保留，如果为false，代表不符合要求将被筛选掉。

map和filter相同点是都返回一个新数组。

例子
比如一个数组中，我只需要小于3的内容。

let a = [1, 2, 3]
let b = a.filter((item, index) => {
if (item < 3) {
return true
} else {
return false
}
})
console.log(b) // [1,2]
1
2
3
4
5
6
7
8
9
然后聪明的你会发现item<3为true时返回true，为false时返回false，那我们只需要返回条件即可。

let a = [1, 2, 3]
let b = a.filter((item, index) => {
return item < 3
})
console.log(b) // [1,2]
1
2
3
4
5
只有一个返回值，所以？我们去掉{}和return，同时index没用到也可以去掉。

let a = [1, 2, 3]
let b = a.filter(item => item < 3)
console.log(b) // [1,2]
1
2
3
find 和 findIndex
很好，你已经掌握了map和filter，接下来我们势如破竹。

说明
find和findIndex它们也是筛选，与filter一样需要在入参函数里返回ture和false。

与filter不一样的是，它们只筛选出我们需要的第一个值，用于在一个数组找到我们需要的内容，而且find和findIndex不返回新数组。

find会返回找到对应的元素。

findIndex会返回找到对应的元素下标。

例子
比如我们需要找到数组中第一个大于1的元素的内容与下标。

let a = [1, 2, 3]
let item = a.find(item => item > 1) //返回第一个大于1的元素，就是遍历到2的时候
let itemIndex = a.findIndex(item => item > 1) //返回第一个大于1的元素的下标，就是遍历到2的时候，此时下标为1
console.log(item, itemIndex) // 2 1