ES6中数组新增的遍历方式

对于遍历，其实有很多，比如最常见的for循环、while循环、do while循环、还有jQuery中的$.each循环等等。

---

那么本篇所要介绍的就是在ES6中新增的一些循环遍历数组的方式。

这些方法分别是：forEach()    map()    filter()    some()    every()   find()    findIndex()

那么这些方法的共同之处是：

①都可以遍历数组。

②都有两个参数：第一个参数为回调函数。第二个参数不常用，可以改变this指向（默认this是window）

---

一、forEach（）

这个方式其实就是for循环的另一种形式。

eg：

var arr= ['a','b','c','d']
arr.forEach(function(val，index){

  console.log(val，index) //a 0,b 1,c 2,d 3

})

改变this指向为document：

var arr= ['a','b','c','d']
arr.forEach(function(val，index){

  console.log(val，index) //a 0,b 1,c 2,d 3
  console.log(this)// document

},document)

当然，我们改变this指向还可以用bind方式：

var arr= ['a','b','c','d']
arr.forEach(function(val，index){

  console.log(val，index) //a 0,b 1,c 2,d 3
  console.log(this)// 123

}.bind(123))

总而言之，这种方式我们用的并不多，主要了解forEach方式的遍历方法就可以了。

---

二、map（）

这个方式跟forEach的不同之处是什么呢？

该方法可以用来映射，做数据交互。听到这也许你有点不懂，那么请看下面的例子。
eg：

var arr= [{name:'xiaoyan',age:18},{name:'xiaowang',age:28},{name:'xiaodu',age:38}]
arr.map(function(item，index){
  console.log(item，index) //{name:'xiaoyan',age:18} 0,{name:'xiaowang',age:28} 1,c 2,{name:'xiaodu',age:38} 3
})

诶 看似跟forEach没有任何区别对吧。

没错，再没有return的情况下。map跟forEach的作用一样，用来遍历一个数组。

那么若有return呢？

let arr= [{name:'xiaoyan',age:18},{name:'xiaowang',age:28},{name:'xiaodu',age:38}]
let newArr = arr.map(function(item，index){
  let json = {}
json.n = `打${item.name}`;
json.a = item.age+2;
json.sex='男';
return json
})
cosnole.log(newArr)
//[{name:'打xiaoyan',age:20,sex:'男'},{name:'打xiaowang',age:30,sex:'男'},{name:'打xiaodu',age:40,sex:'男'}]

相信看到这里 大家都明白了

也就是map正常情况下会跟return结合使用，而map的作用就是重新整理数据结构。

有时候我们需要对后台传来的数据做一些处理，这时候使用map就可以得到想要的数据。

---

三、filter（） 

filter在vue里是过滤器的意思。单词本身也是过滤的意思。

那么 在这个方法中 他也是起到过滤的作用。

过滤一些不合格的”元素“，通常也是跟return使用，当回调函数返回 true 就留下来。

eg：

let arr = [1,2,3,4,5,6,7,8];
let newArr = arr.filter((item,index)=>{
    return item>4;
})
console.log(newArr)//[5,6,7,8]

通过上面的例子，大家应该很快的掌握了filter的方法使用。

它也是 return一个符合条件的方法，返回一个新的数组。

---

四、some（）

它更像是比对，查找有没有符合条件的数据，若有，则返回true。

eg:

let arr = ['xiaoyan','xiaowang','xiaodu'];
let a = arr.some((value,index)=>{
    return value == 'xiaoyan'
})
console.log(a)//true
let b = arr.some((value,index)=>{
    return value =='yan'
})
console.log(b);//false

那么作用显而易见：类似于indexOf 只要数组某个元素符合条件，则返回true。

---

五、every（）

该方法跟some有对立关系

 只要数组中有一个元素不符合条件 则返回false。

eg:

let arr = [1,3,5,7,9];
let a = arr.every((value,index)=>{
    return value%2==1
})
console.log(a)//true

let arr1 = [1,2,3,5,7,9]
let b = arr1.every((value,index)=>{
    return value%2==1
})
console.log(b);//false

六 find()    findIndex()

他跟some好像有点相似 只要找到第一个符合的 就返回该值 若没找到 则返回undefined

findIndex() 顾名思义 找到返回索引 找不到返回-1

let arr = [2,100,800,40,3333]
let res = arr.find((item,index)=>{
    return item>400
})
console.log(res)//800
let index = arr.findIndex((item,index)=>{
    return item>400
})
console.log(index)//2

 

下面讲几个跟上面不同的ES6新出的循环遍历方法

---

七、for ... of ...

这个方法跟for循环很相似

eg：

let arr = ['xiaoyan','xiaowang','xiaodu'];
for(let val of arr){
console.log(val);
//'xiaoyan' 'xiaowang' 'xiaodu'
}

那么如果想遍历索引或者索引跟数据一起呢？

首先知道两个方法: arr.keys() 数组下标    arr.entries() 数组某一项

let arr = ['xiaoyan','xiaowang','xiaodu'];
for(let index of arr.keys()){
console.log(index);
//0 1 2
}

for(let [key,val] of arr.entries()){
console.log(key,val);
//0 xiaoyan ，1 xiaowang ，2 xiaodu
}

---

八、 reduce（）  reduceRight（）

该方法其实主要可以计算数组的和或者阶承  而reductRight（）是从右向左开始运算

let arr = [2,2,3]; 
let res =  arr.reduce((prev,cur,index,arr)=>{
    return prev+cur
})
console.log(res)//7

//求阶乘
let arr = [2,2,3]
	let res1 =  arr.reduce((prev,cur,index,arr)=>{
    	return Math.pow(prev,cur)
	})
	console.log(res)//64
	let res1 =  arr.reduceRight((prev,cur,index,arr)=>{
    	return Math.pow(prev,cur)
	})
	console.log(res1)//81

 

那么几种es6新出的遍历数组的方法就讲完了。

其实上面除了forEach跟map以外，都不怎么用到，但是万一有一天在工作中会用到呢？

通过对比，我相信你已经很清楚的了解到了这几种方法的相同跟不同之处。

本次文章就先到这里吧，最近在钻研ES6，希望你也能通过本篇文章学到一些es6的知识。

转载请注明出处。

记得关注公众号 "我与前端的故事"。

谢谢观看！