理解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)


相关文章
|
1月前
|
数据采集 Web App开发 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
随着互联网的发展,网页数据抓取已成为数据分析和市场调研的关键手段。Puppeteer是一款由Google开发的无头浏览器工具,可在Node.js环境中模拟用户行为,高效抓取网页数据。本文将介绍如何利用Puppeteer的高级功能,通过设置代理IP、User-Agent和Cookies等技术,实现复杂的Web Scraping任务,并提供示例代码,展示如何使用亿牛云的爬虫代理来提高爬虫的成功率。通过合理配置这些参数,开发者可以有效规避目标网站的反爬机制,提升数据抓取效率。
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
11天前
|
数据采集 存储 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
在现代Web开发中,数据采集尤为重要,尤其在财经领域。本文以“东财股吧”为例,介绍如何使用Puppeteer结合代理IP技术进行高效的数据抓取。Puppeteer是一个强大的Node.js库,支持无头浏览器操作,适用于复杂的数据采集任务。通过设置代理IP、User-Agent及Cookies,可显著提升抓取成功率与效率,并以示例代码展示具体实现过程,为数据分析提供有力支持。
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
6天前
|
JavaScript 前端开发
|
10天前
|
存储 JavaScript 前端开发
js的map和set |21
js的map和set |21
|
10天前
|
JavaScript 前端开发
js map和reduce
js map和reduce
|
18天前
|
JavaScript 前端开发
JavaScript Array map() 方法
JavaScript Array map() 方法
|
9天前
|
JavaScript 前端开发
JavaScript 中 五种迭代数组的方法 every some map filter forEach
本文介绍了JavaScript中五种常用数组迭代方法:every、some、filter、map和forEach,并通过示例代码展示了它们的基本用法和区别。
|
9天前
|
JavaScript 前端开发 索引
JavaScript 数组中splice()的用法
本文介绍了JavaScript数组方法splice()的三种用法:删除元素、插入元素和替换元素,通过具体代码示例展示了如何使用splice()方法进行数组的修改操作。
|
2月前
|
JavaScript 前端开发 索引
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)
这段代码和说明介绍了JavaScript中数组的一些常用方法。函数接收三个参数:`item`(数组项的值)、`index`(项的位置,可选)和`array`(数组本身,可选)。示例展示了如何使用`filter()`过滤非空项、`forEach()`遍历数组、`map()`处理并返回新数组、`every()`检查所有元素是否满足条件、`some()`检查是否存在满足条件的元素、`find()`获取首个符合条件的元素值以及`findIndex()`获取其索引位置。这些方法都不会修改原数组。
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)
|
2月前
|
缓存 JavaScript 前端开发
react.js高级用法
【8月更文挑战第27天】react.js高级用法
30 2
下一篇
无影云桌面