ECMAScript不用让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"

世家可以放心大胆的应用,因为实在知道起来很方便,而且也更易于专注每一个点下面。