js數組操做--使用迭代方法替代for循環

前言

數組的迭代方法，這個想必你們都不陌生了，可能剛入門的人暫時還沒接觸到這個。可是之後的開發中，確定會用得上的。我自身的一個使用經歷就是，若是迭代方法用的適當，不但能夠減小代碼量，也能使代碼可讀性更強，性能上的優化也是確定的了。還有一個就是，我自己在數組的遍歷上，基本都是用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)

運行一下

後續

今天的分享就到這裏了，關於數組的迭代方法的使用技巧，上面說的是冰山一角，更多也是要靠你們本身去挖掘。之後若是又有發現什麼好玩的，實用的，也會第一時間分享給你們。另外，若是以爲這篇文章哪裏寫錯了，或者哪裏寫得很差，歡迎指出。