js 陣列迴圈遍歷方法
在開發中經常和陣列打交道，處理各種邏輯，瞭解陣列遍歷的使用方法後，我們要學會在合適的場景使用適合的方法
for迴圈
1 const arr = [1,2,3,4,5,6,7,8,9] 2 for (i = 0; len = arr.length; i < len; i++) { 3 console.log ( arr[i] ) 4 }
for遍歷陣列索引，如果陣列中存在空元素，也會執行
可以使用return、break、continue跳出或中斷迴圈
forEach
1 arr.forEach((item, index, arr) = > {2 console.log ( item ) 3 })
可以接收三個引數=> item：陣列當前項的值，index：陣列當前項的索引，arr：陣列物件本身
forEach無法跳出迴圈(return、break、continue不起作用)
for ... of
1 const arr = [1,2,3,4,5,6,7,8,9] 2 for (const item of arr) { 3 if (item===3) break 4 console.log(item) // 1 2 5 } 6 7 const arr2 = [1,2,3,4,undefined,5,6,7]8 for (const item of arr2) { 9 if (item===6) break 10 console.log(item) // 1 2 3 4 undefined 5 11 }
es6支援
for ... of 與for一樣，如果遇到空元素同樣會執行
和for一樣可以使用return、break、continue終止迴圈
filter
1 const list = [ 2 {id:1, name:'張三', age:18}, 3 {id:2, name:'李四', age:22},4 {id:3, name:'趙六', age:30} 5 ] 6 const result = list.filter((item, index, arr)=>{ 7 return item.age === 22 8 })
可以接收三個引數=> item：陣列當前項的值，index：陣列當前項的索引，arr：陣列物件本身
filter配合return返回符合條件的新陣列元素不可自定義，不會改變原陣列，陣列長度和原陣列不同
map
1 const list = [ 2 {id:1, name:'張三', age:18}, 3 {id:4, name:'1111'}, 4 {id:2, name:'李四', age:22}, 5 {id:3, name:'趙六', age:30} 6 ] 7 const result = list.map((item, index, arr)=>{ 8 return item.age 9 })
console.log(result). // [{id:1, name:'張三', age:18},undefined,{id:2, name:'李四', age:22},{id:3, name:'趙六', age:30}]
可以接收三個引數=> item：陣列當前項的值，index：陣列當前項的索引，arr：陣列物件本身
有返回值，可以return出來
map返回新的陣列元素可自定義，不會改變原陣列，陣列與原來長度一致
some
1 const list = [ 2 {id:1, name:'張三', age:18}, 3 {id:4, name:'1111'}, 4 {id:2, name:'李四', age:22}, 5 {id:3, name:'趙六', age:30} 6 ] 7 const result = list.some((item, index, arr)=>{ 8 return item.age===22 9 })
可以接收三個引數=> item：陣列當前項的值，index：陣列當前項的索引，arr：陣列物件本身
配合return使用，返回布林值，某一元素滿足條件返回true，迴圈中斷，只有所有元素都不滿足條件才返回false
every
1 const list = [ 2 {id:1, name:'張三', age:18}, 3 {id:4, name:'1111'}, 4 {id:2, name:'李四', age:22}, 5 {id:3, name:'趙六', age:30} 6 ] 7 const result = list.every((item, index, arr)=>{ 8 return !item.age 9 })
可以接收三個引數=> item：陣列當前項的值，index：陣列當前項的索引，arr：陣列物件本身
配合return使用，返回布林值，與some相反，某一元素不滿足條件返回false，迴圈中斷，只有所有元素滿足條件才返回true
find
1 const list = [ 2 {id:1, name:'張三', age:18}, 3 {id:4, name:'1111'}, 4 {id:2, name:'李四', age:22}, 5 {id:3, name:'趙六', age:22} 6 ] 7 const result = list.find((item, index, arr)=>{ 8 return item.age===22 9 })
console.log(result). // {id:2, name:'李四', age:22}
可以接收三個引數=> item：陣列當前項的值，index：陣列當前項的索引，arr：陣列物件本身
配合return使用，返回第一個滿足條件的元素值，如果不存在返回undefined
findIndex
1 const list = [ 2 {id:1, name:'張三', age:18}, 3 {id:4, name:'1111'}, 4 {id:2, name:'李四', age:22}, 5 {id:3, name:'趙六', age:22} 6 ] 7 const result = list.findIndex((item, index, arr)=>{ 8 return item.age===22 9 }) 10 console.log(result). // 2
可以接收三個引數=> item：陣列當前項的值，index：陣列當前項的索引，arr：陣列物件本身
配合return使用，用於找出第一個符合條件的陣列成員位置（索引），如果沒有找到返回-1
reduce
1 // 陣列求和 2 const list = [ 3 {name:'張三', age:18}, 4 {name:'李四', age:62}, 5 {name:'王二', age:36}, 6 ] 7 const total = list.reduce((ageTotal, item) =>{ 8 return ageTotal + item.age 9 },0) 10 console.log(total) // 116 11 12 // 陣列去重 13 const list = [ 14 {name:'王二', age:36}, 15 {name:'張三', age:18}, 16 {name:'李四', age:62}, 17 {name:'王二', age:36}, 18 {name:'李四', age:62}, 19 ] 20 const obj = {} 21 const result = list.reduce((array, item)=>{ 22 if ( obj[item.name] ){ 23 obj[item.age]++ 24 return array 25 } 26 obj[item.name] = 1 27 return [...array, item] 28 },[]) 29 console.log(result) //[{name:'王二', age:36}, {name:'張三', age:18},{name:'李四', age:62}]
方法接收兩個引數，第一個回撥函式（callback），第二個是初始值
其中回撥函式接收四個引數：1、表示上一次回撥時的返回值，或者初始值，2、表示當前正在處理的陣列元素，3、表示當前正則處理的陣列元素的索引，若提供初始值，則索引為0，否則索引為1（如果傳入值為初始值，將從索引0開始，並從初始值的基礎上累計執行回撥函式，如果不傳入初始值，該方法會從索引1開始執行回撥函式），4、表示願陣列