遍歷數組中的元素(含es6方法)


  假如有這樣一個數組。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

 

 

  上述簡單的介紹了各種遍歷的方法。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM