JS中陣列遍歷方法foreach,filter,some,every,map方法介紹與總結
利用js可以實現對陣列中各個元素的遍歷,我們已知的陣列遍歷的方法有很多,這裡只總結了一部分比較常用的方法供大家參考,其他有遺漏的方法以及詳細的步驟可以去翻閱官方文件去查詢:
1.forEach遍歷
缺點:不能使用 break 語句來跳出迴圈,也不能使用 return 語句來從閉包函式中返回。
程式碼如下:
var arr = [1, 2, 3, 4, 5, 6]
arr.forEach(function(item,index,arr){
console.log(item); //陣列的每一項
console.log(index); //陣列每一項的索引號
console.log(arr); //陣列
})
2.filter遍歷
filter() 方法建立一個新的陣列,新陣列中的元素是通過檢查指定陣列中符合條件的所有元素,當然它也是一個陣列遍歷的方法,與方法一大同小異,程式碼如下:
var arr = [1, 2, 3, 4, 5, 6]
var str = arr.filter(function(itme,index,arr){
//console.log(item); //陣列的每一項
//console.log(index); //陣列每一項的索引號
//console.log(arr); //陣列
return (item > 3)
})
console.log(str) //[4,5,6]
3.some遍歷
some()方法用於檢測陣列中的元素是否滿足指定條件,並會依次執行陣列的每個元素,如果有一個元素滿足條件則表示式返回ture,剩餘元素不會再執行檢測,如果沒有滿足條件的元素,則返回false。程式碼如下:
var arr = [1, 2, 3, 4, 5, 6]
console.log(arr.some(function (item, index, array) {
console.log('item=' + item + ',index=' + index + ',array=' + array);
return item > 3;
//輸出結果如下
item=1,index=0,array=1,2,3,4,5,6
item=2,index=1,array=1,2,3,4,5,6
item=3,index=2,array=1,2,3,4,5,6
item=4,index=3,array=1,2,3,4,5,6
true //當檢測到陣列中的第四個子元素滿足return條件時,後續元素將不再執行檢測,這時表示式返回ture
}));
4.every遍歷
every()方法用於檢測陣列所有元素是否都符合指定條件,使用指定函式檢測陣列中的所有元素,如果檢測到陣列中有一個元素不能滿足,則整個表示式返回false,且剩餘的元素不會再進行檢測,如果所有元素都滿足條件則返回ture。程式碼如下:
var arr = [1, 2, 3, 4, 5, 6]
console.log(arr.every(function (item, index, array) {
console.log('item=' + item + ',index=' + index + ',array=' + array);
return item > 3;
//輸出結果如下:
item=1,index=0,array=1,2,3,4,5,6
false 當檢測到陣列中的第一個子元素無法滿足return的條件時,整個表示式返回false,且剩餘的元素不會再進行檢測
}));
5.map遍歷
map() 方法返回一個新陣列,陣列中的元素為原始陣列元素呼叫函式處理後的值。
map() 方法按照原始陣列元素順序依次處理元素。程式碼如下:
var arr = [0,2,4,6,8]
var str = arr.map(function(i,a,b){
//console.log(i); //陣列的每一項
// console.log(a); 陣列每一項的索引號
// console.log(b); 陣列
return (i / 2)
})
console.log(str); //[0,1,2,3,4]
相關文章
- 陣列的forEach,map,filter,reduce,reduceRight,every,some方法陣列Filter
- 一張圖看懂JavaScript中陣列的迭代方法:forEach、map、filter、reduce、every、someJavaScript陣列Filter
- JS中some、every、map、filterJSFilter
- 遍歷陣列的常用方法forEach,filter,map等陣列Filter
- 簡述forEach()、map()、filter()、every()、some()的用法Filter
- 簡述forEach()、map()、every()、some()和filter()的用法Filter
- ***PHP遍歷陣列的方法foreachPHP陣列
- JS中陣列與物件的遍歷方法例項JS陣列物件
- 遍歷物件和陣列的方法總結物件陣列
- JS中陣列的遍歷方法(3種)JS陣列
- JS遍歷方法總結JS
- 陣列遍歷方法陣列
- JS陣列方法總覽及遍歷方法耗時統計JS陣列
- React中兩種遍歷資料的方法(map、forEach)React
- js中陣列常用方法總結JS陣列
- JS迴圈遍歷方法總結JS
- JavaScript 的 4 種陣列遍歷方法: for VS forEach() VS for/in VS for/ofJavaScript陣列
- Java中Map的遍歷方法Java
- JS陣列方法總結JS陣列
- js與jquery常用陣列方法總結JSjQuery陣列
- java陣列遍歷的方法Java陣列
- js陣列常用方法總結JS陣列
- JS-陣列方法總結JS陣列
- javascript遍歷方法總結JavaScript
- [譯] 圖解 Map、Reduce 和 Filter 陣列方法圖解Filter陣列
- JavaScript遍歷方法總結與對比JavaScript
- 遍歷陣列的幾種方法陣列
- Jvascript陣列迭代,遍歷的方法陣列
- 在PHP中陣列遍歷的三種方法PHP陣列
- 陣列的三種宣告方式總結、多維陣列的遍歷、Arrays類的常用方法總結陣列
- forEach、map、filter、find、sort、some等易錯點整理Filter
- 利用c:forEach標籤遍歷陣列陣列
- java中遍歷map的集中方法Java
- java中遍歷Map的4種方法Java
- JavaScript陣列方法總結(中)JavaScript陣列
- JS 陣列中常用方法總結JS陣列
- ios 遍歷陣列的八種方法iOS陣列
- JavaScript 陣列遍歷方法的對比JavaScript陣列