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

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容