不要让Loop(for)循环限制了你的思维

作者: 乖小鬼 | 来源:发表于2015-12-29 11:34 被阅读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"
    

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

    相关文章

      网友评论

        本文标题:不要让Loop(for)循环限制了你的思维

        本文链接:https://www.haomeiwen.com/subject/qxabhttx.html