OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

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


分享到
分类 编程技巧   发布 ourjs  1391740112000
注意 转载须保留原文链接,译文链接,作者译者等信息。  
2014年2月

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

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;
});
原文地址: 点此
社区评论 ( Beta版 )
  • #0 学富五车 1391791450000
    js的each遍历,要比for效率低很多很多 加上有些引入splice和length的伪数组,会遍历出其他方法出来。
  • #1 痴心绝对 1391817703000
    @学富五车

    each不会,for会的。而且ES5的效率会高些。
  • #2 留井 1392600201000
    @痴心绝对

    underscore也是使用原生的forEach……
  • #3 redstone 1393394190000
    underscore,作为写js代码的必修课。
  • #4 孙支手 1491537950670

    装逼库

OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 你不知道的JavaScript用法,Hacker是这样写JS的
  2. QQ邮箱是如何泄密的:JSON劫持漏洞攻防原理及演练
  3. 那些用JavaScript写的操作系统
  4. 为什么大神级程序员的C语言代码里到处都是goto?
  5. 下一阶段的NodeJS:TJ负责Node,NPM可能要收费
  6. Web标准化正在消灭HTML程序员
  7. 告诉大家一个好消息,我被炒了!
  8. PayPal为什么从Java迁移到Node.js,性能提高一倍,文件代码减少44%
  9. NPM开始招人了
  10. 一名靠谱的JavaScript程序员应备的素质
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 编程技巧
  1. 不到30行JS代码实现的Excel表格,jQuery并非不可替代
  2. 如何在网页上隐藏你的Email邮件地址
  3. Ruby己死?NodeJS能否取代Ruby?
  4. 永远不要在Linux执行的10个最危险的命令
  5. 代码审查:写出好的 commit message
  6. 性能测评:Ngix_Lua, Node.JS Python三者性能相当,均比php快近一倍
  7. 技术干货:Nginx 战斗准备 — 优化指南
  8. 高级JavaScript调试—— console.table()
  9. NodeJS on Nginx: 使用nginx反向代理处理静态页面
  10. 优秀工具推荐:超实用的 CSS 库,样板和框架

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号