寫博客的同時也是對自己知識的一次全面總結,方便自己日后復習。今天總結一下JS中Array的所有方法和技巧,對算法題算是一個基礎了,有不足的地方,還望童鞋們指出來,一起進步。
在總結方法之前,提到一點,Array中的length屬性它不是只讀的!通過修改length屬性,可以刪除或添加數組的項。
數組類型檢測問題:instanceof()方法、Array.isArray()
開門見山,JS中Array對象有這么幾種方法:1、棧方法 2、隊列方法 3、排序 4、操作方法 5、位置方法 6、迭代 7、歸並
一、棧方法、隊列方法
這兩個方法最為常見,具體就是 push() pop()為棧方法,shift() unshift()為隊列方法。數組頭尾部的壓入和刪除
三、重排序
數組中已經存在兩個方法可以進行數組的重排序,即 reserve()和 sort(),reserve()是反轉數組,而sort()是數組的重排序,默認為升序,sort()實現排序原理是會調用每個數組項的 toString()方法,比較得到的字符串。這個方法可能會出錯,因為它比較的是轉型后的字符串。通常會配合比較函數一起使用,如下圖:

四、操作方法
Array的操作方法是非常有用的,在數據結構和算法中比較重要。concat()方法,簡單理解為數組復制,再不傳參數的情況下,就是復制原數組,參數若是一或多個數組,則將參數數組添加在原數組末尾。 slice()方法,簡單來說就是截取原數組中的一段作為新的數組返回,接受返回項的起始和截止位置。(左閉右開原則)即返回值不包括截止位置的值,只有一個參數的情況下,從參數位置一直截取到數組末尾。若參數中存在負值,則計算位置的方式為 數組長度加上該數 所得值。
最重要的操作方法 splice()。它可以完成增刪改,splice()方法接受三個參數,起始位置、刪除項數目、插入的項。靈活運用這三個參數的變化就可以完成數組的增刪改,刪除:splice(1, 2)從第二項開始刪除兩項。 插入: splice(1, 0, "item1", "item2")從第二項開始往后插入“item1”,“item2”。替換:splice(1, 2, “item1”, “item2”)原理不變,刪除了兩項,且在原位置插入了兩項達到替換的作用。
五、位置方法
有兩個位置方法 indexOf() 和 lastIndexOf(),都接受兩個參數,即要查找的項和查找起點的位置(該參數可選),只不過兩個方法查找的順序相反,indexOf()是從頭到尾的,且兩個方法都返回被查找的項在數組中的位置,若沒找到返回-1,利用這點,我們可以用來進行數組的去重,如圖:

上述圖例又提到了Array的另一種類型的方法,即迭代方法,JS中有五個迭代方法,every()、filter()、forEach()、map()、some()。它們都接收兩個參數,一個是在數組每項上都要運行的函數,另一個就是該函數的作用域this。而傳入的函數又會接受三個參數,數組項的值、其索引、原數組。解讀上圖例子,函數norepeat傳入數組arr,返回arr的filter方法,filter的參數函數有兩個參數,即當前項和其索引,在調用indexOf()傳入當前項ele ,indexOf會查找傳入項在數組中第一次出現的位置,將該位置與filter的元素項位置相比,若等於則返回。數組去重會有很多不同位置的項值相等,迭代從左到右,filter里面只是每一項的值和索引,而indexOf()里面則是某個值在數組中從左到右第一次出現的位置索引,讓兩個索引相比較。若相等則為首次出現,若不等,則為非首次出現,即重復的值,不返回,則最后得到的結果就是去重后的數組。
every()和some()迭代,則是函數作用於數組每一項,結果都是true,才返回true這是every()方法,some()則是有一項返回true,則結果返回true,二者很相似。
map()方法,給數組每一項運行函數,返回其運行結果組成的數組。舉例,讓某數組全體項擴大二倍 var mapResult = arr.map(function(itrm, index) { retrun item*2}); 最后forEach()本質和for循環迭代數組一樣。
六、歸並方法
ES5中有兩個數組歸並方法 reduce(), reduceRight()。這兩個方法都會迭代數組項,並返回最終的值。類似於貪吃蛇,從第一個點開始,吃掉往后的每一個點並且加在自己身上,最后變成一個包含所有點的結果。該方法接受一個函數和歸並基礎的初始值(可選)作為參數,而函數接受四個參數,前一項值,當前值,項的索引,原數組。這個函數返回的值都會作為第一個參數自動傳給下一項!舉例:求數組的和 var reduceResult = arr.reduce( function(prev, cur, index) {return prev + cur} );
作者:方紅亮
博客園:https://home.cnblogs.com/u/fanghl/
碼字不易,如需轉載,請注明出處,謝謝理解!
