理解JS中的map的多种用法

简介: map() 方法会返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。该方法按照原始数组元素顺序依次处理元素。其语法如下参数

map()

map() 方法会返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。该方法按照原始数组元素顺序依次处理元素。其语法如下

参数

参数名 含义
currentValue 数组中正在处理的当前元素。
index可选 数组中正在处理的当前元素的索引。
array可选 forEach() 方法正在操作的数组。
thisArg可选 可选参数。当执行回调函数 callback 时,用作 this 的值。

表现

map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。

因为map生成一个新数组,当你不打算使用返回的新数组却使用map是违背设计初衷的,请用forEach或者for-of替代。你不该使用map: A)你不打算使用返回的新数组,或/且 B) 你没有从回调函数中返回值。

callback 函数会被自动传入三个参数:数组元素,元素索引,原数组本身

var map = Array.prototype.map

var a = map.call("Hello World", function(x) {  

return x.charCodeAt(0);

})

// a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]


可以链式调用

arr.map(item=>item.time).map(item=>item.scaner)


注意点:

  • map 方法不会对空数组进行检测;
  • map 方法遍历数组时会返回一个新数组,不会改变原始数组
  • map 方法有返回值,可以return出来,map的回调函数中支持return返回值;
  • map 方法无法遍历对象,仅适用于数组的遍历。
  • map 方法处理数组元素的范围是在 callback 方法第一次调用之前就已经确定了。调用map方法之后追加的数组元素不会被callback访问。如果存在的数组元素改变了,那么传给callback的值是map访问该元素时的值。在map函数调用后但在访问该元素前,该元素被删除的话,则无法被访问到。

场景实例

1.使用 map 重新格式化数组中的对象

var kvArray = [{key: 1, value: 10},                

{key: 2, value: 20},                

{key: 3, value: 30}];

var reformattedArray = kvArray.map(function(obj) {    

var rObj = {};    

rObj[obj.key] = obj.value;    

return rObj;

});

// reformattedArray 数组为: [{1: 10}, {2: 20}, {3: 30}],


2.querySelectorAll 应用

var elems = document.querySelectorAll('select option:checked');

var values = Array.prototype.map.call(elems, function(obj) {  

return obj.value; });


3.误导案列

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

结果

[1,NaN,NaN]

原理

parseInt作为了一个函数,然后parseInt(表达式值,callback的基数),也就是map将item,index均传进去了,为parseInt(1,0),parseInt(2,1),parseInt(3,2)


相关文章
|
9月前
|
缓存 监控 Java
深入剖析JVM的OOM | 内存溢出如何影响JVM运行及应对策略
深入剖析JVM的OOM | 内存溢出如何影响JVM运行及应对策略
106515 1
|
前端开发
你真的了解react中的setState吗?(setState现象及原理全方位解析)
在刚开始学习react的时候,我们会经常使用到setState改变状态,既然用的多,那么就应该思考:为什么要使用setState?setState是'异步'的吗?本篇文章就围绕着这两个问题展开
248 0
你真的了解react中的setState吗?(setState现象及原理全方位解析)
|
JavaScript API 索引
从实战里总结使用ant design vue的小技巧
从实战里总结使用ant design vue的小技巧
379 0
从实战里总结使用ant design vue的小技巧
|
JavaScript 前端开发 数据安全/隐私保护
如何设置form表单中的只读属性?
如何设置form表单中的只读属性?
1530 0
|
程序员 C++ Windows
Windbg的gflags.exe -- Attach调试利器
有没有碰到过程序启动就因为异常直接crash?有没有碰到程序启动之后什么反应也没有?有没有碰到过程序启动之后去触发另一个进程失败?有没有碰到别人的程序调用了你的代码,出现问题以后,让你来调查,而你只有你的源代码,该怎么办?     碰过这样的问题,应该都会很头疼吧,如何诊断问题呢?最简单的当然是Debug吧,可是当程序没有启动的时候,我们不能Attach to process...因为进程还不存在。
2443 0
|
XML JSON Java
Gin框架介绍及环境搭建
Gin简介 Gin是一个golang的微框架,封装比较优雅,API友好,源码注释比较明确,已经发布了1.0版本。具有快速灵活,容错方便等特点。其实对于golang而言,web框架的依赖要远比Python,Java之类的要小。自身的net/http足够简单,性能也非常不错。框架更像是一些常用函数或者工具的集合。借助框架开发,不仅可以省去很多常用的封装带来的时间,也有助于团队的编码风格和形成规范。
773 0
|
数据可视化 区块链
如何使用nsis打包electron开发的安装程序
如何使用nsis打包electron开发的安装程序
如何使用nsis打包electron开发的安装程序
|
9月前
|
SQL 缓存 安全
一文浅谈CodeReview中的一些思考
CodeReview在日常的开发过程中越来越被重视,它在提高代码质量同时促进团队成员之间的知识共享和技能提升方面发挥了诸多作用,本文将主要围绕CodeReview展开,简单聊聊在CodeReview过程中的心得和思考。
89100 4
|
4月前
|
缓存 JavaScript 前端开发
拿下奇怪的前端报错(三):npm install卡住了一个钟- 从原理搞定安装的全链路问题
本文详细分析了 `npm install` 过程中可能出现的卡顿问题及解决方法,包括网络问题、Node.js 版本不兼容、缓存问题、权限问题、包冲突、过时的 npm 版本、系统资源不足和脚本问题等,并提供了相应的解决策略。同时,还介绍了开启全部日志、使用替代工具和使用 Docker 提供 Node 环境等其他处理方法。
2949 0
|
7月前
|
Java 应用服务中间件 API
如何在Java中实现WebSocket?
如何在Java中实现WebSocket?

热门文章

最新文章