停止使用循环，用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]);
  }
}

自从有了underscore.js，就可以不写循环达到同样的目的。

_.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]);
  }
}

同样，一个使用循环浪费时间的典型用例，看看用underscore.js的写法。

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的功能。

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

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

目前现代浏览器已经支持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;
});

Chrome浏览器上运行结果如下：

文章来源：http://ourjs.com/detail/52f444d04534c0d80600001f

原文地址：http://www.joelhooks.com/blog/2014/02/06/stop-writing-for-loops-start-using-underscorejs/?utm_source=ourjs.com

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

猜你喜欢