假如有這樣一個數組。arr = [12,34,45,46,36,58,36,59],現在要遍歷該數組。
方法1:以前我們可能會這樣做:
for(var i=0;i<arr.length;i++){ console.log(arr[i]+"\n") }
方法2:自ES5發布后,我們可以使用內置的forEach方法來遍歷數組。
arr.forEach(function(val){ console.log(val+"\n") })
這段代碼看起來簡單,然而有些缺陷,就是不能使用break語句中斷循環,也不能使用return語句返回到外層函數。
方法3:於是我們很容易想到使用for-in來遍歷數組
for(var index in arr){ console.log(arr[index]+"\n") }
然而這樣也會有一點問題,在這段代碼中,賦給 index 的值不是實際的數字,而是字符串“0”、 “1”、 “2”,此時很可能在無意之間進行字符串算數計算,例如:“2”+1==“21”,這給編碼帶來極大的不便。還有,在某些情況下,這段代碼可能按照隨機順序遍歷數組元素。
方法4:下面我的ES6方法登場了,就是使用for-of方法。
for(var val of arr){ console.log(val+"\n") }
是不是很簡潔,而且也不存在上述方法那樣的缺陷。
5.some()
var arr = [1, 2, 3]; arr.some((item, index, arr) => { // item為數組中的元素,index為下標,arr為目標數組 console.log(item); // 1, 2, 3 console.log(index); // 0, 1, 2 console.log(arr); // [1, 2, 3] })
some作為一個用來檢測數組是否滿足一些條件的函數存在,同樣是可以用作遍歷的函數簽名同forEach,有區別的是當任一callback返回值匹配為true則會直接返回true,如果所有的callback匹配均為false,則返回false。
some() 方法會依次執行數組的每個元素:
- 如果有一個元素滿足條件,則表達式返回true , 剩余的元素不會再執行檢測。
- 如果沒有滿足條件的元素,則返回false。
7. every()
var arr = [1, 2, 3]; arr.every((item, index, arr) => { // item為數組中的元素,index為下標,arr為目標數組 return item > 0; // true return index == 0; // false })
every() 方法用於檢測數組所有元素是否都符合指定條件(通過函數提供)。
every() 方法使用指定函數檢測數組中的所有元素:
- 如果數組中檢測到有一個元素不滿足,則整個表達式返回 false ,且剩余的元素不會再進行檢測。
- 如果所有元素都滿足條件,則返回 true。
8. for...in...遍歷
var arr = [1, 2, 3] for(var item in arr) { // item遍歷數組時為數組的下標,遍歷對象時為對象的key值 console.log(item); // 0, 1, 2 };
for...in更多是用來遍歷對象,很少用來遍歷數組, 不過 item 對應與數組的 key值,建議不要用該方法來遍歷數組,因為它的效率是最低的。
9. filter()
var arr = [1, 2, 3]; arr.filter(item => { // item為數組當前的元素 return item > 1; // [2, 3] })
filter() 方法創建一個新的數組,新數組中的元素是通過檢查指定數組中符合條件的所有元素。
10. map()
var arr = [1, 2, 3]; arr.map(item => { // item為數組的元素 console.log(item); // 1, 2, 3 return item * 2; // 返回一個處理過的新數組[2, 4, 6] })
map() 方法返回一個新數組,數組中的元素為原始數組元素調用函數處理后的值。
map() 方法按照原始數組元素順序依次處理元素。
這種方式也是用的比較廣泛的,雖然用起來比較優雅,但實際效率還比不上foreach
上述簡單的介紹了各種遍歷的方法。