摘要：還有一個(gè)就是，我本身在數(shù)組的遍歷上，基本都是用循環(huán)進(jìn)行操作，在開始使用了迭代方法之后，我循環(huán)用的很少。對(duì)數(shù)組中每一項(xiàng)運(yùn)行給定函數(shù)。返回該函數(shù)會(huì)返回的項(xiàng)組成的數(shù)組。

數(shù)組的迭代方法，這個(gè)想必大家都不陌生了，可能剛?cè)腴T的人暫時(shí)還沒接觸到這個(gè)。但是以后的開發(fā)中，肯定會(huì)用得上的。我自身的一個(gè)使用經(jīng)歷就是，如果迭代方法用的適當(dāng)，不但可以減少代碼量，也能使代碼可讀性更強(qiáng)，性能上的優(yōu)化也是肯定的了。還有一個(gè)就是，我本身在數(shù)組的遍歷上，基本都是用for循環(huán)進(jìn)行操作，在開始使用了迭代方法之后，我for循環(huán)用的很少。如果以后我更加熟練迭代方法的話，for使用會(huì)更少，也希望這樣能幫助大家學(xué)習(xí)迭代方法。

map():對(duì)數(shù)組中每一項(xiàng)運(yùn)行給定函數(shù)。返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組。
map就是我用的最多的一個(gè)了。首頁(yè)設(shè)想以下一個(gè)場(chǎng)景，給出一個(gè)數(shù)組，需求就是給數(shù)組的每一項(xiàng)都*2。
for方式

let arr=[1,2,3,4,5,6];
for(let i=0,len=arr.length;i
map方式
/*item為當(dāng)前遍歷到的項(xiàng),和arr[i]一樣*/
arr=arr.map(function(item){return item*2});
es6寫法
arr=arr.map(item=>{return item*2});
//或者
arr=arr.map(item=>item*2);
這個(gè)需求比較簡(jiǎn)單，可能看不出多實(shí)用，下面再看一下，給一個(gè)對(duì)象數(shù)組，比如：數(shù)組包含一些運(yùn)動(dòng)員的信息，記錄著運(yùn)動(dòng)員的姓名和是否簽到的信息，如果哪個(gè)球員的簽到信息isHell為空，就把isHell的值設(shè)置為"--"
//name:姓名，isHell：是否簽到

var sporter=[{
    name:"aa",
    isHell:null
},{
    name:"bb",
    isHell:null
},{
    name:"bb",
    isHell:true
}];
for方式
for(var i=0,len=sporter.length;i
map方式
/*item為當(dāng)前遍歷到的項(xiàng),和arr[i]一樣*/
sporter.map(function (item) {
    if(!item.isHell){item.isHell="--";}
});
es6寫法
sporter.map(item=> {
    if(!item.isHell){item.isHell="--";}
});
運(yùn)行一下，目的達(dá)到了

map還有一個(gè)較常用的場(chǎng)景，也用上面那個(gè)數(shù)組，但是現(xiàn)在需要每一個(gè)球員的名字，不管他是否有簽到。
for方式
var arr=[];
for(var i=0,len=sporter.length;i
map方式
/*item為當(dāng)前遍歷到的項(xiàng),和arr[i]一樣*/
var arr=sporter.map(function (item){return item.name})
es6寫法
sporter.map(item=> {return item.name;});
//或者
sporter.map(item=>item.name);
運(yùn)行結(jié)果

2.Filter
filter():對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)。返回該函數(shù)會(huì)返回true的項(xiàng)組成的數(shù)組。
Filter的用法也是很多，還是用上面的數(shù)組，但是我現(xiàn)在要拿到已經(jīng)簽到了的球員，不要沒簽到的球員。
for方式
var arr=[];
for(var i=0,len=sporter.length;i
filter方式
/*item為當(dāng)前遍歷到的項(xiàng),和arr[i]一樣*/
var arr=sporter.filter(function (item){return item.isHell})
es6寫法
var arr=sporter.filter(item=>{return item.isHell})
//或者
var arr=sporter.filter(item=>item.isHell)
運(yùn)行一下

數(shù)組去重
for方式
var r=[],arr = ["apple", "strawberry", "banana", "pear", "apple", "orange", "orange", "strawberry"];
for(var i=0,len=arr.length;i
filter方式
/*item為當(dāng)前遍歷到的項(xiàng),和arr[i]一樣，index為當(dāng)前遍歷到的項(xiàng)的索引，和i一樣，self就是當(dāng)前數(shù)組，和arr一樣*/
r=arr.filter(function(item,index,self){
    return self.indexOf(item) == index;
});

es6寫法
var arr=sporter.filter((item,index,self)=>{return self.indexOf(item) == index;})
運(yùn)行一下

3.Every和Some
Every和Some為什么要一起寫呢，因?yàn)檫@兩個(gè)方法很像。
every()對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，如果該函數(shù)對(duì)每一項(xiàng)都返回true，則返回true ;
some()對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，如果該函數(shù)對(duì)任一項(xiàng)返回true，則返回true;
還是上面那個(gè)sporter數(shù)組。可以設(shè)想這個(gè)場(chǎng)景，運(yùn)動(dòng)員進(jìn)場(chǎng)如果需要每一個(gè)球員都必須簽到，球隊(duì)才能進(jìn)場(chǎng)，實(shí)現(xiàn)這個(gè)需求就是
for方式
var isIn;
for(var i=0,len=sporter.length;i
every方式
/*item為當(dāng)前遍歷到的項(xiàng),和sporter[i]一樣*/
var arr=sporter.every(function (item){return item.isHell})
es6寫法
var arr=sporter.every(item=>{return item.isHell})
//或者
var arr=sporter.every(item=>item.isHell)
運(yùn)行一下，由于上面數(shù)組還有兩個(gè)運(yùn)動(dòng)員沒簽到，所以返回false,暫時(shí)也不能進(jìn)場(chǎng)

另一個(gè)場(chǎng)景，運(yùn)動(dòng)員進(jìn)場(chǎng)只需要球隊(duì)任意一個(gè)運(yùn)動(dòng)員簽到，球隊(duì)就能進(jìn)場(chǎng)，實(shí)現(xiàn)這個(gè)需求就是
for方式
var isIn;
for(var i=0,len=sporter.length;i
some方式
/*item為當(dāng)前遍歷到的項(xiàng),和sporter[i]一樣*/
var arr=sporter.some(function (item){return item.isHell})
es6寫法
var arr=sporter.some(item=>{return item.isHell})

運(yùn)行一下，由于上面數(shù)組有個(gè)運(yùn)動(dòng)員簽到了，所以返回true,可以進(jìn)場(chǎng)

4.Foreach
forEach()對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，這個(gè)方法沒有返回值 ;簡(jiǎn)單點(diǎn)來說，本質(zhì)上跟for沒有區(qū)別，只是寫法不一樣。
還是上面那個(gè)sporter數(shù)組。只是給每一個(gè)數(shù)字都加上一個(gè)屬性sex,值都為‘男’
for方式
for(var i=0,len=sporter.length;i
forEach方式
/*item為當(dāng)前遍歷到的項(xiàng),和arr[i]一樣*/
var arr=sporter.forEach(function (item){item.sex="男"})
es6寫法
var arr=sporter.forEach(item=>{item.sex="男"})

運(yùn)行一下

5.Reduce
reduce()每次只能接受兩個(gè)參數(shù)，我對(duì)著兩個(gè)參數(shù)的理解就是，當(dāng)前結(jié)果，和當(dāng)前序列的下一項(xiàng)。作用效果和原理就是[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)。
這個(gè)方法一般用在累計(jì)累加上，實(shí)用技巧暫時(shí)還沒發(fā)現(xiàn)。比如，數(shù)字?jǐn)?shù)組求和，字符串?dāng)?shù)組連接上。
數(shù)字?jǐn)?shù)組求和
for方式
var sum=0,arr=[1,2,3,4,5,6];
for(var i=0,len=arr.length;i
forEach方式
/*item為當(dāng)前遍歷到的項(xiàng),和arr[i]一樣*/
sum=arr.reduce(function (a,b) {return a+b});
es6寫法
sum=arr.reduce((a,b)=>{return a+b});

運(yùn)行一下

字符串?dāng)?shù)組連接，同樣的寫法，只是數(shù)組和結(jié)果不一樣
 var arr=["字","符","串","數(shù)","組","連","接"];
 var sum=arr.reduce((a,b)=>{return a+b});


