理解javascript中Map代替循环


Posted in Javascript onFebruary 26, 2016

本文介绍了map给我们的js编程带来的好处及便利:
1.Map能干什么
map可以实现for循环的功能:

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
</head> 
<body> 
 
<script> 
 
 var arr = ['val1', 'val2', 'val3']; 
 
 for(var i = 0; i < arr.length; i++){ 
  console.log(arr[i]); 
  console.log(i); 
  console.log(arr); 
 } 
 arr.map(function(val, index, array) { 
  console.log(val); 
  console.log(index); 
  console.log(array); 
 }); 
 
  
  
 
</script> 
 
 
</body> 
</html>

这里的好处是,我们可以随意在map里面写函数,这样的话代码可读性会大大提高,如下:

function output(val, index, array) { 
  console.log(val); 
  console.log(index); 
  console.log(array); 
 } 
 
 
 arr.map(output);

2.Map的兼容性
ECMAScript 5 标准定义了原生的 map() 方法,所以浏览器兼容性较好。如果你想在 IE 9 之前的版本中使用,就需要引入一个 polyfill 或使用 Underscore、Lodash 之类的库了。
3.map和for哪个快
当然,使用for会比map快点,但是差别不是很大,如果对性能要求没有到极致的地步,这点性能差别可以忽略。

如今,在程序员学习过程中基本都会发现一个叫 map 的函数。在发现 map 函数之前,你可能都会使用 for 循环来处理需要多次执行某一行为的场景。一般情况下,在这个循环过程中都会伴随一些数据变换。

命令式

例如,你团队的销售人员交给你一个很长的电邮地址列表。这些邮箱地址获取的时候并没有经过很好地校验,以至于有些是大写的,有些是小写的,还有一些是大小写混合的。使用 for 循环进行数据处理的代码如下:

var mixedEmails = ['JOHN@ACME.COM', 'Mary@FooBar.com', 'monty@spam.eggs'];
 
function getEmailsInLowercase(emails) {
 var lowercaseEmails = [];
 
 for (var i = 0; i &lt; emails.length; i++) {
  lowercaseEmails.push(emails[i].toLowerCase());
 }
 
 return lowercaseEmails;
}
 
var validData = getEmailsInLowercase(mixedEmails);

这样的做法是有效的,但却把一个实际上简单常见的操作变得复杂。使用 for 循环的函数牵扯了很多不必要的细节。一些痛点如下:

  • 需要让程序创建一个临时列表来存储复制的邮件地址值。
  • 需要让程序先计算列表的长度,以此为次数访问一遍列表。
  • 需要让程序创建一个计数器用来记录当前访问的位置。
  • 需要告诉程序计数的方向,但顺序在这里并不重要。

这是命令式的编程方法。我们似乎在口述给电脑该怎么做这件事。

困惑

为了使之前的代码更加清晰整洁,我们改用 map 函数。在任何 map 函数的说明文档中,我们都会看到诸如 “array”、“each”、“index”之类的词。这表明,我们可以把 map 当做不那么“隆重”的 for 循环使用,事实上也是可行的。现在来修改一下之前的代码:

var mixedEmails = ['JOHN@ACME.COM', 'Mary@FooBar.com', 'monty@spam.eggs'];
 
function getEmailsInLowercase(emails) {
 var lowercaseEmails = [];
 
 emails.map(function(email) {
  lowercaseEmails.push(email.toLowerCase());
 });
 
 return lowercaseEmails;
}
 
var validData = getEmailsInLowercase(mixedEmails);

这样写不仅能用,而且代码比使用 for 循环更加清楚。除了代码量更少,我们也不用再告诉程序去记录索引和遍历列表的方向了。

然而,这还不够好。这样写还是命令式的编程。我们还是指挥的太多。实际上我们牵涉了很多不必要的细节,似乎都在领着程序的手走每一步。

声明式

我们需要改变我们关于数据变换的思考方式。我们不需要想着:“电脑啊,我需要你取出列表中第一个元素,然后把它转换成小写,再存储到另一个列表中,最后返回这个列表”。相反,我们应该这样想:“电脑,我这有一个混合了大小写的邮件地址列表,而我需要一个全是小写的邮件地址列表,这是一个能够进行小写转换的函数”。

var mixedEmails = ['JOHN@ACME.COM', 'Mary@FooBar.com', 'monty@spam.eggs'];
 
function downcase(str) {
 return str.toLowerCase();
}
 
var validData = mixedEmails.map(downcase);

毫无疑问,这种写法更易懂,同时这才是程序的本质:把你的想法告诉其他人,这个人可能是别的程序员或未来的你。上面的代码在说“有效的数据是使用小写转换函数映射后的邮箱列表”。

使用类似这样的高级方式传递想法是函数式编程的核心原则,而我们就在这样做。将单一功能、易于理解的简单部分组合起来,由此构建复杂程序。

这样的写法还有些额外的好处。下表的排序不分先后:

  • 小写转换函数提供了最简化的接口:单值输入,单值输出。
  • 能够改动的地方不多,所以逻辑更易于理解,也易于测试,而且不易出错。
  • 逻辑单一,所以易于复用,并且与其他函数能够组合出更复杂的功能。
  • 沿这样的声明式编程路线走的话,代码量会显著缩小。

虽然给 map 的第一个参数传入匿名函数很常见,还是建议把函数提出来并合理命名。这能够帮你记录下写此函数的意图,这样别的开发者就能通过函数名了解功能而不用再费劲分析代码了。

浏览器支持情况

ECMAScript 5 标准定义了原生的 map() 方法,所以浏览器兼容性较好。如果你想在 IE 9 之前的版本中使用,就需要引入一个 polyfill 或使用 Underscore、Lodash 之类的库了。

性能表现

极大多数情况下,在实际编码中 map 函数和 for 循环之间没有明显的性能差距。for 循环稍快一些,但如果你不是在写图形或物理引擎的话,这点差距没必要去考虑,当然即使如此,除非能够确定这些性能的提升对你有帮助,否则用这种方式去优化意义不大。

总结

将逻辑分成单一功能的方法并应用于数据结构上,这种编程方法会让你的代码更准确、鲁棒和易于理解。我们的理念就是尽可能通用,通用能够帮助代码重用。学习这种思考方法,不仅能帮助你提高 Javascript 水平,也能体现在其他多数编程语言上,例如 Ruby 和 Haskell。

所以,下一次当你要使用 for 循环时,重新考虑一下。记住,你要处理的数据并不一定是普通的数组,你可以去处理对象,取出它的值,再使用函数去映射,最后整理出结果数组。

以上就是关于map代替循环的简单介绍,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript之函数直接量(function(){})()
Jun 29 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
简单的js计算器实现
Oct 26 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
js实现动态时钟
Mar 12 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 #Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 #Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 #Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 #Javascript
javascript动态获取登录时间和在线时长
Feb 25 #Javascript
基于javascript实现动态时钟效果
Aug 18 #Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 #Javascript
You might like
15个小时----从修改程序到自己些程序
2006/10/09 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
Python操作Jira库常用方法解析
2020/04/10 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
Ajax的工作原理
2015/12/04 面试题
投标担保书范文
2014/04/02 职场文书
标准单位租车协议书
2014/09/23 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
大学生党员个人总结
2015/02/13 职场文书
2015年小学开学寄语
2015/02/27 职场文书
小学信息技术教学反思
2016/02/16 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers