1. 程式人生 > 其它 >JS遍歷陣列元素的方法(包含es6)

JS遍歷陣列元素的方法(包含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

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