es6中迭代數組的方法有哪些

這篇文章主要介紹了es6中迭代數組的方法有哪些的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇es6中迭代數組的方法有哪些文章都會有所收獲，下面我們一起來看看吧。

迭代方法：1、map，用于根據某種規則映射數組，得到映射之后的新數組；2、filter，用于根據判斷的條件，進行元素篩選；3、forEach，相當于使用for循環遍歷數組；4、some，用于判斷數組中是否有滿足條件的元素；5、every，用于判斷數組中是否所有元素都滿足條件；6、findIndex，用于找元素下標；7、reduce，可遍歷數組元素，為每一個元素執行一次回調函數。

Array應該是es6中最常用的類型了，它和其他語言中的數組一樣也是一組有序的數據，但是不同的是，ECMAscript數組中數組的每個槽位可以儲存任意類型的數據，意思就是說，我們可以在第一個槽位中儲存字符串，第二個是數值，第三個是對象。而ECMAscript數組中最常使用的就是迭代方法，下面為大家詳細介紹一下。

ES6數組的7種迭代方法

1、map()方法

對數組每一項都傳入運行函數，返回由每次函數調用的結果構成的數組。

作用: 根據某種規則映射數組，得到映射之后的新數組

應用場景：

• (1)數組中所有的元素 * 0.8

• (2)將數組中的js對象，映射成 html字符串

示例：

 const arr = [10,20,30,40,50]
  // 完整寫法
  // let res = arr.map((item,index)=>{
  //     return item * 0.8
  //   })
  // 熟練寫法
   let res = arr.map(item=>item*0.8)
    console.log(res)
  // 返回處理后的新數組   [8, 16, 24, 32, 40]

2、filter()方法

對數組每一項都傳入運行函數，函數返回true的項會組成數組之后返回。

作用：根據判斷的條件，進行篩選。

應用場景：

• (1)篩選數組中的偶數

• (2)商品價格篩選

示例：

 //需求： 篩選數組里的偶數
    const arr = [10,20,33,44,55]
    // let res =  arr.filter(item=>{
    //   if(item % 2 == 0){
    //     return true
    //   } else{
    //     return false
    //   }
    // })
    // console.log(res)
    let res1 = arr.filter(item => item % 2==0)
    console.log(res1) // [10, 20, 44]

3、forEach()方法

對數組每一項都傳入運行函數，沒有返回值。

作用：相當于 for循環另一種寫法

應用場景：遍歷數組

示例：

 // 類似for循環遍歷
      const arr = [13,22,10,55,60]
      arr.forEach((item,index)=>{
        console.log(item,index)
        // item->數組里每一個元素
        // index->對應的下標
      })

4、some()方法

對數組每一項都傳入運行函數，若有一項函數返回true，則這個方法返回true。

作用：判斷數組中是否有滿足條件的元素 (邏輯或 ||, 有任意一個滿足即可)

應用場景：

• (1)判斷數組中有沒有奇數

• (2)非空判斷 : 判斷表單數組中，有沒有元素value為空

示例：判斷是否有奇數

 // 判斷是否有奇數
    const arr = [10,20,30,40,50]
  //  let res =  arr.some(item=>{
  //     if(item % 2 == 1){
  //       return true
  //     } else{
  //       return false
  //     }
  //   })
    let res = arr.some(item =>item % 2 == 1)
    console.log(res)
   //  true: 有滿足條件的元素
   //  false: 沒有滿足條件的元素

5、every()方法

對數組每一項都傳入運行函數，若每一項都返回true，則這個方法為true。

作用：判斷數組中是否 所有元素 都滿足條件 (邏輯&&, 全部滿足)

應用場景：

• (1)判斷數組中是否所有元素都是 偶數

• (2)開關思想 : 購物車是否全選

示例：判斷是否全是偶數

 // 判斷是否全是偶數
      const arr = [10,20,30,40,50]
  //  let res =  arr.some(item=>{
  //     if(item % 2 == 1){
  //       return true
  //     } else{
  //       return false
  //     }
  //   })
    let res = arr.every(item =>item % 2 == 0)
    console.log(res)
   // true: 所有滿足都滿足條件
   // false: 有元素不滿足條件

6、findIndex()方法

作用：找元素下標

應用場景：

• (1)如果數組中是值類型，找元素下標用： arr.indexOf( 元素 )

• (2)如果數組中是引用類型，找元素下標： arr.findIndex( )

示例：

 /*
     arr.findIndex()查詢數組下標
      如果找到目標元素，則返回改數組的下標
      如果沒找到，則返回固定值-1
      */
    let arr = [
      {name:'李四',age:20},
      {name:'王五',age:20},
      {name:'張三',age:20},
    ]
 
  let index = arr.findIndex(item=>item.name == '王五')
  console.log(index)

7、reduce()方法

作用：遍歷數組元素，為每一個元素執行一次回調函數

應用場景：數組求和/平均值/最大值/最小值

示例：

 const arr = [10,20,30,40,50]
   let res =  arr.reduce((sum,item,index)=>{
      return sum + item
      // console.log(sum,item,index)
    },0)

方法的區別與細節

every()和some()

這些方法中，every()和some()是最相似的，都是從數組中搜素符合某個條件的元素。對every()來說，傳入的參數必須對每一項都返回true，它才會返回true。而對于some()來說，只要有一項讓傳入的函數返回true，它就返回true，下面舉個例子：

let numbers = [2,1,4,3,5,4,3];

let everyResult = numbers.every((item,index,array) => item >2);
console.log(everyResult);  // false

let someResult = numbers.some((item,index,array) => item >2);
console.log(someResult);  // true

filter()方法

這個方法基于給定的函數來決定每一項是否應該包含在它返回的數組中。例如：

let numbers = [2,1,4,3,5,4,3];
let filterResult = numbers.filter((item,index,array) => item >2);
console.log(filterResult);  // 4,3,5,4,3

這里filter返回的數組包含了4,3,5,4,3，因為只有對這些項傳入的函數才返回 true，這個方法非常適合從數組中篩選滿足給定條件的元素，也是非常常用的迭代方法。

map()

map()方法也是返回一個數組。這個數組的每一項都是對原始數組中同樣位置的元素運行傳入函數而返回的結果，例如，可以將數組中的每一項都乘以2，并返回包含所有結果的數組，如下：

let numbers = [2,1,4,3];
let mapResult = numbers.map((item,index,array) => item *2);
console.log(mapResult);  // 4,2,8,6

這個方法返回的數組包含了原始數組中每給數值乘以2的結果。這個方法很適應于創建一個與原數組一一對應的新數組。

forEach()

最后看一看forEach這個方法，這個方法只會對每一項運行傳入的函數，沒有返回值。其實，本質上，forEach()方法相當于使用for循環遍歷數組。例如：

let numbers = [2,1,4,3];
numbers.forEach((item,index,array) => {
console.log(item)
}); // 2,1,4,3

關于“es6中迭代數組的方法有哪些”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“es6中迭代數組的方法有哪些”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。