理解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 相关文章推荐
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
underscore之function_动力节点Java学院整理
Jul 11 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
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
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
python计算书页码的统计数字问题实例
2014/09/26 Python
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
Python线程详解
2015/06/24 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
探亲邀请信范文
2014/01/30 职场文书
手机被没收检讨书
2014/02/22 职场文书
追悼会主持词
2014/03/20 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
委托书怎么写
2014/07/31 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
党性分析材料格式
2014/12/19 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python