ES6数组遍历之forEach,map和filter

在之前我们需要去循环数组,通常使用的是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)
			
			})

运行结果

可以使用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)

运行结果

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)

    打印结果:

这个和forEach,map一样可以接收三个参数,和map一样返回的数组不会替换原数组,可以使用新数组接收,在return 可以设置返回的条件!

看完上面三种数组ES6新方法,下面看一下这个小结吧,对比一下三者的异同!

小结: forEach,map,filter都在对象内接收一个函数,这个函数都可以接收三个参数,第一个表示数组的子项,第二个表示数组的索引(index),第三表示遍历数组所在的数组全部数据!map,和filterreturn返回的新数组不会替换原数组,需要接收一个新变量存储新的数组!而filter的return可以设置筛选条件用于数组数据的筛选!