js中map和forEach的用法

---

前言

編碼過程中一直分不清map和forEach的區別，閑下來，弄幾個例子研究一下。

---

一、map

1.簡單數組

    const a = [ 5, 7, 10, ]
    const mapA = a.map((item, index, arr) => {
    
      console.log(item, index, arr)
      return item * 2
    })
    console.log(mapA)

輸出：

2.對象數組

    const c = [
      {
    
        key: 'key1',
        value: 'value1',
      },
      {
    
        key: 'key2',
        value: 'value2',
      },
    ]
    const mapC = c.map((item, index, arr) => {
    
      console.log(item, index, arr)
      let res = this.$deepCopy(item)
      res.value += index
      return res
    })
    console.log(c)
    console.log(mapC)

輸出：

所以事實上map不僅可以遍曆數組，還可以返回一個新數組。

3.修改簡單數組內容

    const a = [ 5, 7, 10, ]
    const mapA = a.map((item, index, arr) => {
    
      console.log(item, index, arr)
      arr[index] = item * 2
      return item * 2
    })
    console.log(a)
    console.log(mapA)

輸出：

4.修改對象數組內容

    const c = [
      {
    
        key: 'key1',
        value: 'value1',
      },
      {
    
        key: 'key2',
        value: 'value2',
      },
    ]
    const mapC = c.map((item, index, arr) => {
    
      console.log(item, index, arr)
      let res = item
      res.value += index
      return res
    })
    console.log(c)
    console.log(mapC)

輸出：

可見，對象數組在遍曆的過程中，修改屬性的值就可以影響到原數組

map的其他用法詳見文檔

二、forEach

1.簡單數組

    const a = [ 5, 7, 10, ]
    a.forEach((item, index, arr) => {
    
      arr[index] = item * 2
      console.log(item, index, arr)
    })
    console.log(a)

輸出：

2.對象數組

    const c = [
      {
    
        key: 'key1',
        value: 'value1',
      },
      {
    
        key: 'key2',
        value: 'value2',
      },
    ]
    c.forEach((item, index, arr) => {
    
      console.log(item, index, arr)
      item.value += index
    })
    console.log(c)

輸出：

可見，對象數組在遍曆的過程中，修改屬性的值就可以影響到原數組

3.forEach() 的 continue 與 break

詳見文檔

---