对于遍历,其实有很多,比如最常见的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的知识。
转载请注明出处。
记得关注公众号 "我与前端的故事"。
谢谢观看!