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 可以设置返回的条件。

对比一下三者的异同：

小结：

forEach,map,filter都在对象内接收一个函数,这个函数都可以接收三个参数

• 第一个表示数组的子项
• 第二个表示数组的索引(index)
• 第三表示遍历数组所在的数组全部数据

map 和 filter ，return返回的新数组不会替换原数组，需要接收一个新变量存储新的数组。而 filter 的 return 可以设置筛选条件用于数组数据的筛选。