技術文章 » JavaScript中陣列常用的7種迭代處理方法總結

JavaScript中陣列常用的7種迭代處理方法總結

2022-08-04 14:00:37
本篇文章給大家帶來了關於的相關知識，其中主要介紹了關於JavaScript中陣列常用的7種迭代處理方法的相關問題，下面一起來看一下，希望對大家有幫助。

【相關推薦：、】

1.map()方法

1.1應用場景:利用某種規則對映一個新的陣列(遍歷陣列中每一個元素,並對每一個元素做對應的處理,返回一個新的陣列)

例如:將陣列中的每一個元素+1

 let arr = [10, 20, 30, 40, 50]
 //item陣列每一項的值,index陣列的下標
 let newArr = arr.map((item, index) => {
      return item + 1
    })
    console.log(newArr)//[11, 21, 31, 41, 51]

1.2注意點:

(1).回撥函數的執行次數等於陣列長度

(2).map函數返回的新陣列長度等於原陣列長度

(3).回撥函數中一定要return,返回的是當前遍歷的元素值,如果不return,新陣列的每一個元素都是undefined

2.forEach()方法

2.1應用場景:用於遍歷陣列,相當於for迴圈的另一種寫法

 let arr = [10, 20, 30, 40, 50]
    arr.forEach((item, index) => {
      console.log(`下標為${index}的元素是${item}`)
    })
 //控制檯列印結果
 //下標為0的元素是10
 //下標為1的元素是20
 //下標為2的元素是30
 //下標為3的元素是40
 //下標為4的元素是50

2.2注意點:

(1).回撥函數的執行次數等於陣列長度

(2).forEach函數沒有返回值

(3).回撥函數不需要return,就算手動return,也不會結束迴圈

3.filter()方法

3.1應用場景:用於篩選陣列中滿足條件的元素,返回篩選後的新陣列

例如:找出陣列中的偶數

 let arr = [1, 2, 3, 4, 5, 6, 7, 8]
 let newArr = arr.filter((item, index) => {
 	//return一個布林值
      return item % 2 == 0
    })
    console.log(newArr)//[2,4,6,8]

3.2注意點:

(1).回撥函數的執行次數等於陣列長度

(2).filter函數返回的新陣列長度不等於原陣列長度

(3).回撥函數一定要return一個布林值,如果return的值為true,當前遍歷的元素就會新增到新陣列中,如果return的值為false,則不會新增到新陣列中

4.some()方法

4.1應用場景:用於判斷陣列中是否存在滿足條件的元素

例如:判斷陣列中是否存在大於100的數(存在,返回值為true,不存在,返回值為false)

let arr = [10, 50, 150, 200, 60, 30]
let bol = arr.some((item, index) => {
      return item > 100
    })
    console.log(bol)//true

4.2注意點:

(1).回撥函數的執行次數不等於陣列長度

(2).some函數的返回值是一個布林值

(3).回撥函數返回布林型別值用於結束遍歷,如果return的值為true,則遍歷結束,且some函數的返回值為false,如果return的值為false,則繼續遍歷,且some函數的返回值為false

5.every()方法

5.1應用場景:用於判斷陣列中是否所有元素都滿足條件(開關思想),與some()方法功能相似,可以對比理解

例如:判斷陣列中是否所有元素都大於100(都大於100,返回值為true,只要有一個元素小於100,則返回值為false)

let arr = [10, 50, 150, 200, 60, 30]
let bol = arr.every((item, index) => {
      return item > 100
    })
    console.log(bol)//false

5.2注意點:

(1).回撥函數的執行次數不等於陣列長度

(2).every函數的返回值是一個布林值

(3).回撥函數返回布林型別值用於結束遍歷,如果return的值為true,則遍歷繼續,且every函數的返回值為true,如果return的值為false,則繼續結束,且every函數的返回值為false

6.findIndex()方法

6.1應用場景:適用於陣列中元素為物件型別,比傳統的for迴圈要高效

6.2作用:獲取符合條件的第一個元素位置(下標)

let arr = [
            { name: '張三', age: 20 },
            { name: '李四', age: 30 },
            { name: '王五', age: 25 },
            { name: '趙六', age: 33 },
            { name: '小七', age: 10 },
        ];
 let i=arr.findIndex((item,index)=>{
	return item.age>30
})
//列印的i為符合條件的第一個元素下標
console.log(i)//3

6.2注意點:

(1).如果return的值為true,則遍歷結束,findIndex方法返回值為當前的index值;如果return的值為false,則遍歷繼續,如果陣列全部遍歷完還是沒有返回true,則findIndex方法返回值為-1

7.reduce()方法

7.1應用場景:陣列求和/平均值/最大值/最小值

7.2作用:遍歷陣列元素,為每一個元素執行一次回撥函數

//陣列求和
let arr = [10, 20, 30, 40]
//sum:初始值,預設為陣列的第一個元素
//item:陣列的每一個元素,預設為陣列的第二個元素
let getSum = arr.reduce((sum, item) => {
 //這裡必須要return，相當於把本次計算得結果賦值給下一次得sum : sum = sum + item;
      return sum + item
    })
    console.log(getSum)//100

7.2注意點:

(1).最好給一個初始值，避免空陣列報錯

//陣列求和
let arr = [10, 20, 30, 40]
//加了初始值0之後,此時sum開始預設為0,item則預設為陣列的第一個元素
let getSum = arr.reduce((sum, item) => {
 //這裡必須要return，相當於把本次計算得結果賦值給下一次得sum : sum = sum + item;
      return sum + item
    },0)
    console.log(getSum)//100

//陣列求最大值
 let max = arr.reduce((sum, item) => {
      return Math.max(sum, item)
    }, 0)
    console.log(max)//40

這裡特別注意的是,每一輪的sum值是上一輪的返回值

8.總結

在這裡插入圖片描述

擴充套件範例：

arr.reduce(function(sum,value,index,arr){}) 方法

reduce() 方法接收一個函數作為累加器，陣列中的每個值（從左到右）開始縮減，最終計算為一個值。

reduce() 可以作為一個高階函數，用於函數的 compose。

注意: reduce() 對於空陣列是不會執行回撥函數的。

引數詳情
sum第一個引數第一次為陣列的第一個陣列元素的值（下標為0），依次往後是返回計算結果的值
value 第二個引數開始為陣列元素第二個的值（下標為1），依次往後迴圈
index第三個引數依次為陣列元素的下標
arr第四個引數為陣列的整體
initialValue為第一引數的預設值，設定的話，第一個引數的預設值為initialValue的值，則 第二個引數則將使用陣列第一個元素（下標為0 ），沒有設定的話，第一個引數將使用陣列第一個元素，而 第二個引數 將使用陣列第二個元素。
function sum(arr){
    return arr.reduce(function(sum,value,index,arr){
    	console.log(sum);
        console.log(value);
        console.log(index);
        console.log("~~")
        console.log(arr)
        return sum+y    },initialValue)}console.log(sum([1,2,3,4,5]))

arr.every(function(value,index,arr){})

every() 方法用於檢測陣列所有元素是否都符合指定條件（通過函數提供）。
every() 方法使用指定函數檢測陣列中的所有元素：
如果陣列中檢測到有一個元素不滿足，則整個表示式返回 false ，且剩餘的元素不會再進行檢測。
如果所有元素都滿足條件，則返回 true。
注意： every() 不會對空陣列進行檢測。
注意： every() 不會改變原始陣列。
引數詳情
value陣列元素
index陣列下標
arr當前陣列的整體
function sum(arr){
    return arr.every(function(value,index,arr){
        console.log(value);
        console.log(index);
        console.log("~~")
        return value>=1
    })}console.log(sum([1,2,3,4,5]))

arr.some(function(value,index,arr){})

some() 方法用於檢測陣列中的元素是否滿足指定條件（函數提供）。
some() 方法會依次執行陣列的每個元素：
如果有一個元素滿足條件，則表示式返回true , 剩餘的元素不會再執行檢測。
如果沒有滿足條件的元素，則返回false。
注意： some() 不會對空陣列進行檢測。
注意： some() 不會改變原始陣列。
引數詳情
value陣列元素
index陣列下標
arr當前陣列的整體
function sum(arr){
    return arr.some(function(value,index,arr){
        console.log(value);
        console.log(index);
        console.log("~~")
        return value>=1
    })}console.log(sum([1,2,3,4,5]))

arr.filter(function(value,index,arr){})

filter()方法過濾查詢全部，對陣列元素進行判斷，滿足條件的會組成一個新的陣列返回
注意:如果都不符合條件，會得到一個空陣列
注意：如果所有元素都符合條件，會得到一個包含所有元素的新陣列它與原陣列進行===或==比較會得到false
引數詳情
value陣列元素
index陣列下標
arr當前陣列的整體
function sum(arr){
    return arr.filter(function(value,index,arr){
        console.log(value);
        console.log(index);
        console.log("~~")
        return value>=5
    })}console.log(sum([1,2,3,4,5]))

arr.map(function(value,index,arr){})

map對陣列元素進行迴圈，有返回值，返回值會組成一個新的陣列
注意：map可以處理一對一的元素對映
引數詳情
value陣列元素
index陣列下標
arr當前陣列的整體
const source = [1,2,3,4]const target = source.map(n=>({id:n,label:`label${n}`}))console.log(target)
function sum(arr){
    return arr.map(function(value,index,arr){
        console.log(value);
        console.log(index);
        console.log("~~")
        return value>=1
    })}console.log(sum([1,2,3,4,5]))

arr.forEach(function(value,index,arr){})

forEach()方法對陣列元素進行迴圈，沒有返回值和for迴圈的功能一樣，但是不能使用break和countinue
注意：map和forEach的區別：map有返回值，forEach沒有返回值
引數詳情
value陣列元素
index陣列下標
arr當前陣列的整體
function sum(arr){
    return arr.forEach(function(value,index,arr){
        console.log(value);
        console.log(index);
        console.log("~~")
        return value>=1
    })}console.log(sum([1,2,3,4,5]))

【相關推薦：、】

以上就是JavaScript中陣列常用的7種迭代處理方法總結的詳細內容，更多請關注TW511.COM其它相關文章！