反思JavaScript:论for循环的死亡

反思JavaScript:论for循环的死亡0

我们一直在使用JavaScript的for循环。但现在,在最新的函数式编程技巧的支持下,过时的它应该退休了。

幸运的是,你不必是一个函数式编程大师,也可以做出这个改变。更幸运的是,这就是你在眼前项目中可以立马做的事情!

那到底JavaScript的for循环有什么问题?

for循环设计本身鼓励改变状态以及产生副作用,这两者都是导致错误和不可预知代码的隐患。

我们都知道全局状态是糟糕的,应该避免。可是,局部状态和全局状态一样糟糕,只是因为局部状态处于一个较小的尺度中,没有引起注意。因此,我们从来没有真正解决问题,而是尽量把问题最小化。

对于可变的状态,在一些未知的时间点,变量会因为某些未知的原因而改变。这时,你要花上数小时进行调试,寻找这个值改变的原因。光为这,我都不知道自己掉了多少把头发了。

下面,我想简单谈谈副作用。这个词听起来就烦人,副作用……妈蛋!难道你会希望自己的程序有什么副作用?当然不!

但什么是副作用?

当一个函数修改了其作用域以外的某些东西时,它就被视为有副作用。可以是改变一个变量的值、读取键盘输入、调用某个API、写入磁盘数据、打印日志,等等。

副作用很强大,但同时也被承担着重大的责任。

副作用应该尽可能被消除,或者封装在内部,或可控。有副作用的函数难以测试,也难以推断,所以要尽你所能甩掉它。幸好这里可以不用担心副作用。

好了,闲话少说,上代码。我们看一下这段或许你已经看过上千次典型的for循环:

const cats = [
  { name: 'Mojo',    months: 84 },
  { name: 'Mao-Mao', months: 34 },
  { name: 'Waffles', months: 4 },
  { name: 'Pickles', months: 6 }
]

var kittens = []

// 典型的拙劣写法:for循环
for (var i = 0; i < cats.length; i++) {
  if (cats[i].months < 7) {
    kittens.push(cats[i].name)
  }
}

console.log(kittens)

我计划将这些代码一步一步重构,让你清楚地看到将这些代码转换成更漂亮的写法是多么容易。

第一个改变就是把if里的声明抽象为一个函数:

const isKitten = cat => cat.months < 7

var kittens = []

for (var i = 0; i < cats.length; i++) {
  if (isKitten(cats[i])) {
    kittens.push(cats[i].name)
  }
}

通常,抽出if语句是个不错的做法。过滤的着眼点从“小于7个月”转变为“是一只小猫”非常非常重要。现在,当你再看这段代码,意图就变得清晰了。为什么要取得小于7个月的猫?一点都不明确。我们的意图是找到小猫,所以让代码表示出来!

另一个好处是iskitten现在可复用了,而且我们都明白:

让代码可复用应该始终是我们的目标之一。

下一个改变就是提取出从对象猫到猫名字的转换(或者映射)。这个变化对以后更有意义,现在只要相信我就好了:

const isKitten = cat => cat.months < 7
const getName = cat => cat.name

var kittens = []

for (var i = 0; i < cats.length; i++) {
  if (isKitten(cats[i])) {
    kittens.push(getName(cats[i]))
  }
}

我本打算先介绍一下filtermap的,但转念一想,还是直接展示引入它们之后的代码多好理解,更能让你体会到代码可读性的巨大变化:

const isKitten = cat => cat.months < 7
const getName = cat => cat.name

const kittens =
  cats.filter(isKitten)
      .map(getName)

还要注意,我们已经消除了 kittens.push(...)。不再有可变的状态,也不再有var!

使用const的代码有如魔鬼般性感(超过了var和let)。

这里说明下,我们自始至终都可以使用const,因为const并不会使对象本身不可变(这个咱们下次再说)。别急,这里只是在讲一个范例,所以先放我一马!

重构的最后一步就是把过滤和映射方法也提取到一个函数里(为了复用嘛,你懂的):

整合一起就是这样:

const isKitten = cat => cat.months < 7
const getName = cat => cat.name
const getKittenNames = cats =>
  cats.filter(isKitten)
      .map(getName)

const cats = [
  { name: 'Mojo',    months: 84 },
  { name: 'Mao-Mao', months: 34 },
  { name: 'Waffles', months: 4 },
  { name: 'Pickles', months: 6 }
]

const kittens = getKittenNames(cats)

console.log(kittens)

你会如何进一步分解这些函数?仔细想想“小于”或者name属性、mapfilter,说不定能有额外的收获。你还可以研究下函数的复合,收益更大。

本文文字及图片出自 www.zcfy.cc

余下全文(1/3)
分享这篇文章:

请关注我们:

共有 1 条讨论

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注