JavaScript ES5標準中新增的Array方法_javascript技巧

ES5中新增的不少東西，瞭解之對我們寫JavaScript會有不少協助，比如數組這塊，我們可能就不需要去有板有眼地for迴圈了。

ES5中新增了寫數組方法，如下：

forEach (js v1.6)
map (js v1.6)
filter (js v1.6)
some (js v1.6)
every (js v1.6)
indexOf (js v1.6)
lastIndexOf (js v1.6)
reduce (js v1.8)
reduceRight (js v1.8)

1、js中常用的數組Array對象屬性：

如圖,其中用紅色圓圈標記的部分，為ES5新增的屬性。

2、瀏覽器支援情況：

•IE:9+;
•Chrome;
•Firefox2+;
•Safari 3+;
•Opera 9.5+;

3、位置方法

ECMAScript5為數組定義了2個位置方法。indexOf(),lastIndexOf();

這兩個方法都接收兩個參數：要尋找的項和(可選的)表示尋找起點位置的索引。

其中，indexOf()從數組的開頭(位置0)開始向後尋找，lastIndexOf()則是從數組的末尾開始向前尋找。

這兩個方法都要返回要尋找的項在數組中的位置，或者在沒有找到的情況下返回-1；

樣本：

var numbers = [1,2,3,4,5,4,3,2,1];alert(numbers.indexOf(4)); //4alert(number.lastIndexOf(4)); //5alert(number.indexOf(4,4)); //5alert(number.lastIndexOf(4,4)); //3

4、迭代方法

ECMAScript5為數組定義了5個迭代方法。

4.1、every()

定義和用法：every() 方法用於檢測數組所有元素是否都符合指定條件（通過函數提供）。

every() 方法使用指定函數檢測數組中的所有元素：

•如果數組中檢測到有一個元素不滿足，則整個運算式返回 false ，且剩餘的元素不會再進行檢測。

•如果所有元素都滿足條件，則返回 true。

注意： every() 不會對空數組進行檢測。

注意： every() 不會改變原始數組。

描述：檢測數組 ages 的所有元素是否都大於 18 :

var ages = [32, 33, 16, 40];function checkAdult(age) {return age >= 18;}function myFunction() {document.getElementById("demo").innerHTML = ages.every(checkAdult);}

結果為：

false;

4.2、some()

定義和用法：some() 方法用於檢測數組中的元素是否滿足指定條件（函數提供）。

對數組中的每一項運行給定的函數，如果該函數對任一項都返回true,則返回true;

代碼如下：

var numbers = [1,2,3,4,5,4,3,2,1];var someResult = numbers.some(function(item,index,array){//item指代數組值;index指代數組下標;array指代數組本身；return (item>2);});alert(someResult);

結果為：

true;

4.3、filter()

定義和用法：filter() 方法建立一個新的數組，新數組中的元素是通過檢查指定數組中合格所有元素。

對數組中的每一項運行給定函數，返回該函數會返回true的項的數組。

描述：要返回一個所有數值大於2的數組，代碼如下：

var numbers = [1,2,3,4,5,4,3,2,1];var filterResult = numbers.filter(function(item,index,array){//item指代數組值;index指代數組下標;array指代數組本身；return (item>2);});alert(filterResult );

結果為：

[3,4,5,4,3]
4.4、map()

定義和用法：map() 方法返回一個新數組，數組中的元素為原始數組元素調用函數處理後的值。

對數組中的每項運行給定的函數，返回每次函數調用的結果組成的數組。

描述：給數組中的每項乘以2，返回這些乘積組成的數組，代碼如下：

var numbers = [1,2,3,4,5,4,3,2,1];var mapResult = numbers.map(function(item,index,array){//item指代數組值;index指代數組下標;array指代數組本身；return item*2;});alert(mapResult );

結果為：

[2,4,6,8,10,8,6,4,2]
4.5、forEach()

定義和用法：對數組中的每一項運行給定的函數。這個方法沒有傳回值。

本質上與使用for迴圈遍曆數組一樣的。代碼如下：

var numbers = [1,2,3,4];numbers.forEach(function(item,index,array){console.log(item);});

結果為：

1
2
3
4

5、縮小方法

ECMAScript5新增兩個縮小數組的方法：reduce()和reduceRight();

這兩個方法多會迭代數組的所有項，然後構建一個最終返回的值。其中，reduce()方法從數組的第一項開始，逐個遍曆到最後。

而reduceRight()則從數組的最後一項開始，向前遍曆到第一項。這兩個方法都接收兩個參數：一個在每一項上調用的函數和(可選的)作為縮小基礎的初始值。

傳給reduce()和reduceRight()的函數接收4個參數：前一個值，當前值，項的索引和數組對象。

描述：使用reduce()方法可以執行求數組中所有值之和的操作。代碼如下：

var values = [1,2,3,4,5];var sum =values.reduce(function(prev,cur,index,array){return prev+cur;});alert(sum);

結果為：

15

以上所述是小編給大家介紹的JavaScript ES5標準中新增的Array方法的相關知識，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！