這可能是史上最全的js數組方法彙總

首先上一張花費大量時間整理和排序的表格,裏面列出了基本所有數組方法,以及參數、返回值,有需要的朋友可以將圖片保存,或者根據自己的需要將圖片改造,自行定製。

接下來就按照我的個人思路,依次對該表格裏的方法解析之。

Ps,所有的方法都會在2019年12月2日-6日,於chrome 78.0 console控制檯進行驗證並截圖,如果遇到其他人結果不一致的,自行將代碼輸入到瀏覽器內驗證結果。

Pps,全文較長,共計花費約一個禮拜,建議看官可以先點贊或者收藏慢慢看哦~  ^_^

第一類:

轉換爲字符串

1、toString

JavaScript中將數組轉換爲字符串,用逗號分隔。

注意1:在轉換爲字符串時,會同步對數組中的元素做toString,至於結果嘛…看圖。

對於結構明確簡單的數組可以隨意使用,如果習慣用undefined對空值進行標記,或者有對象、數組結構,就要小心了。

注意2:在mdn文檔中有提示,“當數組用於字符串環境時,JavaScript 會調用這一方法將數組自動轉換成字符串。”這就包含了隱式調用,如果遇到不想用逗號分隔,或者需要顯式調用的情況,那就需要下面的join方法啦

2、join

用指定字符連接數組元素,參數爲空時與toString方法返回值一致。如果想直接連接,傳一個空字符串即可

備註:valueOf是JavaScript中的隱式方法,翻譯成人話就是你用不着,toLocalString則是轉換爲本地字符集字符串,由於國內web開發標準、環境使然,該方法和toString返回一致,所以……你也用不着。

 

第二類:

操縱、改變數組元素

1、pop、shift、unshift、push

四種方法分別對應着刪除末尾元素,刪除首個元素,在開頭填裝元素,在末尾填裝元素,而對應返回值分兩種,pop和shift返回元素,unshift和push返回改變後的數組長度。

四種方法在成功執行後都會改變原數組。

注意:Push和unshift方法是可以傳入多個參數的,會將參數依次插入數組,但pop和shift無論傳什麼參數,都只會刪除一個元素。如果數組爲空,則pop和shift不改變數組,並返回undefined。

2、concat

concat() 方法用於連接兩個或多個數組,該方法不會改變現有的數組,而僅僅會返回被連接數組的一個副本。

備註:和push相比,在參數、返回值、對原數組處理上有不同。由於concat返回新數組,可以通過不傳參來實現數組的淺拷貝。

 

第三類:

用回調來遍歷數組

這些方法有個共同點,即第一個參數都傳入一個函數,用來對數組每一項執行回調。相較於傳統的for循環,回調寫法更加優雅,直觀易懂,而且生產環境中json數據很多都是對象數組,採用回調從中取值,篩選等操作都更方便簡捷。

注意:因爲是在function中,該類方法會導致break、continue失效

1、foreach

forEach() 方法爲每個數組元素調用一次函數(回調函數)。該方法不會改變原數組,並且返回undefined。

回調函數接受三個參數:1項目值,2項目索引,3數組本身。

該方法適用於簡單粗暴的遍歷,可以用於打印,查找等等,在聲明其他數組的情況下,也可以將其視爲萬能方法。

2、filter

filter() 方法創建一個包含通過測試的數組元素的新數組。

說人話就是篩,符合條件的在回調裏return true,不符合的false,把所有true的元素挑出來,filter形成一個新數組。該方法不修改原數組,只會返回一個return true的元素組成的新數組。

回調函數接受三個參數:1項目值,2項目索引,3數組本身。

該方法適合篩選一個數組。如上圖用例,用filter通過篩選,就選出來了及格的同學了

3、map

map() 方法通過對每個數組元素執行函數來創建新數組。

說人話就是映射,把原數組的元素,通過回調函數運算,映射爲一個新數組。該方法不修改原數組,只會返回一個return 後的元素組成的新數組。

回調函數接受三個參數:1項目值,2項目索引,3數組本身。

還是以上面的同學舉例,通過映射,由原來的對象數組,獲得了及格同學名字數組,最後簡單運算進行輸出。

4、reduce、reduceRight

reduce、reduceRight方法提供了一個疊加器,來用以對數組元素進行迭代運算。前者迭代方式正序,後者則爲逆序。該方法不修改原數組,會返回疊加器疊加後的新數據成員。數據成員可以爲簡單數據成員例如數字、字符串,也可以是數組,或者對象。

按照慣例,介紹參數:

兩種方法接受兩個參數,第一個是回調參數,第二個參數可選,爲疊加器增設一個初始值。該初始值可以爲基本數據類型也可以是擴展數據類型。

回調參數接受四個參數,第一個爲增設初始值或者上次疊加後的返回值,剩餘三個參數分別爲2項目值,3項目索引,4數組本身

光看定義可能會有點繞口,下面就用一個簡單的例子來看看

這個例子通過累加實現求數組的全體和

回調函數參數列表裏可以看到使用了倆,我們通過循環的方式把參數打印出來再看看執行過程

很清晰地看到,reduce第二個參數被作爲第一次循環回調的prev傳遞進去,而每次return的值又被作爲下次回調的prev,這樣循環往復遍歷完數組。

這倆方法能做的事情遠不止這些,排序,篩選,映射,去重,計算均分,包括權重均分,reduce和reduceRight都能做,下面就是一個計算均分的小例子

利用reduceRight反向遍歷,到數組第“0”項剛好結束,完成計算平均分。

5、every,some

