在之前我們需要去循環(huán)數組,通常使用的是for循環(huán),去循環(huán)數組的下標,而在ES6中提供了一種新的方式進行遍歷數組!在看這個之前我們先對比一下之前的遍歷方式!

let phone=['小米','三星','蘋果','一加','樂視','OPPO','VIVO','魅族','聯想'];
for(var i=0;i<=phone.length;i++){
    console.log(phone[i])
}

forEach

我們可以使用ES6提供forEach進行循環(huán),forEach循環(huán)實例

let phone=['小米','三星','蘋果','一加','樂視','OPPO','VIVO','魅族','聯想'];
phone.forEach((item,index,arr)=>{
    console.log(item+"手機真好用!"+arr)
})

運行結果

image

可以使用foreach進行循環(huán),然后再執(zhí)行一個函數,函數的第一個參數是數組的每一項,第二個參數是數組的索引(index),第三表示改元素所在數組的全部數據(整個數組數據)

map

除此之外ES6還提供一個數組遍歷的方式,map()這個map和上面的forEach有何區(qū)別呢?我們看一下代碼分析

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》