JS中map和parseInt的用法详解

 更新时间:2023年05月16日 09:02:20   作者:i东东  
这篇文章主要来和大家详细介绍一下JavaScript中map和parseInt的用法,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解一下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

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内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!

相关文章

  • JSONP 的原理、理解 与 实例分析

    JSONP 的原理、理解 与 实例分析

    这篇文章主要介绍了JSONP 的原理、理解与实例,结合实例形式分析了JSONP 的基本概念、原理、理解与使用技巧,需要的朋友可以参考下
    2020-05-05
  • javascript函数中参数传递问题示例探讨

    javascript函数中参数传递问题示例探讨

    本节主要与大家探讨下javascript函数中参数传递问题,有不明白的朋友可以参考下
    2014-07-07
  • js判断请求的url是否可访问,支持跨域判断的实现方法

    js判断请求的url是否可访问,支持跨域判断的实现方法

    下面小编就为大家带来一篇js判断请求的url是否可访问,支持跨域判断的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 解决Layui当中的导航条动态添加后渲染失败的问题

    解决Layui当中的导航条动态添加后渲染失败的问题

    今天小编就为大家分享一篇解决Layui当中的导航条动态添加后渲染失败的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript实现封闭区域布尔运算的示例代码

    JavaScript实现封闭区域布尔运算的示例代码

    这篇文章主要介绍了JavaScript实现封闭区域布尔运算的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • JS 创建对象的模式实例小结

    JS 创建对象的模式实例小结

    这篇文章主要介绍了JS 创建对象的模式,结合实例形式总结分析了JS 创建对象的各种常用模式,包括工厂模式、构造函数模式、原型模式、组合构造和原型模式、动态原型模式、寄生构造函数模式、稳妥构造模式等,需要的朋友可以参考下
    2020-04-04
  • Javascript条件判断使用小技巧总结

    Javascript条件判断使用小技巧总结

    我们已经知道,null?没有任何的属性值,并且无法获取其实体(existence)值。所以?null.property?返回的是错误(error)而不是?undefined?。
    2008-09-09
  • JavaScript 实现的checkbox经典实例分享

    JavaScript 实现的checkbox经典实例分享

    本文主要给大家分享的是JavaScript实现checkbox多项选择的经典代码,非常的简单实用,有需要的小伙伴可以参考下
    2016-10-10
  • js实现鼠标移到链接文字弹出一个提示层的方法

    js实现鼠标移到链接文字弹出一个提示层的方法

    这篇文章主要介绍了js实现鼠标移到链接文字弹出一个提示层的方法,涉及javascript鼠标事件与css样式的相关技巧,需要的朋友可以参考下
    2015-05-05
  • javascript高级的文件目录排序代码

    javascript高级的文件目录排序代码

    这几天在做一个文件管理的模块,里面有排序的功能,产品经理看了说希望能做出更加智能的文件排序功能,就像是win7的名称排序一样,主要就是文件名中的数字会按大小排序,而不是直接按ascii码 ,这两天晚上没事,就先写了这个排序方法,下个版本中就可以用上了
    2010-08-08

最新评论

?


http://www.vxiaotou.com