前言
陣列的迭代方法，這個想必大家都不陌生了，可能剛入門的人暫時還沒接觸到這個。但是以後的開發中，肯定會用得上的。我自身的一個使用經歷就是，如果迭代方法用的適當，不但可以減少程式碼量，也能使程式碼可讀性更強，效能上的優化也是肯定的了。還有一個就是，我本身在陣列的遍歷上，基本都是用for迴圈進行操作，在開始使用了迭代方法之後，我for迴圈用的很少。如果以後我更加熟練迭代方法的話，for使用會更少，也希望這樣能幫助大家學習迭代方法。
1.Map
map():對陣列中每一項執行給定函式。返回每次函式呼叫的結果組成的陣列。
map就是我用的最多的一個了。首頁設想以下一個場景，給出一個陣列，需求就是給陣列的每一項都*2。
for方式
let arr=[1,2,3,4,5,6];
for(let i=0,len=arr.length;i<len;i++){
arr[i]=arr[i]*2
}
複製程式碼map方式
/*item為當前遍歷到的項,和arr[i]一樣*/
arr=arr.map(function(item){return item*2});複製程式碼es6寫法
arr=arr.map(item=>{return item*2});
//或者
arr=arr.map(item=>item*2);複製程式碼這個需求比較簡單，可能看不出多實用，下面再看一下，給一個物件陣列，比如：陣列包含一些運動員的資訊，記錄著運動員的姓名和是否簽到的資訊，如果哪個球員的簽到資訊isHell為空，就把isHell的值設定為'--'
//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<len;i++){
if(!sporter[i].isHell){sporter[i].isHell='--';}
}複製程式碼map方式
/*item為當前遍歷到的項,和arr[i]一樣*/
sporter.map(function (item) {
if(!item.isHell){item.isHell='--';}
});複製程式碼es6寫法
sporter.map(item=> {
if(!item.isHell){item.isHell='--';}
});複製程式碼執行一下，目的達到了
map還有一個較常用的場景，也用上面那個陣列，但是現在需要每一個球員的名字，不管他是否有簽到。
for方式
var arr=[];
for(var i=0,len=sporter.length;i<len;i++){
arr.push(sporter[i].name);
}複製程式碼map方式
/*item為當前遍歷到的項,和arr[i]一樣*/
var arr=sporter.map(function (item){return item.name})複製程式碼es6寫法
sporter.map(item=> {return item.name;});
//或者
sporter.map(item=>item.name);複製程式碼執行結果
2.Filter
filter():對陣列中的每一項執行給定函式。返回該函式會返回true的項組成的陣列。
Filter的用法也是很多，還是用上面的陣列，但是我現在要拿到已經簽到了的球員，不要沒簽到的球員。
for方式
var arr=[];
for(var i=0,len=sporter.length;i<len;i++){
if(sporter[i].isHell){
arr.push(sporter[i]);
}
}複製程式碼filter方式
/*item為當前遍歷到的項,和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)複製程式碼執行一下
陣列去重
for方式
var r=[],arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
for(var i=0,len=arr.length;i<len;i++){
if(r.indexOf(arr[i])===-1){
r.push(arr[i]);
}
}複製程式碼filter方式
/*item為當前遍歷到的項,和arr[i]一樣，index為當前遍歷到的項的索引，和i一樣，self就是當前陣列，和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;})複製程式碼執行一下
3.Every和Some
Every和Some為什麼要一起寫呢，因為這兩個方法很像。every()對陣列中的每一項執行給定函式，如果該函式對每一項都返回true，則返回true ;some()對陣列中的每一項執行給定函式，如果該函式對任一項返回true，則返回true;
還是上面那個sporter陣列。可以設想這個場景，運動員進場如果需要每一個球員都必須簽到，球隊才能進場，實現這個需求就是
for方式
var isIn;
for(var i=0,len=sporter.length;i<len;i++){
if(!sporter[i].isHell){
isIn=false;
break;
}
}複製程式碼every方式
/*item為當前遍歷到的項,和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)複製程式碼執行一下，由於上面陣列還有兩個運動員沒簽到，所以返回false,暫時也不能進場
另一個場景，運動員進場只需要球隊任意一個運動員簽到，球隊就能進場，實現這個需求就是
for方式
var isIn;
for(var i=0,len=sporter.length;i<len;i++){
if(!sporter[i].isHell){
isIn=true;
break;
}
}複製程式碼some方式
/*item為當前遍歷到的項,和sporter[i]一樣*/
var arr=sporter.some(function (item){return item.isHell})複製程式碼es6寫法
var arr=sporter.some(item=>{return item.isHell})
複製程式碼執行一下，由於上面陣列有個運動員簽到了，所以返回true,可以進場
4.Foreach
forEach()對陣列中的每一項執行給定函式，這個方法沒有返回值 ;簡單點來說，本質上跟for沒有區別，只是寫法不一樣。
還是上面那個sporter陣列。只是給每一個數字都加上一個屬性sex,值都為‘男’
for方式
for(var i=0,len=sporter.length;i<len;i++){
sporter[i].sex='男'
}複製程式碼forEach方式
/*item為當前遍歷到的項,和arr[i]一樣*/
var arr=sporter.forEach(function (item){item.sex='男'})複製程式碼es6寫法
var arr=sporter.forEach(item=>{item.sex='男'})
複製程式碼執行一下
5.Reduce
reduce()每次只能接受兩個引數，我對著兩個引數的理解就是，當前結果，和當前序列的下一項。作用效果和原理就是[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)。
這個方法一般用在累計累加上，實用技巧暫時還沒發現。比如，數字陣列求和，字串陣列連線上。
數字陣列求和
for方式
var sum=0,arr=[1,2,3,4,5,6];
for(var i=0,len=arr.length;i<len;i++){
sum+=arr[i]
}複製程式碼forEach方式
/*item為當前遍歷到的項,和arr[i]一樣*/
sum=arr.reduce(function (a,b) {return a+b});複製程式碼es6寫法
sum=arr.reduce((a,b)=>{return a+b});
複製程式碼執行一下
字串陣列連線，同樣的寫法，只是陣列和結果不一樣
var arr=['字','符','串','數','組','連','接'];
var sum=arr.reduce((a,b)=>{return a+b});
複製程式碼6.find和findIndex
find：方法返回傳入一個測試條件（函式）符合條件的陣列第一個元素。
findIndex：方法返回傳入一個測試條件（函式）符合條件的陣列第一個元素位置。
當陣列中的元素在測試條件時返回true時, find和findIndex返回符合條件的元素或者元素的索引位置，之後的值不會再呼叫執行函式。如果沒有符合條件的元素返回 -1。
比如有一個需求，從[11,22,33,44,55,66]這個陣列裡面，找出第一個大於30的元素。
for方式
var getItem,arr=[11,22,33,44,55,66];
for(var i=0,len=arr.length;i<len;i++){
if(arr[i]>30){
getItem=arr[i];
break;
}
}複製程式碼find
arr.find(function(val){return val>30})複製程式碼es6寫法
arr.find(val=>val>30)複製程式碼執行一下
比如有一個需求，從[11,22,33,44,55,66]這個陣列裡面，找出第一個大於30的元素的位置。
for方式
var getItemIndex,arr=[11,22,33,44,55,66];
for(var i=0,len=arr.length;i<len;i++){
if(arr[i]>30){
getItemIndex=i;
break;
}
}複製程式碼findIndex
arr.findIndex(function(val){return val>30})複製程式碼es6寫法
arr.findIndex(val=>val>30)複製程式碼執行一下
後續
今天的分享就到這裡了，關於陣列的迭代方法的使用技巧，上面說的是冰山一角，更多也是要靠大家自己去挖掘。以後如果又有發現什麼好玩的，實用的，也會第一時間分享給大家。另外，如果覺得這篇文章哪裡寫錯了，或者哪裡寫得不好，歡迎指出。
-------------------------華麗的分割線--------------------
想了解更多，關注關注我的微信公眾號：守候書閣