迭代方法：1、map，用于根據(jù)某種規(guī)則映射數(shù)組，得到映射之后的新數(shù)組；2、filter，用于根據(jù)判斷的條件，進(jìn)行元素篩選；3、forEach，相當(dāng)于使用for循環(huán)遍歷數(shù)組；4、some，用于判斷數(shù)組中是否有滿足條件的元素；5、every，用于判斷數(shù)組中是否所有元素都滿足條件；6、findIndex，用于找元素下標(biāo)；7、reduce，可遍歷數(shù)組元素，為每一個(gè)元素執(zhí)行一次回調(diào)函數(shù)。

前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

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

ES6數(shù)組的7種迭代方法

1、map()方法

對(duì)數(shù)組每一項(xiàng)都傳入運(yùn)行函數(shù)，返回由每次函數(shù)調(diào)用的結(jié)果構(gòu)成的數(shù)組。

作用: 根據(jù)某種規(guī)則映射數(shù)組，得到映射之后的新數(shù)組

應(yīng)用場(chǎng)景：

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

• (2)將數(shù)組中的js對(duì)象，映射成 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)   // 返回處理后的新數(shù)組   [8, 16, 24, 32, 40]

2、filter()方法

對(duì)數(shù)組每一項(xiàng)都傳入運(yùn)行函數(shù)，函數(shù)返回true的項(xiàng)會(huì)組成數(shù)組之后返回。

作用：根據(jù)判斷的條件，進(jìn)行篩選。

應(yīng)用場(chǎng)景：

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

• (2)商品價(jià)格篩選

示例：

 //需求： 篩選數(shù)組里的偶數(shù)     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()方法

對(duì)數(shù)組每一項(xiàng)都傳入運(yùn)行函數(shù)，沒有返回值。

作用：相當(dāng)于 for循環(huán)另一種寫法

應(yīng)用場(chǎng)景：遍歷數(shù)組

示例：

 // 類似for循環(huán)遍歷       const arr = [13,22,10,55,60]       arr.forEach((item,index)=>{         console.log(item,index)         // item->數(shù)組里每一個(gè)元素         // index->對(duì)應(yīng)的下標(biāo)       })

4、some()方法

對(duì)數(shù)組每一項(xiàng)都傳入運(yùn)行函數(shù)，若有一項(xiàng)函數(shù)返回true，則這個(gè)方法返回true。

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

應(yīng)用場(chǎng)景：

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

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

示例：判斷是否有奇數(shù)

 // 判斷是否有奇數(shù)     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()方法

對(duì)數(shù)組每一項(xiàng)都傳入運(yùn)行函數(shù)，若每一項(xiàng)都返回true，則這個(gè)方法為true。

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

應(yīng)用場(chǎng)景：

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

• (2)開關(guān)思想 : 購(gòu)物車是否全選

示例：判斷是否全是偶數(shù)

 // 判斷是否全是偶數(shù)       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()方法

作用：找元素下標(biāo)

應(yīng)用場(chǎng)景：

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

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

示例：

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

7、reduce()方法

作用：遍歷數(shù)組元素，為每一個(gè)元素執(zhí)行一次回調(diào)函數(shù)

應(yīng)用場(chǎng)景：數(shù)組求和/平均值/最大值/最小值

示例：

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

方法的區(qū)別與細(xì)節(jié)

every()和some()

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

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()方法

這個(gè)方法基于給定的函數(shù)來決定每一項(xiàng)是否應(yīng)該包含在它返回的數(shù)組中。例如：

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返回的數(shù)組包含了4,3,5,4,3，因?yàn)橹挥袑?duì)這些項(xiàng)傳入的函數(shù)才返回 true，這個(gè)方法非常適合從數(shù)組中篩選滿足給定條件的元素，也是非常常用的迭代方法。

map()

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

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

這個(gè)方法返回的數(shù)組包含了原始數(shù)組中每給數(shù)值乘以2的結(jié)果。這個(gè)方法很適應(yīng)于創(chuàng)建一個(gè)與原數(shù)組一一對(duì)應(yīng)的新數(shù)組。

forEach()

最后看一看forEach這個(gè)方法，這個(gè)方法只會(huì)對(duì)每一項(xiàng)運(yùn)行傳入的函數(shù)，沒有返回值。其實(shí)，本質(zhì)上，forEach()方法相當(dāng)于使用for循環(huán)遍歷數(shù)組。例如：

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

【