ECMAScript5特性介紹之數組篇

Es5的特性以及發佈很長時間了,增加了很多實用的特性(Array的 indexOf、every,some,forEach等,Object的create,keys,isFrozen等),這些特性已經得到個瀏覽器的支持,比如:IE9+,FF21+,chrome23+,opera 15+,SF6+都已經基本支持全部特性。詳細的特性檢測見:http://kangax.github.io/compat-table/es5/

很早時候都想認真理下特性的使用方法,總是被這樣或者那樣的理由推遲了,現在是時候理一下的時候了,畢竟ES6現在已經是草稿了,並且瀏覽器都在紛紛向其靠攏,如果再不整理出來,就更加落後了。

言歸正轉,現在開始Array的新特性:

先看下indexOf,lastIndexOf,every,some,forEach,map,filter,reduce,reduceRight特性

我們先定義一個數組

var arr = [“name”,”age”,”email”,”age”];
console.info(arr.indexOf(“age”));
console.info(arr.lastIndexOf(“age”))
對於上面的代碼,很容易理解,完全可以用string的思維去理解

下面看,every,我們先看下every的規範定義
Array.prototype.every(callback[,thisArg]);
根據規範描述,調用會返回一個boolean值,對於數組中的每一個值都會執行這個回調函數,如果某一個元素返回false,every返回立即返回false, 否則,會循環遍歷數組中的每一個元素,更詳細的規範請參考附件中的15.4.4.16,先看個例子吧
var arr = [2,9,4,5,3,7];
var greater = arr.every(function(e,i){
return e > 5
}); //是否大於5
var smaller = arr.every(function(e,i){
return e < 10
}); //是否小於10
console.info(greater)
console.info(smaller)
上面的代碼輸出結果分別是false,true。看完規範是不是覺得好理解多了。

下面我們一塊看下some的用法,還是先看下規範,

Array.prototype.some(callback[,thisArg]);
some的功能和every的功能比較類似,只不過some是判斷某一個元素的值是不是滿足某個條件,如果有這個一個元素,則立即返回true,否則會遍歷完每個元素,返回false。詳細的規範見附件中的15.4.4.17.

直接上個例子。

var arr = [2,9,4,5,3,7];
var greater = arr.some(function(e,i){
return e>10
}); //是否大於5
var smaller = arr.some(function(e,i){
return e<10
}); //是否小於10
console.info(greater)
console.info(smaller)
forEach就是簡單的循環遍歷了,舉個例子而已,不再解釋

var arr = [2,9,4,5,3,7];
arr.forEach(function(e){
console.info(e+1)
})
下面介紹下map,規範定義如下:

Array.prototype.map(callback[,thisArg]);
對數組中的每一個元素執行回調函數,把所有的返回值作爲一個數組,

var arr = [2,9,4,5,3,7];
var smaller5 = arr.map(function(e,i){
return e<5
});
console.info(smaller5);
返回的結果爲:true,false,true,false,true,false

下面看filter,規範定義如下:

Array.prototype.filter(callback[,thisArg]);
對數組中的每一個元素執行回調函數,把所有的返回值作爲一個數組,注意,這個返回的數組可能是個空

var arr = [2,9,4,5,3,7];
var smaller5 = arr.filter(function(e,i){
return e<5
}); //是否小於5
console.info(smaller5);

下面看reduce的介紹,規範定義如下:

Array.prototype.filter(callback[,initValue]);
callback中有四個參數,previousValue, currentValue, currentIndex, array,

如果沒有設置初始值, previousValue從第一個元素開始, currentValue從第二個元素開始循環。 總共循環Array.prototype.length – 1次。如果設置了初始值,previousValue從初始值開始,currentValue從第一個元素開始循環。 總共循環Array.prototype.length次。 最後返回最後一次callback function調用的結果
var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; });
數組的新特性基本介紹完了,寫的比較倉促,後續會補充。

發佈了60 篇原創文章 · 獲贊 22 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章