在之前我們需要去循環(huán)數(shù)組,通常使用的是for循環(huán),去循環(huán)數(shù)組的下標,而在ES6中提供了一種新的方式進行遍歷數(shù)組!在看這個之前我們先對比一下之前的遍歷方式!
let phone=['小米','三星','蘋果','一加','樂視','OPPO','VIVO','魅族','聯(lián)想'];
for(var i=0;i<=phone.length;i++){
console.log(phone[i])
}
forEach
我們可以使用ES6提供forEach進行循環(huán),forEach循環(huán)實例
let phone=['小米','三星','蘋果','一加','樂視','OPPO','VIVO','魅族','聯(lián)想'];
phone.forEach((item,index,arr)=>{
console.log(item+"手機真好用!"+arr)
})
運行結(jié)果
可以使用foreach進行循環(huán),然后再執(zhí)行一個函數(shù),函數(shù)的第一個參數(shù)是數(shù)組的每一項,第二個參數(shù)是數(shù)組的索引(index),第三表示改元素所在數(shù)組的全部數(shù)據(jù)(整個數(shù)組數(shù)據(jù))
map
除此之外ES6還提供一個數(shù)組遍歷的方式,map()這個map和上面的forEach有何區(qū)別呢?我們看一下代碼分析
let phone=['小米','三星','蘋果','一加','樂視','OPPO','VIVO','魅族','聯(lián)想'];
let newphone=phone.map((x)=>{
return x+'手機'
console.log(x)
})
console.log(phone,newphone)
運行結(jié)果
map方法和forEach有點類似,但是這個map方法三個參數(shù)和forEach一樣,但是map返回的數(shù)組不會替換掉原數(shù)組,可以使用新的變量名接收這個新生成的數(shù)組!
filter
ES6還有一個數(shù)組的篩選方法,可以根據(jù)數(shù)據(jù)中數(shù)據(jù)進行篩選!
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)
打印結(jié)果:
這個和forEach,map一樣可以接收三個參數(shù),和map一樣返回的數(shù)組不會替換原數(shù)組,可以使用新數(shù)組接收,在return 可以設(shè)置返回的條件!
看完上面三種數(shù)組ES6新方法,下面看一下這個小結(jié)吧,對比一下三者的異同!
小結(jié): forEach,map,filter都在對象內(nèi)接收一個函數(shù),這個函數(shù)都可以接收三個參數(shù),第一個表示數(shù)組的子項,第二個表示數(shù)組的索引(index),第三表示遍歷數(shù)組所在的數(shù)組全部數(shù)據(jù)!map,和filter return返回的新數(shù)組不會替換原數(shù)組,需要接收一個新變量存儲新的數(shù)組!而filter的return可以設(shè)置篩選條件用于數(shù)組數(shù)據(jù)的篩選!
