摘要:還有一個就是,我本身在數組的遍歷上,基本都是用循環進行操作,在開始使用了迭代方法之后,我循環用的很少。對數組中每一項運行給定函數。返回該函數會返回的項組成的數組。
前言
數組的迭代方法,這個想必大家都不陌生了,可能剛入門的人暫時還沒接觸到這個。但是以后的開發中,肯定會用得上的。我自身的一個使用經歷就是,如果迭代方法用的適當,不但可以減少代碼量,也能使代碼可讀性更強,性能上的優化也是肯定的了。還有一個就是,我本身在數組的遍歷上,基本都是用for循環進行操作,在開始使用了迭代方法之后,我for循環用的很少。如果以后我更加熟練迭代方法的話,for使用會更少,也希望這樣能幫助大家學習迭代方法。
1.Mapmap():對數組中每一項運行給定函數。返回每次函數調用的結果組成的數組。
map就是我用的最多的一個了。首頁設想以下一個場景,給出一個數組,需求就是給數組的每一項都*2。
for方式
let arr=[1,2,3,4,5,6]; for(let i=0,len=arr.length;imap方式
/*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;imap方式
/*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;imap方式
/*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.Filterfilter():對數組中的每一項運行給定函數。返回該函數會返回true的項組成的數組。
Filter的用法也是很多,還是用上面的數組,但是我現在要拿到已經簽到了的球員,不要沒簽到的球員。
for方式var arr=[]; for(var i=0,len=sporter.length;ifilter方式
/*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;ifilter方式
/*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和SomeEvery和Some為什么要一起寫呢,因為這兩個方法很像。
every()對數組中的每一項運行給定函數,如果該函數對每一項都返回true,則返回true ;
some()對數組中的每一項運行給定函數,如果該函數對任一項返回true,則返回true;
還是上面那個sporter數組。可以設想這個場景,運動員進場如果需要每一個球員都必須簽到,球隊才能進場,實現這個需求就是
for方式var isIn; for(var i=0,len=sporter.length;ievery方式
/*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;isome方式
/*item為當前遍歷到的項,和sporter[i]一樣*/ var arr=sporter.some(function (item){return item.isHell})es6寫法
var arr=sporter.some(item=>{return item.isHell})運行一下,由于上面數組有個運動員簽到了,所以返回true,可以進場
4.ForeachforEach()對數組中的每一項運行給定函數,這個方法沒有返回值 ;簡單點來說,本質上跟for沒有區別,只是寫法不一樣。
還是上面那個sporter數組。只是給每一個數字都加上一個屬性sex,值都為‘男’
for方式for(var i=0,len=sporter.length;iforEach方式
/*item為當前遍歷到的項,和arr[i]一樣*/ var arr=sporter.forEach(function (item){item.sex="男"})es6寫法
var arr=sporter.forEach(item=>{item.sex="男"})運行一下
5.Reducereduce()每次只能接受兩個參數,我對著兩個參數的理解就是,當前結果,和當前序列的下一項。作用效果和原理就是[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;iforEach方式
/*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和findIndexfind:方法返回傳入一個測試條件(函數)符合條件的數組第一個元素。
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》 讀書筆記,是利用中午休息時間、下班時間以及周末整理出來的,此書雖有點老舊,但談論的性能優化話題是每位同學必須理解和掌握的,業務響應速度直接影響用戶體驗。 一、加載和運行 大多數瀏覽器使用單進程處理 UI 更新和 JavaScri...
摘要:數組語法功能遍歷數組,返回回調返回值組成的新數組,不改變原數組,不會對空數組進行檢測語法功能無法,可以用中來停止,不改變原數組語法功能過濾,返回過濾后的數組,不改變原數組,不會對空數組進行檢測語法功能有一項返回,則整體為,不改變原數組語法 數組 (array) ES5 * map 語法:[].map(function(item, index, array) {return xxx})功...
閱讀 2235·2021-11-18 10:02
閱讀 3491·2021-11-15 11:36
閱讀 1122·2019-08-30 14:03
閱讀 733·2019-08-30 11:08
閱讀 2766·2019-08-29 13:20
閱讀 3291·2019-08-29 12:34
閱讀 1380·2019-08-28 18:30
閱讀 1645·2019-08-26 13:34