理解JS中的map的多种用法

暴风骤雨
• 阅读 543

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

其语法如下参数
理解JS中的map的多种用法
表现
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函数调用后但在访问该元素前,该元素被删除的话,则无法被访问到。
理解JS中的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)

点赞
收藏
评论区
推荐文章
Symbol卢 Symbol卢
4年前
js数组的遍历
js中数组的遍历1\.Map()方法Map映射的意思,可以看做是一个映射函数,所谓的映射。一个萝卜一个坑,一一对应的关系;语法:constarrArray();arr.map((item,index,arr)//函数体return;);//参数1:数组中的每一项(必选)//参数2:索引(可选)//参数3:当前遍历的数组本身(可选)//注
好买-葡萄 好买-葡萄
3年前
【数据结构与算法】—— 二分查找
1.二分查找的概念二分查找指的是在排好序的数组中,找到目标元素。如果元素存在则返回元素的下标,不存在则返回1.下面以升序为例进行简单描述2.查找过程:取数组中间元素与查找元素target比较。如果target等于中间元素则直接返回中间元素的下标,如果target小于数组中间元素则在数组左边查找,如果target大于数组中间元素则在右边查找。重复以上步骤。
Easter79 Easter79
3年前
swift闭包表达式和尾随闭包
我们从一个Swift函数说起。并以此为例子。Swift的标准库提供了一个叫做sorted(by:)的方法,会根据你提供的排序闭包将已知类型的数组的值进行排序。一旦它排序完成,sorted(by:)方法会返回与原数组类型大小完全相同的一个新数组,该数组的元素是已排序好的。原始数组不会被sorted(by:)方法修改。我们以soted方法为例子
LinMeng LinMeng
4年前
js 的 forEach,map,filter,some,every,find(es6),reduce详解
forEach()定义和用法forEach()方法用于调用数组的每个元素,并将元素传递给回调函数注意:forEach()对于空数组是不会执行回调函数的。语法array.forEach(function(currentValue,index,arr),thisValue)参数function(currentValue,index,a
Bill78 Bill78
4年前
python中的map函数
1map()函数的简介以及语法:map是python内置函数,会根据提供的函数对指定的序列做映射。map()函数的格式是:map(function,iterable,...)第一个参数接受一个函数名,后面的参数接受一个或多个可迭代的序列,返回的是一个集合。把函数依次作用在list中的每一个元素上
Wesley13 Wesley13
3年前
Java中的数组(Array)
数组对于每一门编程语言来讲都是最重要的数据结构之一,当然不同的编程语言对数组的实现以及处理也不尽相同。数组的概念:把有限个相同类型元素变量放在一个整体,这个整体就叫做数组。数组中的每一个元素被称为数组元素,通常可以通过数组元素的索引(也叫下标,可以理解为一种编号,从0开始)来访问数组元素,包括数组元素的赋值(set)和取值(get)。
Stella981 Stella981
3年前
JavaScript中Filter的使用
filterfilter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素。和map()类似,Array的filter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。例如,在一个
Stella981 Stella981
3年前
JavaScript splice() 方法和JavaScript split() 方法
定义和用法splice()方法向/从数组中添加/删除项目,然后返回被删除的项目。注释:该方法会改变原始数组。语法arrayObject.splice(index,howmany,item1,.....,itemX)参数描述index必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位
Wesley13 Wesley13
3年前
C语言自学《五》
什么是数组数组是一组数目固定、类型相同的数据项数组中的数据称为元素比如longnumbers\10\;方括号中的数字定义了要存放在数组中的元素个数,称为数组维度数组有一个类型,它组合了元素的类型和数组中的元素个数,因此如果两个数组的元素个数、类型相同,这两个数组的类型就相同可以在数组名称后的方括号内使用索引值,索引值是从0开始
Stella981 Stella981
3年前
JavaScript push() 方法
定义和用法push()方法可向数组的末尾添加一个或多个元素,并返回新的长度。语法arrayObject.push(newelement1,newelement2,....,newelementX)参数描述newelement1必需。要添加到数组的第一个元素。newelement2可选。要添加到
liam liam
1年前
深入解析JavaScript中的slice方法:用法与实例详解
在中,slice()是一个常用的数组方法,用于从现有数组中提取一部分元素,然后返回一个新的数组。它是一个非常有用的工具,可以帮助你在不改变原始数组的情况下操作数组的子集。本文将介绍slice()的基本概念、使用方法、实践案例和互动练习,以帮助你更好地理解和