map是什么

map是操作js数组的方法，也可以说是一个函数，作用是遍历整个数组，对里面的每个值做处理再返回一个新的值。

注意，除非使用map数组里面存在嵌套复杂的对象、数组结构，否则map是不会修改原数组的

map方法的结构及入参

map的入参需要传递一个函数进去，因为说它是可以遍历数组的，所以传入的这个函数调用的次数由数组的长度决定，长度是3就是3次，是4就是4次。

//index可以不传
[1,2,3].map(function(item,index){//这个数组长度是3所以函数调用3次//item指的遍历到的对应的数组值 函数调用的三次中 第一次是1 ，然后是2、3//index是数组的索引，三次分别是0，1，2
})

上面的例子意思就是map里面的函数运行了3次，分别是function(1,0)、function(2,1)、function(3,2)。

然后你可以做什么呢，可以在函数里面return（return的内容将作为新值代替数组遍历到的旧值item），比如将函数里面的值都变成原来的两倍：

let b=[1,2,3].map(function(item,index){return item*2
})
console.log(b)//[2,4,6]

语法糖

es6给我们提供了一些便利，比如箭头函数()=>{}
我们可以用箭头函数替代原来的函数：

let b=[1,2,3].map((item,index)=>{return item*2
})
console.log(b)//[2,4,6]

用箭头函数有什么好处呢，如果里面不用进行复杂的判断，我们可以将右边的{}改成表达式直接返回，省略return：

let b=[1,2,3].map((item,index)=> item*2 )
console.log(b)//[2,4,6]

因为在我们这里例子里面index索引值没用到所以我们可以不传，当入参只有一个时，前面的括号（）都可以省略。

let b=[1,2,3].map( item => item*2 )
console.log(b)//[2,4,6]

语法糖会让你的代码看起来更加高级优雅。

还有有时候你可能不想改变所有的值，比如我只想改变小于2的数字，其他的不变，那就进行判断不满足条件的把item原路返回：

let b=[1,2,3].map(item=>{if(item<2){return item*2}else{return item}
})
console.log(b)//[2,2,3]

当然你可以改成用三目运算。

let b=[1,2,3].map(item=>{//返回，当item<2的时候返回item*2否则返回itemreturn item<2?item*2:item
})
console.log(b)//[2,2,3]

然后你又发现，它只有一个return，可以用语法糖。

let b=[1,2,3].map(item => item<2?item*2:item)
console.log(b)//[2,2,3]

map一般不改变原数组

除非是嵌套了对象或者数组的数组你直接修改了内部的引用地址，一般数组使用map是不会改变原数组的，你得找人接收。

let a=[1,2,3]
let b= a.map(item => item<2?item*2:item)
console.log(a)//[1,2,3]
console.log(b)//[2,2,3]

一分钟掌握js中的map方法相关推荐

js中数组map方法的使用和实现
js中数组map方法的使用和实现 MDN中定义 map() 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值. 语法 var new_array = arr.map(fun ...
jquery中的map()方法与js中的map()方法
1.jquery中的map()方法首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...
vue前端弹出新增页面testAdd，弹出页面中进行数据编辑，table编辑，行编辑等。包含JS中使用Map进行数据处理。
使用vue写的新增页面,编辑页面等弹出页面,在页面中进行table数据的行编辑,利用JS中的Map做的实时响应的行编辑数据内容汇总计算.校验等.话不多说,上代码: require(['vue', 'z ...
JS中通过call方法实现继承
JS中通过call方法实现继承原文:JS中通过call方法实现继承讲解都写在注释里面了,有不对的地方请拍砖,谢谢! <html xmlns="http://www.w3.org/1 ...
JS中的Replace方法
最近查一个bug,原因是JS中的Replace方法造成的,当将一个字符串中有处需要替换时,一般会用到JS中的Replace方法,Replace方法的第一个参数如果是传的字符串,只会替换第一处.代码如下 ...
javascript学习系列(1):数组中的map方法
最好的种树是十年前,其次是现在.歌谣每天一个前端小知识提醒你改好好学习了知乎博主 csdn博主 b站博主放弃很容易但是坚持一定很酷我是歌谣喜欢就一键三连咯你得点赞是对歌谣最大的 ...
java script eval_「eval」js中的eval方法详解（一）–eval方法的初级应用 - seo实验室...
eval 在我看来,js中的eval()方法就是一个js语言的执行器,它能把其中的参数按照javaScript语法进行解析并执行. 语法: eval(s); eval()方法中的参数s有多种情况.参数 ...
JS中创建对象的方法
JS中创建对象的方法最近手头一个项目刚完成,下一个显目还在准备中,趁这个空档期,拿起尘封多年的JS书, 重温一遍JS面向对象程序设计,然后就得出下文,算是一个总结吧. 也许,你会说 "创建 ...
js中的字符串方法与数组方法总结
js中的字符串方法与数组方法总结 1.字符串方法 2.数组方法

一分钟掌握js中的map方法

目录

map是什么

map方法的结构及入参

语法糖

map一般不改变原数组

一分钟掌握js中的map方法相关推荐

最新文章

热门文章