JS中map和parseInt的用法详解-前端开发

这篇文章主要来和大家详细介绍一下JavaScript中map和parseInt的用法，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以了解一下

map

map方法用于创建一个新的数组(不改变原数组),这个新数组由原数组中的每个元素,调用map中的回调函数处理后的返回值组成!

参数

map(callbackFn, thisArg)

callbackFn 回调函数,数组中的每个元素都会调用该函数，对数据进行处理,处理完成的元素会被添加到新的数组中!callbackFn被调用时会传入如下参数:

item 当前正在处理的元素
index 当前正在处理的元素下标
arr 原数组

thisArg(可选) 用来修改this指向

使用

// 给数组中每一项增加一个label属性！
const arr = [{name:'测试1'},{name:'测试2'},{name:'测试3'}]
const newArr = arr.map(item=>{
  item.label = '通过map添加'
  return item
})
// 结果: newArr =  [{name:'测试1',label: "通过map添加"},{name:'测试2',label: "通过map添加"},{name:'测试3',label: "通过map添加"}]

thisArg这个参数因为实际开发中基本都用的是箭头函数,所以用到第二个参数的情况并不多

const arr = [{name:'测试1'},{name:'测试2'},{name:'测试3'}]
const newArr = arr.map(function(item){
  console.log(this); // Number {1}
},1)

map和parseInt一起使用

正常情况下我们使用map回调函数中只会传递一个参数item,这就可能会出现下面这种问题:

console.log(["1", "2", "3"].map(parseInt));

期望输出 [1, 2, 3], 而实际结果是 [1, NaN, NaN],这是因为parseInt在使用时，也只传递一个参数进去,但实际上parseInt可以接收两个参数(表达式,基数),所以如上代码map在执行回调时默认传递了三个参数parseInt的第二个参数为下标,就导致了[1, NaN, NaN]的结果！

# parseInt()
string(必选),要解析的字符串
radix(可选),表示要解析的数字的基数
radix介于 2 ~ 36 之间,如果省略该参数或其值为0,则数字将以10为基础来解析,如果它以 0x或0X开头,将以16为基数,如果该参数小于2或者大于36,则parseInt()将返回NaN。

到此这篇关于JS中map和parseInt的用法详解的文章就介绍到这了,更多相关JS map parseInt内容请搜索编程学习网以前的文章希望大家以后多多支持编程学习网！