在之前我们需要去循环数组,通常使用的是for循环,去循环数组的下标,而在ES6中提供了一种新的方式进行遍历数组!在看这个之前我们先对比一下之前的遍历方式!
let phone=['小米','三星','苹果','一加','乐视','OPPO','VIVO','魅族','联想'];
for(var i=0;i<=phone.length;i++){
console.log(phone[i])
}
forEach
我们可以使用ES6提供forEach进行循环,forEach循环实例
let phone=['小米','三星','苹果','一加','乐视','OPPO','VIVO','魅族','联想'];
phone.forEach((item,index,arr)=>{
console.log(item+"手机真好用!"+arr)
})
运行结果
image
可以使用foreach进行循环,然后再执行一个函数,函数的第一个参数是数组的每一项,第二个参数是数组的索引(index),第三表示改元素所在数组的全部数据(整个数组数据)
map
除此之外ES6还提供一个数组遍历的方式,map()这个map和上面的forEach有何区别呢?我们看一下代码分析
let phone=['小米','三星','苹果','一加','乐视','OPPO','VIVO','魅族','联想'];
let newphone=phone.map((x)=>{
return x+'手机'
console.log(x)
})
console.log(phone,newphone)
运行结果
image
map方法和forEach有点类似,但是这个map方法三个参数和forEach一样,但是map返回的数组不会替换掉原数组,可以使用新的变量名接收这个新生成的数组!
filter
ES6还有一个数组的筛选方法,可以根据数据中数据进行筛选!
var result=[60,58,31,70,55,43,21,18,98,50,42,31,15,76,50,48,63,80,73,61];
let jige=result.filter((x)=>{
return x>=60;
})
console.log(jige)
打印结果:
image
这个和forEach,map一样可以接收三个参数,和map一样返回的数组不会替换原数组,可以使用新数组接收,在return 可以设置返回的条件!
看完上面三种数组ES6新方法,下面看一下这个小结吧,对比一下三者的异同!
小结: forEach,map,filter都在对象内接收一个函数,这个函数都可以接收三个参数,第一个表示数组的子项,第二个表示数组的索引(index),第三表示遍历数组所在的数组全部数据!map,和filter return返回的新数组不会替换原数组,需要接收一个新变量存储新的数组!而filter的return可以设置筛选条件用于数组数据的筛选!
原文地址：《ES6数组遍历之forEach,map和filter》