求求你别再 .filter().map().sort() 了

今天在这里，我吐槽一下 JavaScript 的链式调用，我觉得虽然有这个语法，但是我们最好永远都别用(就像这样，这是我以前真实项目里出现的代码)，起码谨慎用：

const topActiveUsers = users
  .filter(item => item !== null && item !== undefined)  // 过滤空
  .filter(person => person.active === true)  // 是否激活
  .map(profile => profile.name)  // 提取出姓名
  .filter(fullName => fullName && fullName.length > 0)  // 过滤空
  .map(displayName => displayName.trim())
  .sort((a, b) => a.localeCompare(b))  // 排序
  .slice(0, 5)  // 只要前 5 个
  .concat();  // 返回新数组

当年我很喜欢这样写，显得我很牛啊！干干净净，看起来还舒服。

但是，慢慢我就发现，极其难维护！读起来很累。我也不知道这个语法是哪个天才想起来的。这语法相当反人类！

编程语言，本身是在写步骤的，步骤可以上下调整，这个一眼看去，貌似是在写步骤，实际上根本不是！这其实是一个整体！维护时，拆起来很麻烦，一转眼半个小时过去了。

如果，这样摊开来写，反而看起来啰嗦，但更友好了：

const validUsers = users.filter(item => item);
const activeUsers = validUsers.filter(person => person.active);
const userNames = activeUsers.map(profile => profile.name);
const nonEmptyNames = userNames.filter(fullName => fullName);
const trimmedNames = nonEmptyNames.map(displayName => displayName.trim());
const sortedNames = trimmedNames.sort((a, b) => a.localeCompare(b));
const topFiveNames = sortedNames.slice(0, 5);
const topActiveUsers = topFiveNames.concat();

起码前面每个变量，都有名有姓，让人视觉上能喘一口气。

而且有了问题，我可以从中间去 console ，可以慢慢琢么，如果是链式，就做梦吧。

有个大佬说过：「如果一个系统很长时间不出错，它的设计就是良好的。如果你进一步看了代码，脱口而出："哈，这比我想的要简单"，或者"这个部分不用我操心，即使出问题也容易解决"，它的设计就是优秀的」。

显而意见，摊开写更好。

当然，也不是没有优点。

还有一个场景，是 Promise 异步。

教材上，一般都是这样默认安装链式写的：

const data = await fetchMembers()
  .then(result => result.json())
  .then(list => list.filter(item => item.isActive))
  .then(list => list.map(item => item.nickname));

猛地一看，好像很简洁舒服，但是，我更建议这样写：

const response = await fetchMembers();
const memberList = await response.json();
const activeMembers = memberList.filter(item => item.isActive);
const data = activeMembers.map(item => item.nickname);

理解起来也舒服不少。

如果他长度比较短，那还是可以接受的。

比如：

members.map(p => p.nickname)  // 一步链式
members.filter(p => p.isActive).map(p => p.nickname)  // 两步链式

两步以内，还是可以接受的。

大于两步，一定不要用链式！