使用underscore简化原生js笨重的写法

2016年06月07日 javascript 暂无评论 阅读 19 views 次

你一天(一周)内写了多少个循环?

Js代码  收藏代码
  1. var i;
  2. for(i = 0; i < someArray.length; i++) {
  3.   var someThing = someArray[i];
  4.   doSomeWorkOn(someThing);
  5. }

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

Js代码  收藏代码
  1. var i,j;
  2. for(i = 0; i < someArray.length; i++) {
  3.   var someThing = someArray[i];
  4.   for(j = 0; j < someThing.stuff.length; j++) {
  5.       doSomeWorkOn(someThing.stuff[j]);
  6.   }
  7. }

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

Js代码  收藏代码
  1. _.each(someArray, function(someThing) {
  2.   doSomeWorkOn(someThing);
  3. })

或者更好一点:

Js代码  收藏代码
  1. _.each(someArray, doSomeWorkOn);

这就是underscorejs所做到的。干净,简单,易读,短,没有中间变量,没有成堆的分号,简单非常优雅。如下是另外一个例子。

Js代码  收藏代码
  1. var i,result = [];
  2. for(i = 0; i < someArray.length; i++) {
  3.   var someThing = someArray[i];
  4.   if(someThing.isAwesome === true) {
  5.       result.push(someArray[i]);
  6.   }
  7. }

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

Js代码  收藏代码
  1. var result = _.filter(someArray, function(someThing) {
  2.   return someThing.isAwesome === true;
  3. })

像underscore中的filter(过滤)的名字那样,随手写的3行代码就可以给你一个新的数组(array),或者你想把这些数组转换成另外一种形式。

Js代码  收藏代码
  1. var result = _.map(someArray, function(someThing) {
  2.   return trasformTheThing(someThing);
  3. })

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

Js代码  收藏代码
  1. var grandTotal = 0,
  2.   somePercentage = 1.07,
  3.   severalNumbers = [33, 54, 42],
  4.   i; // don't forget to hoist those indices;
  5. for(i = 0; i < severalNumbers.length; i++) {
  6.   var aNumber = severalNumbers[i];
  7.   grandTotal += aNumber * somePercentage;
  8. }

underscore版本

Js代码  收藏代码
  1. var somePercentage = 1.07,
  2.   severalNumbers = [33, 54, 42],
  3.   grandTotal;
  4. grandTotal = _.reduce(severalNumbers, function(runningTotal, aNumber) {
  5.   return runningTotal + (aNumber * somePercentage);
  6. }, 0)

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

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

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

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

Js代码  收藏代码
  1. [3,4,5,3,3].forEach(function(obj){
  2.     console.log(obj);
  3. });
  4. [1,2,3,4,5].filter(function(obj){
  5.     return obj < 3
  6. });
  7. [9,8,5,2,3,4,5].map(function(obj){
  8.     return obj + 2;
  9. });
  10. [1,2,3,4,5].reduce(function(pre, cur, idx, arr) {
  11.     console.log(idx);    //4 个循环: 2-5
  12.     return pre + cur;
  13. });   //15
  14. //sort方法同样很有用
  15. [9,8,5,2,3,4,5].sort(function(obj1, obj2){
  16.     return obj1 - obj2;
  17. });

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

给我留言

您必须 登录 才能发表留言!