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
上述簡單的介紹了各種遍歷的方法。