JavaScript數(shù)組迭代方法
最近工作中經(jīng)常涉及到數(shù)據(jù)的處理,數(shù)組尤其常見,經(jīng)常需要對(duì)其進(jìn)行遍歷、轉(zhuǎn)換操作,網(wǎng)上的文章零零散散,不得已自己又找出紅寶書來(lái)翻出來(lái)看,順便記一筆,便于以后查詢。
數(shù)組常用的迭代方法
ECMAScript5為數(shù)組定義了5個(gè)迭代方法。每個(gè)方法都接受兩個(gè)參數(shù):要在每一項(xiàng)上運(yùn)行的函數(shù)fn和(可選的)運(yùn)行該函數(shù)的作用域?qū)ο蟆绊?`this` 的值。
傳入這些方法中的函數(shù)(fn)會(huì)接收3個(gè)參數(shù):item 、index 、array; 如:
array.forEach(function(item,index,array){ //do your staff here; },this)
根據(jù)使用方法的不同,這個(gè)函數(shù)執(zhí)行后的返回值,可能會(huì)/不會(huì)影響方法中的返回值。
這5個(gè)迭代方法作用及返回值概覽如下:
ECMAScript5 Array元素迭代方法
方法名 | 方法作用 | 返回值 |
every() | 針對(duì)數(shù)組中每一項(xiàng)元素運(yùn)行指定函數(shù) | Boolean:若每一項(xiàng)都返回true,返回true; |
filter() | 針對(duì)數(shù)組中每一項(xiàng)元素運(yùn)行指定函數(shù), | Array: 返回函數(shù)運(yùn)行返回true的元素組成的新數(shù)組 |
forEach() | 針對(duì)數(shù)組中每一項(xiàng)元素運(yùn)行指定函數(shù) | null: 無(wú)返回值 |
map() | 針對(duì)數(shù)組中每一項(xiàng)元素運(yùn)行指定函數(shù) | Array: 返回函數(shù)運(yùn)行后,得到到新新元素組成的新數(shù)組 |
some() | 針對(duì)數(shù)組中每一項(xiàng)元素運(yùn)行指定函數(shù) | Boolean: 若有任意一項(xiàng)執(zhí)行函數(shù)后返回true, 則返回true |
簡(jiǎn)單來(lái)說(shuō):
every() 、some() 方法適合用于對(duì)數(shù)組元素進(jìn)行條件判斷;
filter() 、map() 方法適合用于對(duì)數(shù)組進(jìn)行條件篩選/再處理;
forEach() 方法對(duì)不對(duì)數(shù)組本身做操作,僅僅對(duì)數(shù)組元素的二次應(yīng)用;
下面介紹下各個(gè)方法的使用栗子:
先來(lái)假設(shè)一個(gè)場(chǎng)景,你拿到了公司的本月工資清單,假設(shè)你的工資為9000;公司員工工資組成的數(shù)組為salaries=[8500,12000,9900,9000],
a. 想知道 你的工資是不是最低的;
b.想知道 有沒(méi)有人和你工資一樣多;
c.想知道 是不是所有人待遇都一樣;
d.想把大家的工資都換成K為單位的數(shù)據(jù)
var a,b,c; var your=9000; var salaries=[8500,12000,9900,9000]; a=slaries.some(function(item,index,array){ return item<9000 }); console.log(a);//true;恭喜你,還有人比你工資更低 b=salaries.filter(function(item,index,array){ return item== your; }) console.log(b);//[9000] 呵呵,有人跟你待遇一樣 c=salaries.every(function(item,index,array){ return item==your; }); console.log(c);//false .不是所有人都和你一樣待遇哦 d=salaries.map(function(item,index,array){ return item/1000 }); console.log(d);//[8.5,12,9.9,9]
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
iframe子頁(yè)面與父頁(yè)面在同域或不同域下的js通信
根據(jù)iframe中src屬性是同域鏈接還是跨域鏈接,通信方式也不同,下面有個(gè)不錯(cuò)的示例,需要的朋友可以參考下2014-05-05淺析JavaScript如何解決跨域問(wèn)題并手寫一個(gè)jsonp
跨域是指瀏覽器為了安全性,實(shí)施的同源策略,同源策略要求,只有協(xié)議、域名和端口號(hào)完全相同的網(wǎng)頁(yè),才能共享資源,本文整理了一些常用的跨域解決方法,希望對(duì)大家有所幫助2024-03-03bootstrap中selectpicker下拉框使用方法實(shí)例
這篇文章主要給大家介紹了關(guān)于bootstrap中selectpicker下拉框使用的相關(guān)資料,文中通過(guò)示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-03-03JavaScript 嵌套函數(shù)指向this對(duì)象錯(cuò)誤的解決方法
JavaScript對(duì)于全局函數(shù)內(nèi)的this綁定為全局對(duì)象,而對(duì)于嵌套函數(shù)也采用了相同的解釋。2010-03-03一文詳解JSON.parse和JSON.stringify的用法
Json.stringify()和toString()兩者雖然都可以講目標(biāo)值轉(zhuǎn)為字符串,但是還是有本質(zhì)區(qū)別的,下面這篇文章主要給大家介紹了關(guān)于JSON.parse和JSON.stringify用法的相關(guān)資料,需要的朋友可以參考下2023-01-01判斷文字超過(guò)2行添加展開按鈕,未超過(guò)則不顯示,溢出部分顯示省略號(hào)
這篇文章主要介紹了判斷文字超過(guò)2行添加展開按鈕,未超過(guò)則不顯示,溢出部分顯示省略號(hào),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04