es6中迭代數(shù)組的方法有哪些

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

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、網(wǎng)站設(shè)計服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)垣曲免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

迭代方法：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ù)組元素，為每一個元素執(zhí)行一次回調(diào)函數(shù)。

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

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

1、map()方法

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

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

應(yīng)用場景：

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

• (2)將數(shù)組中的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)
  // 返回處理后的新數(shù)組   [8, 16, 24, 32, 40]

2、filter()方法

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

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

應(yīng)用場景：

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

• (2)商品價格篩選

示例：

 //需求： 篩選數(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()方法

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

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

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

示例：

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

4、some()方法

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

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

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

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

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

應(yīng)用場景：

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

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

示例：判斷是否全是偶數(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)用場景：

• (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ù)組元素，為每一個元素執(zhí)行一次回調(diào)函數(shù)

應(yī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ù)組中搜素符合某個條件的元素。對every()來說，傳入的參數(shù)必須對每一項都返回true，它才會返回true。而對于some()來說，只要有一項讓傳入的函數(shù)返回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()方法

這個方法基于給定的函數(shù)來決定每一項是否應(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，因為只有對這些項傳入的函數(shù)才返回 true，這個方法非常適合從數(shù)組中篩選滿足給定條件的元素，也是非常常用的迭代方法。

map()

map()方法也是返回一個數(shù)組。這個數(shù)組的每一項都是對原始數(shù)組中同樣位置的元素運行傳入函數(shù)而返回的結(jié)果，例如，可以將數(shù)組中的每一項都乘以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

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

forEach()

最后看一看forEach這個方法，這個方法只會對每一項運行傳入的函數(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

關(guān)于“es6中迭代數(shù)組的方法有哪些”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“es6中迭代數(shù)組的方法有哪些”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章標(biāo)題：es6中迭代數(shù)組的方法有哪些
URL鏈接：http://muchs.cn/article6/jejpig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、虛擬主機(jī)、ChatGPT、外貿(mào)建站、云服務(wù)器、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)