6.find和findIndex
find：方法返回傳入一個(gè)測(cè)試條件（函數(shù)）符合條件的數(shù)組第一個(gè)元素。
findIndex：方法返回傳入一個(gè)測(cè)試條件（函數(shù)）符合條件的數(shù)組第一個(gè)元素位置。
當(dāng)數(shù)組中的元素在測(cè)試條件時(shí)返回true時(shí), find和findIndex返回符合條件的元素或者元素的索引位置，之后的值不會(huì)再調(diào)用執(zhí)行函數(shù)。如果沒有符合條件的元素返回 -1。
比如有一個(gè)需求，從[11,22,33,44,55,66]這個(gè)數(shù)組里面，找出第一個(gè)大于30的元素。
for方式
var getItem,arr=[11,22,33,44,55,66];
for(var i=0,len=arr.length;i30){
        getItem=arr[i];
        break;
    }
}
find
arr.find(function(val){return val>30})
es6寫法
arr.find(val=>val>30)

運(yùn)行一下

比如有一個(gè)需求，從[11,22,33,44,55,66]這個(gè)數(shù)組里面，找出第一個(gè)大于30的元素的位置。
for方式
var getItemIndex,arr=[11,22,33,44,55,66];
for(var i=0,len=arr.length;i30){
        getItemIndex=i;
        break;
    }
}
findIndex
arr.findIndex(function(val){return val>30})

es6寫法
arr.findIndex(val=>val>30)

運(yùn)行一下

后續(xù)
今天的分享就到這里了，關(guān)于數(shù)組的迭代方法的使用技巧，上面說的是冰山一角，更多也是要靠大家自己去挖掘。以后如果又有發(fā)現(xiàn)什么好玩的，實(shí)用的，也會(huì)第一時(shí)間分享給大家。另外，如果覺得這篇文章哪里寫錯(cuò)了，或者哪里寫得不好，歡迎指出。