JavaScript ES5標準中新增的Array方法
ES5中新增的不少東西,了解之對我們寫JavaScript會有不少幫助,比如數(shù)組這塊,我們可能就不需要去有板有眼地for循環(huán)了。
ES5中新增了寫數(shù)組方法,如下:
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中常用的數(shù)組Array對象屬性:
如圖,其中用紅色圓圈標記的部分,為ES5新增的屬性。
2、瀏覽器支持情況:
•IE:9+;
•Chrome;
•Firefox2+;
•Safari 3+;
•Opera 9.5+;
3、位置方法
ECMAScript5為數(shù)組定義了2個位置方法。indexOf(),lastIndexOf();
這兩個方法都接收兩個參數(shù):要查找的項和(可選的)表示查找起點位置的索引。
其中,indexOf()從數(shù)組的開頭(位置0)開始向后查找,lastIndexOf()則是從數(shù)組的末尾開始向前查找。
這兩個方法都要返回要查找的項在數(shù)組中的位置,或者在沒有找到的情況下返回-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為數(shù)組定義了5個迭代方法。
4.1、every()
定義和用法:every() 方法用于檢測數(shù)組所有元素是否都符合指定條件(通過函數(shù)提供)。
every() 方法使用指定函數(shù)檢測數(shù)組中的所有元素:
•如果數(shù)組中檢測到有一個元素不滿足,則整個表達式返回 false ,且剩余的元素不會再進行檢測。
•如果所有元素都滿足條件,則返回 true。
注意: every() 不會對空數(shù)組進行檢測。
注意: every() 不會改變原始數(shù)組。
描述:檢測數(shù)組 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() 方法用于檢測數(shù)組中的元素是否滿足指定條件(函數(shù)提供)。
對數(shù)組中的每一項運行給定的函數(shù),如果該函數(shù)對任一項都返回true,則返回true;
代碼如下:
var numbers = [1,2,3,4,5,4,3,2,1]; var someResult = numbers.some(function(item,index,array){//item指代數(shù)組值;index指代數(shù)組下標;array指代數(shù)組本身; return (item>2); }); alert(someResult);
結果為:
true;
4.3、filter()
定義和用法:filter() 方法創(chuàng)建一個新的數(shù)組,新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。
對數(shù)組中的每一項運行給定函數(shù),返回該函數(shù)會返回true的項的數(shù)組。
描述:要返回一個所有數(shù)值大于2的數(shù)組,代碼如下:
var numbers = [1,2,3,4,5,4,3,2,1]; var filterResult = numbers.filter(function(item,index,array){//item指代數(shù)組值;index指代數(shù)組下標;array指代數(shù)組本身; return (item>2); }); alert(filterResult );
結果為:
[3,4,5,4,3]
4.4、map()
定義和用法:map() 方法返回一個新數(shù)組,數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。
對數(shù)組中的每項運行給定的函數(shù),返回每次函數(shù)調(diào)用的結果組成的數(shù)組。
描述:給數(shù)組中的每項乘以2,返回這些乘積組成的數(shù)組,代碼如下:
var numbers = [1,2,3,4,5,4,3,2,1]; var mapResult = numbers.map(function(item,index,array){//item指代數(shù)組值;index指代數(shù)組下標;array指代數(shù)組本身; return item*2; }); alert(mapResult );
結果為:
[2,4,6,8,10,8,6,4,2]
4.5、forEach()
定義和用法:對數(shù)組中的每一項運行給定的函數(shù)。這個方法沒有返回值。
本質上與使用for循環(huán)遍歷數(shù)組一樣的。代碼如下:
var numbers = [1,2,3,4]; numbers.forEach(function(item,index,array){ console.log(item); });
結果為:
1
2
3
4
5、縮小方法
ECMAScript5新增兩個縮小數(shù)組的方法:reduce()和reduceRight();
這兩個方法多會迭代數(shù)組的所有項,然后構建一個最終返回的值。其中,reduce()方法從數(shù)組的第一項開始,逐個遍歷到最后。
而reduceRight()則從數(shù)組的最后一項開始,向前遍歷到第一項。這兩個方法都接收兩個參數(shù):一個在每一項上調(diào)用的函數(shù)和(可選的)作為縮小基礎的初始值。
傳給reduce()和reduceRight()的函數(shù)接收4個參數(shù):前一個值,當前值,項的索引和數(shù)組對象。
描述:使用reduce()方法可以執(zhí)行求數(shù)組中所有值之和的操作。代碼如下:
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方法的相關知識,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
使用JavaScript動態(tài)設置樣式實現(xiàn)代碼(2)
使用onmouseover和onmouseout事件實現(xiàn)不同的效果而且是使用js動態(tài)實現(xiàn),本文有利于鞏固你js與css方面的知識,感興趣的你可以了解下哦,希望本文對你有所幫助2013-01-01jquery操作下拉列表、文本框、復選框、單選框集合(收藏)
jquery操作拉列表、文本框、復選框、單選框集合。各種對下拉列表、文本框、復選框、單選框的jquery的相關操作。做為記錄和收藏的最好方法2014-01-01JavaScript中使用arguments獲得函數(shù)傳參個數(shù)實例
這篇文章主要介紹了JavaScript中使用arguments獲得函數(shù)傳參個數(shù)實例,本文用了多個例子來講解arguments的使用,需要的朋友可以參考下2014-08-08詳解如何使用JavaScript實現(xiàn)自定義的雙向數(shù)據(jù)綁定
雙向數(shù)據(jù)綁定是一種編程模式,用于在用戶界面和數(shù)據(jù)模型之間實現(xiàn)數(shù)據(jù)的同步更新,它允許用戶界面中的數(shù)據(jù)變化自動更新到數(shù)據(jù)模型中,在這篇文章中,我會使用基于觀察者模式和基于Proxy對象來實現(xiàn)JS的自定義雙向數(shù)據(jù)綁定2023-08-08JS在IE和FireFox之間常用函數(shù)的區(qū)別小結
IE和FireFox之間常用函數(shù)的區(qū)別小結,需要的朋友可以參考下。2010-03-03