无循环 JavaScript(map、reduce、filter和find)

// oodlify :: String -> String
function oodlify(s) {
 return s.replace(/[aeiou]/g, 'oodle');
}

const input = [
 'John',
 'Paul',
 'George',
 'Ringo',
];

let i = 0;
const len = input.length;
let output = [];
while (i < len) {
 let item = input[i];
 let newItem = oodlify(item);
 output.push(newItem);
 i = i + 1;
}

const len = input.length;
let output = [];
for (let i = 0; i < len; i = i + 1) {
 let item = input[i];
 let newItem = oodlify(item);
 output.push(newItem);
}

let output = [];
for (let item of input) {
 let newItem = oodlify(item);
 output.push(newItem);
}

const fellowship = [
 'frodo',
 'sam',
 'gandalf',
 'aragorn',
 'boromir',
 'legolas',
 'gimli',
];

const band = [
 'John',
 'Paul',
 'George',
 'Ringo',
];

let bandoodle = [];
for (let item of band) {
 let newItem = oodlify(item);
 bandoodle.push(newItem);
}

let floodleship = [];
for (let item of fellowship) {
 let newItem = oodlify(item);
 floodleship.push(newItem);
}

function oodlifyArray(input) {
 let output = [];
 for (let item of input) {
  let newItem = oodlify(item);
  output.push(newItem);
 }
 return output;
}

let bandoodle = oodlifyArray(band);
let floodleship = oodlifyArray(fellowship);

function izzlify(s) {
 return s.replace(/[aeiou]+/g, 'izzle');
}

function oodlifyArray(input) {
 let output = [];
 for (let item of input) {
  let newItem = oodlify(item);
  output.push(newItem);
 }
 return output;
}

function izzlifyArray(input) {
 let output = [];
 for (let item of input) {
  let newItem = izzlify(item);
  output.push(newItem);
 }
 return output;
}

function map(f, a) {
 let output = [];
 for (let item of a) {
  output.push(f(item));
 }
 return output;
}

function map(f, a) {
 if (a.length === 0) { return []; }
 return [f(a[0])].concat(map(f, a.slice(1)));
}

let bandoodle  = band.map(oodlify);
let floodleship = fellowship.map(oodlify);
let bandizzle  = band.map(izzlify);
let fellowshizzle = fellowship.map(izzlify);

const heroes = [
 {name: 'Hulk', strength: 90000},
 {name: 'Spider-Man', strength: 25000},
 {name: 'Hawk Eye', strength: 136},
 {name: 'Thor', strength: 100000},
 {name: 'Black Widow', strength: 136},
 {name: 'Vision', strength: 5000},
 {name: 'Scarlet Witch', strength: 60},
 {name: 'Mystique', strength: 120},
 {name: 'Namora', strength: 75000},
];

let strongest = {strength: 0};
for (hero of heroes) {
 if (hero.strength > strongest.strength) {
  strongest = hero;
 }
}

let combinedStrength = 0;
for (hero of heroes) {
 combinedStrength += hero.strength;
}

