js--數組的map()方法的使用

前言

　　作為一個剛剛踏入前端世界的小白，工作中看到身邊同事大佬寫的代碼就像古詩一樣簡介整齊，而我的代碼如同一堆散沙，看上去毫無邏輯感，而且簡單的功能需要一大堆代碼才能實現，不僅加大了自己的工作量，同時也給調試和維護增加了很大難度。這里拿我的代碼和大佬的做一下對比

先上我的代碼

CategoriesApi().then((res) => {
        for (let i = 0; i < res.list.length; i++) {
         let item={}
             item.name=res.list[i].name
             item.price=res.list[i].price
               .........
             this.DataList.push(item)
          }
        }
      })                        

大佬們的代碼

async getCategories(params) {
      const { list = [] } = await Categories(params)
      this.DataList = [
        list.map((node) => {
          return {
            ...node
          }
        })
      ]
    }

所以這里需要說到今天的主角，數組的map用法，

語法及定義

           map() 方法返回一個新數組，數組中的元素為原始數組元素調用函數處理后的值。

　　　map() 方法按照原始數組元素順序依次處理元素

　　　我的理解就是map首先會創建一個新的數組，其中新數組的每一個元素就是原數組中每一個元素經過咱們設置的給定函數變化后的結果。也就是說對原始數組中的每一項運行給定的函數，然后按原數組的順序組裝成新的數組，該方法也不會改變原始的數組，還產生一個新數組。

　　    map()接收兩個參數：

　　　　第一個參數必填，為一個函數，就是上面所說的給定的函數（每一項執行的函數，必寫），這個給定的函數又有三個參數，第一個為當前元素的值（必寫），第二個參數是當前值的下標索引，第三個為當前元素屬於的數組對象（目前覺得沒啥用）。

　　　　 第二個參數非必填，thisValue，對象作為該執行回調時使用，傳遞給函數，用作 "this" 的值。如果省略了 thisValue，或者傳入 null、undefined，那么回調函數的 this 為全局對象。（目前還不會用）

簡單的實例

//定義一個函數，使得傳入的每一個值都加上2
    function add2(x,y,z){
        console.log(x+"=="+y+'=='+z);
        return x + 2
    }
    //定義一個數組
    var arr = [1,2,3,4,5,6]
    var newArr = arr.map(add2)
    console.log(newArr);

打印結果

1==0==1,2,3,4,5,6
2==1==1,2,3,4,5,6
3==2==1,2,3,4,5,6
4==3==1,2,3,4,5,6
5==4==1,2,3,4,5,6
6==5==1,2,3,4,5,6
(6) [3, 4, 5, 6, 7, 8]

進階實例

let  dataList = res.list.map(item => {
    return {
        name: item.name,
        sex: item.sex ==1? '男':'女',
        age: item.age
    }
})

或者也可以把return省去

const dateList=res.list.map(item => ({
    name:item.name,
    age:item.age
    })
);

　　別的高級的場景用法暫時還沒有碰到，我會繼續學習，逐步提高自己的代碼質量，不再僅僅是用到for循環這么low的寫法，還有forEach,for..in,for...of,,,set,filter,every,find等等好多看起來高大上的方法，不光要學會，更重要是在代碼中運用到，繼續加油！明天又是充滿希望的一天！！！！