JS中陣列遍歷方法foreach,filter,some,every,map方法介紹與總結

Eric_freestyle發表於2020-11-05

利用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]

相關文章