国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

kamushin233 / 666人閱讀

摘要:還有一個就是,我本身在數組的遍歷上,基本都是用循環進行操作,在開始使用了迭代方法之后,我循環用的很少。對數組中每一項運行給定函數。返回該函數會返回的項組成的數組。

前言

數組的迭代方法,這個想必大家都不陌生了,可能剛入門的人暫時還沒接觸到這個。但是以后的開發中,肯定會用得上的。我自身的一個使用經歷就是,如果迭代方法用的適當,不但可以減少代碼量,也能使代碼可讀性更強,性能上的優化也是肯定的了。還有一個就是,我本身在數組的遍歷上,基本都是用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

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

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

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

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

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

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

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

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

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;i30){
        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;i30){
        getItemIndex=i;
        break;
    }
}

findIndex

arr.findIndex(function(val){return val>30})

es6寫法

arr.findIndex(val=>val>30)

運行一下

后續

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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88305.html

相關文章

  • 前端性能優化之 JavaScript

    摘要:大多數情況下,對一個直接量和一個局部變量數據訪問的性能差異是微不足道的。 前端性能優化之 JavaScript 前言 本文為 《高性能 JavaScript》 讀書筆記,是利用中午休息時間、下班時間以及周末整理出來的,此書雖有點老舊,但談論的性能優化話題是每位同學必須理解和掌握的,業務響應速度直接影響用戶體驗。 一、加載和運行 大多數瀏覽器使用單進程處理 UI 更新和 JavaScri...

    Coding01 評論0 收藏0
  • JS 數組常用API方法和遍歷方法總結

    摘要:數組語法功能遍歷數組,返回回調返回值組成的新數組,不改變原數組,不會對空數組進行檢測語法功能無法,可以用中來停止,不改變原數組語法功能過濾,返回過濾后的數組,不改變原數組,不會對空數組進行檢測語法功能有一項返回,則整體為,不改變原數組語法 數組 (array) ES5 * map 語法:[].map(function(item, index, array) {return xxx})功...

    TNFE 評論0 收藏0
  • 循環的幾種類型

    摘要:返回值方法創建一個新數組其包含通過所提供函數實現的測試的所有元素。如果數組中的每個元素都滿足測試函數,則返回,否則返回。 showImg(https://segmentfault.com/img/bVXxkh?w=700&h=700);循環遍歷數組的時候,你還在用for語句走天下嗎? 我曾經就是for走天下,最后發現自己給自己挖了一個巨大的坑,層層嵌套的循環,總要花大量的時間去捋清各種...

    yibinnn 評論0 收藏0
  • 循環的幾種類型

    摘要:返回值方法創建一個新數組其包含通過所提供函數實現的測試的所有元素。如果數組中的每個元素都滿足測試函數,則返回,否則返回。 showImg(https://segmentfault.com/img/bVXxkh?w=700&h=700);循環遍歷數組的時候,你還在用for語句走天下嗎? 我曾經就是for走天下,最后發現自己給自己挖了一個巨大的坑,層層嵌套的循環,總要花大量的時間去捋清各種...

    clasnake 評論0 收藏0

發表評論

0條評論

kamushin233

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<