every方法檢查所有數組元素是否通過測試。Some方法則檢查是否有某些元素通過了測試。該方法不修改原數組,只會返回true或者false。

回調函數接受三個參數:1項目值,2項目索引,3數組本身。

這倆方法很適合用來“尋找異類”,例如every判斷是不是每個同學都及格了,some判斷有沒有同學考了滿分。下例分別用every判斷是否每個人都及格,some判斷是不是有同學考了不該考的59分。

第四類:

尋找在不在

1、find

find方法返回通過測試函數的第一個數組元素的值。返回值爲該元素或者undefined(未找到的情況下)。這個方法參數也是一個回調,和上面方法有着類似的三個參數:1項目值,2項目索引,3數組本身。

需要注意的是,和some方法的異同,some返回true/false,而find返回該元素或者undefined,這也就意味着,如果想尋找undefined,不能用find尋找~

2、findIndex

findIndex() 方法返回通過測試函數的第一個數組元素的索引。如果未找到則返回-1。除去和上面方法不一樣,返回索引(又叫數組下標)以外,其餘與上面find方法完全一致。

算是規避了上面不能尋找undefined的尷尬。

3、indexOf

indexOf() 方法可返回數組中某個指定的元素位置。該方法參數有兩個,1爲尋找的元素值,2可選,爲開始尋找的位置。如果沒有指定則從數組開始尋找。返回值爲索引(數組下標)或者undefined(未找到的情況下)。

indexOf和上面的方法是不是感覺很像?indexOf在es5之前就有且瀏覽器的支持程度都很好,但爲什麼在es6又添加了findIndex呢:

注意js中對象是不能直接比較的,直接比較都會返回false

如果採用回調的方式,那麼不管數組內元素的深度有多深,都可以採用深度比較的方式來判斷,而不用轉爲JSON字符串這種比較消耗性能的方式了。

如下示例,對於對象的比較,find和findIndex有着無與倫比的優勢。

4、includes

includes() 方法用來判斷一個數組是否包含一個指定的值,根據情況,如果包含則返回 true,否則返回false。

使用indexof時,一來需要根據位置判斷是否存在,產生了arrayObject.indexOf(item)<0這種語義不夠清晰的代碼,二則是內部使用嚴格相等的判斷沒法找到NaN元素,所以在es6中添加了該方法。

看上圖示例對NaN的處理,這個需要與indexOf進行辨析。當然也可以用isNaN配合some實現,只是稍微麻煩了些。

 

第五類:

數組的剩餘常用函數

1、sort

老生常談的排序函數,參數傳入一個比較函數來進行比較。比較函數可選,接受兩個參數,分作作爲比較元素傳入。如果未傳比較函數,則直接按照字符編碼的順序進行排序。

注意sort排序函數會直接在原數組上進行排序,所以如果想不“傷害”原數組,就拿一份拷貝去排序吧。

2、reverse

簡單的翻轉函數,將原數組進行翻轉。無參數,返回數組

同sort,也會直接在原數組上進行排序。

3、fill

fill() 方法用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。不包括終止索引。

該方法參數有3個,第一個爲待填充元素(可省略,省略則填充undefined),第二個爲填充開始位置(填寫了第一個參數的情況下可省略,默認爲數組下標開始位置),第三個參數爲填充結束位置(填寫了前兩個參數情況下可省略,默認爲數組結束位置)

哦對了,1,2,3這三個方法均在原數組上修改,返回也均爲原數組。

4、slice

slice() 方法可從已有的數組中返回選定的元素。

該方法參數倆,第一個是截取的開始位置,第二個可選,截取的結束位置,默認爲數組末尾。返回則是一個全新的數組,且不修改原數組。

需要注意的是,參數均指數組的下標,且不包含第二個參數位置。

5、splice

splice() 方法向/從數組中添加/刪除項目,然後返回被刪除的項目。

該方法參數至少有兩個,第一個是開始添加/刪除的位置下標,第二個是要刪除的元素數量。從第三個參數開始可選,要添加的元素依次向後排列。

返回值則爲刪除元素構成的數組。

可以看到,該方法可以做到隨意的增,刪,改,靈活度很高,而且是在原數組上直接修改,使用時應該多加小心。

需要注意,如果沒有刪除元素(即第二個參數爲0),返回的是空數組,配合上空數組轉換布爾值爲真,那酸爽…

還有點,該方法由於和上面slice名字實在太像了,而且最常用的參數都是倆數字,極其容易搞混,萬一碰到如下情況

參數、返回值全都一樣,而原數組內部卻天差地別,估計排查bug時候會崩潰吧…慎用splice,在生產開發時候,還是用push,pop,shift,unshift四件套,清晰易懂好辨識,誰用誰知道~

6、Array.isArray

該方法就是用來判斷是不是數組咯,畢竟typeof數組得到的是Object,所以單獨把方法拎出來講一下。

使用時注意方法定義在Array上,普通的數組用.訪問會報錯,參數爲待判斷的對象,返回值就是true、false。

還有,有關空數組的布爾值判斷,也是JavaScript坑點之一,網上一搜一大堆,看下圖:

怎麼樣,足夠繞吧,這裏涉及到各種隱式轉換,參照了網上

https://www.cnblogs.com/frostbelt/p/3425498.html

該同學的帖子,具體原理就不展開講了,可以在這個同學帖子下面留言一起探討,在這裏只是把這個現象貼出來。

 

還有剩下的for in和for of的用法,由於其不太屬於數組特有的循環,改天開貼再寫吧,這篇就不展開講述了(瘋狂挖坑…)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章