不要让Loop（for）循环限制了你的思维

2015-12-29 本文已影响1995人乖小鬼

看到老外的一篇文章，感觉有点启发，翻译出来大家讨论下。

原文链接：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"

大家可以放心大胆的使用，因为真的理解起来很方便，而且也更容易专注每一个点上面。