ES5中新增的Array方法詳細說明

http://www.javashuo.com/article/p-vxfbgvyc-h.html

1、前言

ES5中新增的一些處理數組（Array）的方法， 對於用JavaScript處理數據很是有用。我總結了一下，給這些方法分了類，大致以下：

2個索引方法：indexOf() 和 lastIndexOf()；

5個迭代方法：forEach()、map()、filter()、some()、every()；

2個歸併方法：reduce()、reduceRight()；

下面咱們來具體看一看這些方法怎麼用吧！

 

2、索引方法

索引方法包含indexOf()和lastIndexOf()兩個方法，這兩個方法都接收兩個參數，第一個參數是要查找的項，第二個參數是查找起點位置的索引，該參數可選，若是缺省或是格式不正確，那麼默認爲0。兩個方法都返回查找項在數組中的位置，若是沒有找到，那麼返回-1。區別就是一個從前日後找，一個從後往前找。

讓咱們來看一個具體列子吧，首先定義一個數組：

var dataArray = [1, 7, 5, 7, 1, 3];

 

indexOf()：該方法從數組的開頭開始向後查找。

console.log(dataArray.indexOf(7));              // 1     缺省, 從第一項開始查找
console.log(dataArray.indexOf(7, 's'));         // 1     格式不正確, 從第一項開始查找
console.log(dataArray.indexOf(7, 2));           // 3　　　從第三個項以後開始查找
console.log(dataArray.indexOf (2));             // -1    未找到, 返回-1

 

lastIndexOf()： 該方法從數組的末尾開始向前查找。

console.log(dataArray.lastIndexOf (7));       // 3     缺省, 從末尾第一項開始查找
console.log(dataArray.lastIndexOf (7, 's'));  // 3     格式不正確, 從末尾第一項開始查找
console.log(dataArray.lastIndexOf (7, 2));    // 1 　　從末尾第三項往前查找
console.log(dataArray.lastIndexOf ('4'));     // -1    未找到, 返回-1

 

值得注意的是，在比較第一個參數與數組中的每一項時，會使用全等操做符， 要求必須徹底相等,不然返回-1。

console.log(dataArray .lastIndexOf ('7'));   // -1，由於這裏是字符串，並非數值類型

 

 

3、迭代方法

迭代方法包含some()、every()、filter()、map()和forEach()五個方法，這些方法都接收兩個參數，第一個參數是一個函數，他接收三個參數，數組當前項的值、當前項在數組中的索引、數組對象自己。第二個參數是執行第一個函數參數的做用域對象，也就是上面說的函數中this所指向的值。注意，這幾種方法都不會改變原數組。

 

every()和some()方法有些相似，咱們放在一塊兒比較。

every()：該方法對數組中的每一項運行給定函數，若是該函數對每一項都返回 true，則返回true。

some()： 該方法對數組中的每一項運行給定函數，若是該函數對任何一項返回 true，則返回true。

感受有點繞，咱們來對着例子講一講。   

首先咱們來看一下every方法，數組中的每一項都會執行給定的函數，若是數組中每一項執行該函數都返回true，那麼咱們結果返回true，不然返回false。

下面例子中，當咱們設置item > 1時，第一項和第五項不符合，因此最終結果返回false。

下面例子中，當咱們設置item > 0時，全部項都符合，那麼咱們最終結果爲true。

 

接下來咱們來看some方法，數組中的每一項都會執行給定的函數，只要有一項爲true，那麼結果結果爲true。

下面這個例子，當咱們設置item > 5時，第二項就符合，咱們直接返回true。

       

 

並且值得注意的是，some方法會在數組中任一項執行函數返回true以後，不在進行循環。

下面例子中，咱們設置item > 5,當數組中第二項7大於5時，中止循環，直接返回結果。

 

filter() ：該方法對數組中的每一項運行給定函數，返回該函數會返回 true 的項組成的數組。利用這個方法可對數組元素進行過濾篩選。

咱們來看下面的例子，當咱們設置item > 3時，數組中二、三、4像返回組成了一個新數組。

並且咱們能夠看出，當咱們分別設置item > 3和item > '3'時, 返回的結果是同樣的，由此咱們能夠看出函數支持弱等於（==），不是必須全等於（===）。

 

和filter() 方法相似，jquery中有個grep()方法也用於數組元素過濾篩選。

下面例子中，當咱們設置item > 3時，返回的數組和咱們用filter方法是同樣的。

 

grep(array, function[, invert])方法，還有一個特性，當invert缺省或是爲false，和filter方法同樣，正常過濾出符合條件的數組元素，當invert值爲true， 正好相反，他會過濾出函數返回值爲false的數組元素。

咱們來看下面的例子，當設置了invert參數爲true以後，函數返回以下過濾後的數組。

 

map(): 該方法對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組。

咱們來看下面的例子，咱們爲數組中的每一項乘以3，返回每一項相乘以後的數組。

 咱們接下來定義一個航班數組，每次返回該數組元素的航空公司，組成新數組。

 

 forEach(): 該方法對數組中的每一項運行給定函數。這個方法沒有返回值。這個方法其實就是遍歷循環，和for循環沒有太大差異。jquery()也提供了相應的方法each()方法。

下面的例子咱們依次進行for循環、forEach方法、each方法的調用，最終執行結果相同。

 

 

4、歸併方法

歸併方法包含reduce()和reduceRight()兩個方法，這兩個方法都會迭代數組中的全部項，而後生成一個最終返回值。他們都接收兩個參數，第一個參數是每一項調用的函數，函數接受是個參數分別是初始值，當前值，索引值，和當前數組，函數須要返回一個值，這個值會在下一次迭代中做爲初始值。第二個參數是迭代初始值，參數可選，若是缺省，初始值爲數組第一項，從數組第一個項開始疊加，缺省參數要比正常傳值少一次運算。

 

reduce()：該方法從數組的第一項開始，逐個遍歷到最後一項。

這個方法比較複雜，咱們來看一個例子 

代碼以下：

具體看這個代碼，首先咱們在傳入reduce的函數中打印了prev值，能夠看到prev就是數組每兩項的和。好比第一個是1，第二個就是1+7 = 8，以此類推。

最後，咱們把結果返回給了sum，那sum天然就是數組的每一項之和。這是沒設置第二個參數的狀況。

下面咱們來看看設置了第二個參數爲2的例子。

咱們能夠看出，當設置了第二個參數。咱們第一個prev輸出的結果就是第二個參數的值。設置了這個參數，會多執行一次。

 

利用這種方法，咱們能夠快速的把二維數組轉化爲一維數組。

 

顧名思義，reduceRight()就是從右到左，就不詳細說了。

 

5、兼容性問題

ES5裏這些處理數組的新方法，在IE6-IE8瀏覽器還未獲得支持，因此咱們須要在IE這些低版本瀏覽器中引入這個es5-shim補丁，這樣咱們就可使用它了。

補丁地址：https://github.com/es-shims/es5-shim

 

 

本博客文章皆爲原創，未盡許可，請勿轉載 （http://www.cnblogs.com/song-song/p/5329374.html）