停止使用循环 教你用underscore优雅的写代码

你一天（一周）内写了多少个循环了？

var i;for(i = 0; i < someArray.length; i++) { var someThing = someArray[i]; doSomeWorkOn(someThing);}

　　这当然无害，但这种写法非常丑而且奇怪，这也不是真正需要抱怨的。但这种写法太平庸了。

var i, j;for(i = 0; i < someArray.length; i++) { var someThing = someArray[i]; for(j = 0; j < someThing.stuff.length; j++) {   doSomeWorkOn(someThing.stuff[j]); }}

　　在扩展糟糕的代码，在你抛出一大堆if前，你已经精神错乱了。

　　我在两年里没有写一个循环(loop)。

　　“你在说什么？”

　　这是真的，一个冷笑话。其实不是一个都没有（好吧，我确实写了几个），因为我不写循环(loops)，我的代码更容易理解。你

　　怎么做的呢？

_.each(someArray, function(someThing) { doSomeWorkOn(someThing);})

　　或者更好一点：

_.each(someArray, doSomeWorkOn);

　　这就是underscorejs所做到的。干净，简单，易读，短，没有中间变量，没有成堆的分号，简单非常优雅。

　　这是另外一些例子。

var i, result = [];for(i = 0; i < someArray.length; i++) { var someThing = someArray[i]; // 打到这，我已经手疼了 if(someThing.isAwesome === true) {   result.push(someArray[i]); }}

　　同样，一个使用循环浪费时间的典型用例。即便这些网站是宣传禁烟和素食主义的，看到这些代码我也感到义愤。看看简单的写法。

var result = _.filter(someArray, function(someThing) { return someThing.isAwesome === true;})

　　像underscore中的filter（过滤）的名字那样，随手写的3行代码就可以给你一个新的数组（array)。

　　或者你想把这些数组转换成另外一种形式？

var result = _.map(someArray, function(someThing) { return trasformTheThing(someThing);})

　　上面三个例子在日常生活中已经够用了，但这些功能还不足矣让underscore放到台面上。

var grandTotal = 0, somePercentage = 1.07, severalNumbers = [33, 54, 42], i; // don't forget to hoist those indices;for(i = 0; i < severalNumbers.length; i++) { var aNumber = severalNumbers[i]; grandTotal += aNumber * somePercentage;}

　　underscore版本

var somePercentage = 1.07, severalNumbers = [33, 54, 42], grandTotal;grandTotal = _.reduce(severalNumbers, function(runningTotal, aNumber) { return runningTotal + (aNumber * somePercentage);}, 0)

　　这个刚开始看上去可能有点怪，我查了下关于reduce的文档，知道了它的存在。因为我拒绝使用循环，所以它是我的首选。上面这些东西仅仅是入门，underscorejs库还有一大堆牛B的功能。

　　30天不使用循环的挑战。

　　在一下一个30天里，不要使用任何循环，如果你看到一堆讨厌和粗糙的东西，用each或者map将他们替换掉。再用一点reducing。

　　你需要注意到，Underscore是通往函数式编程的。一种看得见，看不见的方式。一条很好的途径。

　　OurJS注*目前现代浏览器已经支持each, filter, map, reduce方法，但underscore库可以实现对旧版IE的兼容，下面是使用ES5原生方法写的例子：

[3,4,5,3,3].forEach(function(obj){  console.log(obj);});[1,2,3,4,5].filter(function(obj){  return obj < 3});[9,8,5,2,3,4,5].map(function(obj){  return obj + 2;});[1,2,3,4,5].reduce(function(PRe, cur, idx, arr) {  console.log(idx);  //4 个循环: 2-5  return pre + cur;});  //15//sort方法同样很有用[9,8,5,2,3,4,5].sort(function(obj1, obj2){  return obj1 - obj2;});

　　原文 joelhooks.com