js--数组的map()方法的使用

javaScript中Array.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等等好多看起来高大上的方法，不光要学会，更重要是在代码中运用到，继续加油！明天又是充满希望的一天！！！！