map 方法使用场景

166 阅读2分钟

「这是我参与2022首次更文挑战的第13天,活动详情查看:2022首次更文挑战

平时大家在项目开发中使用的是map多 还是foreach多?

map 方法使用场景问题

map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

衍生出的问题 :   

[‘1’,‘2’,‘3’].map(parseInt)返回结果是什么? // ** [1, NaN, NaN]     不是[1,2,3]

parseInt(string, radix). // 接收两个参数,第一个表示被处理的值(字符串),第二个表示为解析时的基数,

radix是一个介于2-36之间的整数,返回解析后的整数值。 如果被解析参数的第一个字符无法被转化成数值类型,则返回 NaN

以第二个参数为基数来解析第一个参数字符串,通常用来做十进制的向上取整(省略小数)如:parseInt(2.7) //结果为2

parseInt(‘1’, 0); // radix为0时,使用默认的10进制。    // radix为0时,且string参数不以“0x”和“0”开头时,按照10为基数处理**

**parseInt(‘2’, 1); // radix值范围在2-36,这里 radix 为 1,超出区间范围,所以结果为 NaN**

**parseInt(‘3’, 2); // 基数为2,2进制数表示的数中应以 0 和 1 开头,(01→ 0*2^1+1*2^0),无法解析,返回NaN

map 与foreach的区别

  • map的执行速度比foreach更快 优先
  • map会返回得到的执行结果 所以会被分配内存空间存储这个执行结果
  • foreach不会返回 return的是undefined 不能链式调用 也不能用break,会直接报错
  • map的返回结果是数组 可以链式操作 可以与其他方法(如reduce()sort()filter())链接在一起,以便在一条语句中执行多个操作
  • map和foreach 都这两种方法都不能用 break 中断,否则会引发异常
  • 每次执行匿名函数都支持三个参数,参数分别为item(当前每一项),index(索引值),arr(原数组)

关于参数的说明 map的参数

array.map(function(currentValue,index,arr), thisValue)

image.png

foreach的参数

array.forEach(function(currentValue, index, arr), thisValue)

image.png

map的使用场景有很多 比如改变数组对象里面的某一个值

a = [3,4,5]
b = a.map(i=>i+4)

a
//[3, 4, 5]

b
//[7, 8, 9]

a = [{startTime: "请选择", endTime: "请选择", index: 1, overOneDay: 1},{startTime: "请选择", endTime: "请选择", index: 2, overOneDay: 1}]

a.map(i=>{
    i.index==2?i.startTime="11:22":null
    return i
})

a的值就是
 //{startTime: "请选择", endTime: "请选择", index: 1, overOneDay: 1}
// {startTime: "11:22", endTime: "请选择", index: 2, overOneDay: 1}