目录

  • map是什么
  • map方法的结构及入参
  • 语法糖
  • map一般不改变原数组


map是什么

map是操作js数组的方法，也可以说是一个函数，作用是遍历整个数组，对里面的每个值做处理再返回一个新的值。

注意，除非使用map数组里面存在嵌套复杂的对象、数组结构，否则map是不会修改原数组的

map方法的结构及入参

map的入参需要传递一个函数进去，因为说它是可以遍历数组的，所以传入的这个函数调用的次数由数组的长度决定，长度是3就是3次，是4就是4次。

//index可以不传
[1,2,3].map(function(item,index){
    //这个数组长度是3所以函数调用3次
    //item指的遍历到的对应的数组值 函数调用的三次中 第一次是1 ，然后是2、3
    //index是数组的索引，三次分别是0，1，2
})

上面的例子意思就是map里面的函数运行了3次，分别是function(1,0)、function(2,1)、function(3,2)。

然后你可以做什么呢，可以在函数里面return（return的内容将作为新值代替数组遍历到的旧值item），比如将函数里面的值都变成原来的两倍：

let b=[1,2,3].map(function(item,index){
   return item*2
})
console.log(b)//[2,4,6]

语法糖

es6给我们提供了一些便利，比如箭头函数()=>{} 我们可以用箭头函数替代原来的函数：

let b=[1,2,3].map((item,index)=>{
   return item*2
})
console.log(b)//[2,4,6]

用箭头函数有什么好处呢，如果里面不用进行复杂的判断，我们可以将右边的{}改成表达式直接返回，省略return：

let b=[1,2,3].map((item,index)=> item*2 )
console.log(b)//[2,4,6]

因为在我们这里例子里面index索引值没用到所以我们可以不传，当入参只有一个时，前面的括号（）都可以省略。

let b=[1,2,3].map( item => item*2 )
console.log(b)//[2,4,6]

语法糖会让你的代码看起来更加高级优雅。

还有有时候你可能不想改变所有的值，比如我只想改变小于2的数字，其他的不变，那就进行判断不满足条件的把item原路返回：

let b=[1,2,3].map(item=>{
   if(item<2){
      return item*2
   }else{
      return item
   }
})
console.log(b)//[2,2,3]

当然你可以改成用三目运算。

let b=[1,2,3].map(item=>{
   //返回，当item<2的时候返回item*2否则返回item
   return item<2?item*2:item
})
console.log(b)//[2,2,3]

然后你又发现，它只有一个return，可以用语法糖。

let b=[1,2,3].map(item => item<2?item*2:item)
console.log(b)//[2,2,3]

map一般不改变原数组

除非是嵌套了对象或者数组的数组你直接修改了内部的引用地址，一般数组使用map是不会改变原数组的，你得找人接收。

let a=[1,2,3]
let b= a.map(item => item<2?item*2:item)
console.log(a)//[1,2,3]
console.log(b)//[2,2,3]