function greaterStrength(champion, contender) {
 return (contender.strength > champion.strength) "htmlcode">

function reduce(f, initialVal, a) {
 let working = initialVal;
 for (item of a) {
  working = f(working, item);
 }
 return working;
}


reduce 模式在 JavaScript 中也是很常用的，因此 JavaScript 为数组提供了内置的方法，不需要自己来写。通过内置方法，代码就变成了：


const strongestHero = heroes.reduce(greaterStrength, {strength: 0});
const combinedStrength = heroes.reduce(addStrength, 0);


ok，如果足够细心的话，你会注意到上面的代码其实并没有短很多。不过也确实比自己手写的 reduce 代码少写了几行。但是我们的目标并不是使代码变短或者少写，而是降低代码复杂度。现在的复杂度降低了吗？我会说是的。把处理每个元素的代码和处理循环代码分离开来了，这样代码就不会互相纠缠在一起了，降低了复杂度。
reduce 方法乍一看可能觉得非常基础。我们举的 reduce 大部分也比如做加法这样的简单例子。但是没有人说 reduce 方法只能返回基本类型，它可以是一个 object 类型，甚至可以是另一个数组。当我第一次意识到这个问题的时候，自己也是豁然开朗。所以其实可以用 reduce 方法来实现 map 或者 filter，这个留给读者自己做练习。
filtering
现在我们有了 map 处理数组中的每个元素，有了 reduce 可以处理数组最终得到一个值。但是如果想获取数组中的某些元素该怎么办？我们来进一步探索，现在增加一些属性到上面的超级英雄数组中：


const heroes = [
 {name: 'Hulk', strength: 90000, sex: 'm'},
 {name: 'Spider-Man', strength: 25000, sex: 'm'},
 {name: 'Hawk Eye', strength: 136, sex: 'm'},
 {name: 'Thor', strength: 100000, sex: 'm'},
 {name: 'Black Widow', strength: 136, sex: 'f'},
 {name: 'Vision', strength: 5000, sex: 'm'},
 {name: 'Scarlet Witch', strength: 60, sex: 'f'},
 {name: 'Mystique', strength: 120, sex: 'f'},
 {name: 'Namora', strength: 75000, sex: 'f'},
];


ok，现在有两个问题，我们想要：
找到所有的女性英雄；

找到所有能量值大于500的英雄。

使用普通的 for...of 循环，会得到如下代码：


let femaleHeroes = [];
for (let hero of heroes) {
 if (hero.sex === 'f') {
  femaleHeroes.push(hero);
 }
}

let superhumans = [];
for (let hero of heroes) {
 if (hero.strength >= 500) {
  superhumans.push(hero);
 }
}


逻辑严密，看起来还不错？但是里面又出现了重复的情况。实际上，区别在于 if 的判断语句，那么能不能把 if 语句重构到一个函数中呢？


function isFemaleHero(hero) {
 return (hero.sex === 'f');
}

function isSuperhuman(hero) {
 return (hero.strength >= 500);
}

let femaleHeroes = [];
for (let hero of heroes) {
 if (isFemaleHero(hero)) {
  femaleHeroes.push(hero);
 }
}

let superhumans = [];
for (let hero of heroes) {
 if (isSuperhuman(hero)) {
  superhumans.push(hero);
 }
}


这种只返回 true 或者 false 的函数，我们一般把它称作断言（predicate）函数。这里用了断言（predicate）函数来判断是否需要保留当前的英雄。
上面代码的写法会看起来比较长，但是把断言函数抽离出来，可以让重复的循环代码更加明显。现在把种循环抽离到一个函数当中。


function filter(predicate, arr) {
 let working = [];
 for (let item of arr) {
  if (predicate(item)) {
   working = working.concat(item);
  }
 }
}

const femaleHeroes = filter(isFemaleHero, heroes);
const superhumans = filter(isSuperhuman, heroes);


同 map 和 reduce 一样，JavaScript 提供了一个内置数组方法，没必要自己来实现（除非你自己想写）。用内置数组方法，上面的代码就变成了：


const femaleHeroes = heroes.filter(isFemaleHero);
const superhumans = heroes.filter(isSuperhuman);


为什么这段代码比 for...of 循环好呢？回想一下整个过程，我们要解决一个“找到满足某一条件的所有英雄”。使用 filter 使得问题变得简单化了。我们需要做的就是通过写一个简单函数来告诉 filter 哪一个数组元素要保留。不需要考虑数组是什么样的，以及繁琐的中间变量。取而代之的是一个简单的断言函数，仅此而已。
与其他的迭代函数相比，使用 filter 是一个四两拨千斤的过程。我们不需要通读循环代码来理解到底要过滤什么，要过滤的东西就在传递给它的那个函数里面。
finding
filter 已经信手拈来了吧。这时如果只想找一个英雄该怎么办？比如找 “Black Widow”。使用 filter 会这样写：


function isBlackWidow(hero) {
 return (hero.name === 'Black Widow');
}

const blackWidow = heroes.filter(isBlackWidow)[0];


这段代码的问题是效率不够高。filter 会检查数组中的每一个元素，而我们知道这里面只有一个 “Black Widow”，当找到她的时候就可以停住，不用再看后面的元素了。那么，依旧利用断言函数，我们写一个 find 函数来返回第一次匹配上的元素。


function find(predicate, arr) {
 for (let item of arr) {
  if (predicate(item)) {
   return item;
  }
 }
}

const blackWidow = find(isBlackWidow, heroes);


同样地，JavaScript 已经提供了这样的方法：


const blackWidow = heroes.find(isBlackWidow);


find 再次体现了四两拨千斤的特点。通过 find 方法，把问题简化为：你只要关注如何判断你要找的东西就可以了，不必关心迭代到底怎么实现等细节问题。
总结
这些迭代函数的例子很好地诠释“抽象”的作用和优雅。回想一下我们所讲的内置方法，每个例子中我们都做了三件事：
消除了循环结构，使得代码变的简洁易读；

通过适当的方法名称来描述我们使用的模式，也就是：map，reduce，filter 和 find；

把问题从处理整个数组简化到处理每个元素。

注意在每一种情况下，我们都用几个纯函数来分解问题和解决问题。真正令人兴奋的是通过仅仅这么四种模式模式（当然还有其他的模式，也建议大家去学习一下），在 JS 代码中你就可以消除几乎所有的循环了。这是因为 JS 中几乎每个循环都是用来处理数组，或者生成数组的。通过消除循环，降低了复杂性，也使得代码的可维护性更强。
作者：James Sinclair 

编译：胡子大哈
翻译原文：http://huziketang.com/blog/posts/detail"http://jrsinclair.com/articles/2017/javascript-without-loops/">JAVASCRIPT WITHOUT LOOPS