看到老外的一篇文章,感觉有点启发,翻译出来大家讨论下。
原文链接:Stop Writing Loops and Start Thinking with Maps
所有的PS,其实是我的无聊之举,大家不必理会。
正文:
现在是时候讨论一下一个叫做Map的函数的家伙。在使用Map之前,你也许一直在使用for循环来处理你的循环数据。
Imperative
来个例子, 团队当中的销售人员有一大串email地址,悲催的是,不是每个都符合使用格式,其中被卧底了不少含有大写字母的email(ps:默认小写是正确的),那么我们使用for循环来处理下这些卧底。
var mixedEmails = ['JOHN@ACME.COM', 'Mary@FooBar.com', 'monty@spam.eggs'];
function getEmailsInLowercase(emails) {
var lowercaseEmails = [];
for (var i = 0; i < emails.length; i++) {
lowercaseEmails.push(emails[i].toLowerCase());
}
return lowercaseEmails;
}
var validData = getEmailsInLowercase(mixedEmails);
上述的实现肯定没有bug,但是有点难以理解,不像语言描述的那么简单通用(ps:清除卧底不是那么容易的),上面for循环中有很多冗余,包含很多不是我们最终目的的代码。
- 多创建了一个数组来存储数据(ps:我认为这个可以优化)
- 先拿到了数据的总长度,然后移动正确的次数。
- 需要一个变量来存储当前操作的下标
- 计算操作的方向,这在循环当中很重要,但其实对于目的而言,这并不影响我们的结果。
这是目前很常用的编程方式,程序可以完美工作。
Confused
我们要优化上面的代码,所以引进了Map方法。在Map的解释文档中,我们发现了“array”, “each”, and “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);
代码变少了,而且我们不需要一个下标来记住位置,移动小标方向也不需要判断和计算了。
但是,这还不够简洁,仍然是一个为了快速完成的代码(PS: 大家懂得,赶项目进度嘛)。我们还是有很多不需要的代码,
Declarative
我们应该思考下这种数据转化的方式,现在我们的思路是:‘把list的首元素给电脑,转化成小写,然后放到另外一个list中,最后返回这个list’,改变一下思路: ‘我有一串,混合大小写的地址,我需要变成全部小写,有一个方法来实现。’
var mixedEmails = ['JOHN@ACME.COM', 'Mary@FooBar.com', 'monty@spam.eggs'];
function downcase(str) { return str.toLowerCase();}
var validData = mixedEmails.map(downcase);
对于人们而言,并非有很强的可读性,但这就是程序的本质:向其他人展示你的想法,无论是别的开发者,还是以后的自己。上面的代码意思是:我们的validData(有效数据)通过downcase映射完成。
像上面这样的思路,是一种高级技能的核心思想---函数式编程,这就是我们本质上再做的事情。一个复杂的程序其实不就是一个个简单,容易理解的小组件组合而成么!
上面的方式有一下几个优点:
- downcase小写函数提供了简单的接口,一个值进,小写出去。
- 不会有下标移动,所以便于理解和测试,也不同意崩溃。
- 方法简单明了,比较专职,所以能很好的重用和结合其他方法使用。
- 基本也不需要怎么压缩
尽管使用一个匿名函数来作为Map方式第一个参数很常见,但是我还是建议抽象出来,并且给一个有意思的函数名。便于你书写文档,已供其他的开发者观看理解(ps:这点其实挺重要的,便于理解,不仅仅是对其他人,也是你以后自己回顾的重点)。
Browser Support
Map函数在ECMAScript 5 specification 定义,支持度:browser support. 基本是ie9+。当然你也可以引入 polyfill或者使用类库Underscore or Lodash.
Performance
在绝大多数的情况下,选择map函数和一个for循环将在实际代码中没有性能影响。for循环快,但差别并不值得考虑,除非你写某种形式的图形或物理引擎,甚至没有必要考虑这些优化,在你能分析处理你的关键代码之前。
Wrapping Up
函数式编程思想是分离逻辑到一个简单的函数中,然后把函数和数据结构对应起来,这样让程序更加简洁、健壮和可读。这个概念很通用,越是通用的概念使得代码越容易复用。这种思路并不是提高你的js功力,包括了绝大多数其他的编程语言:Ruby等
所以,下次再使用for的时候,思考下你的数据结构,你并一定需要一个array,也许你该考虑Object,拿到他的value值,然后映射一个方法处理,得到你想要的数据。也可以引入类库,Underscore的map over object preserving the keys.
欢迎大家讨论更多的Map的用法。
上面是对原文的翻译,很多都是带过,并没有全部按照原文走,意思差不多。原谅我肤浅的词藻.....
为了验证他说的性能问题,我自己做了一个小小的测试,并不严谨和全面。
<script type="text/javascript">
var aaa = [],
bbb = [],
ccc = [];
for (var i = 1; i < 1000000; i++) {
aaa.push('yuqsdasdhashajHYdsadas');
bbb.push('czxcnznmjkkjklUIaaweqq');
ccc.push('polikujkhymhuuLPjabzhj');
}
console.log(+new Date(), 'begin');
aaa.forEach(function(el, index) {
aaa[index] = el.toUpperCase() + 'mnbvcxdassas';
})
console.log(+new Date(), 'aaa');
bbb.map(function(el) {
return el.toUpperCase() + 'ytrewqpoytt';
})
console.log(+new Date(), 'bbb');
for (var j = 1; j < ccc.length; j++) {
ccc[j] = ccc[j].toUpperCase() + 'dasdaspoytt';
}
console.log(+new Date(), 'ccc');
</script>
随意放了 100W试试,结果如下,确实没有多少性能差距,随便加上了forEach。
1451359759754 "begin"
1451359760057 "aaa"
1451359760309 "bbb"
1451359760551 "ccc"
大家可以放心大胆的使用,因为真的理解起来很方便,而且也更容易专注每一个点上面。