DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript ES5標准中新增的Array方法
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)); //4
alert(number.lastIndexOf(4)); //5
alert(number.indexOf(4,4)); //5
alert(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方法的相關知識,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved