JavaScript中數組常用的迭代處理方法有哪些

這篇文章主要介紹“JavaScript中數組常用的迭代處理方法有哪些”，在日常操作中，相信很多人在JavaScript中數組常用的迭代處理方法有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript中數組常用的迭代處理方法有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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() 對于空數組是不會執行回調函數的。

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() 不會改變原始數組。

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() 不會改變原始數組。

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

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可以處理一對一的元素映射

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沒有返回值

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中數組常用的迭代處理方法有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！