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

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

停止使用循环 教你用underscore优雅的写代码的更多相关文章

  1. python基础===如何优雅的写代码(转自网络)

    本文是Raymond Hettinger在2013年美国PyCon演讲的笔记(视频, 幻灯片). 示例代码和引用的语录都来自Raymond的演讲.这是我按我的理解整理出来的,希望你们理解起来跟我一样顺 ...

  2. 手把手教你整合最优雅SSM框架

    我们看招聘信息的时候,经常会看到这一点,需要具备 SSM 框架的技能, SpringMVC 可以完全替代 Struts,配合注解的方式,编程非常快捷,而且通过 restful 风格定义 url,让地址 ...

  3. js中如何优雅的写if判断

    我们编写js代码时经常遇到复杂逻辑判断的情况,通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,代码中的if/else/switch会变得越来越臃 ...

  4. 教你如何使用Java手写一个基于链表的队列

    在上一篇博客[教你如何使用Java手写一个基于数组的队列]中已经介绍了队列,以及Java语言中对队列的实现,对队列不是很了解的可以我上一篇文章.那么,现在就直接进入主题吧. 这篇博客主要讲解的是如何使 ...

  5. 如何写出优雅的JavaScript代码 ? && 注释

    如何写出优雅的JavaScript代码 ? 之前总结过一篇<如何写出优雅的css代码?>, 但是前一段时间发现自己的js代码写的真的很任性,没有任何的优雅可言,于是这里总结以下写js时应当 ...

  6. 如何写出优雅的CSS代码 ?(转)

    对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...

  7. 使用 Promises 编写更优雅的 JavaScript 代码

    你可能已经无意中听说过 Promises,很多人都在讨论它,使用它,但你不知道为什么它们如此特别.难道你不能使用回调么?有什么了特别的?在本文中,我们一起来看看 Promises 是什么以及如何使用它 ...

  8. 如何写出优雅的css代码 ?

    如何写出优雅的css代码 ? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于 ...

  9. 如何优雅的写一篇安利文-以Sugar ORM为例

    前言 我最近喜欢把写的十分优美的技术文章叫做安利文.首先,文章必须是原创而非软广:其次,阅读之后不仅能快速吸纳技术要点并入门开发,还能感同身受的体会作者热情洋溢的赞美和急于分享心得体验的心情,让人感觉 ...

随机推荐

  1. IOS下载资源zip到本地然后读取

    思路是 1.ios下载服务器上的zip资源包(图片,声音等经过zip压缩的资源包)到本地 2.解压zip到程序目录 3.从程序目录加载资源文件 一.下载zip资源 [cpp]-(NSString*)D ...

  2. [转]Openwrt的Inittab

    转来一篇关于启动的文章,特意收藏.http://see.sl088.com/wiki/Inittab 文件位于/etc/inittab编辑方法vi /etc/inittab初始内容::sysinit: ...

  3. Oracle 错误代码

    ORA-00001: 违反唯一约束条件 (.) ORA-00017: 请求会话以设置跟踪事件 ORA-00018: 超出最大会话数 ORA-00019: 超出最大会话许可数 ORA-00020: 超出 ...

  4. Apache+tomcat集群配置

    一.软件准备 Apache 2.2 : http://httpd.apache.org/download.cgi,下载msi安装程序,选择no ssl版本 Tomcat 6.0 : http://to ...

  5. hive hwi使用

    hwi(hive web interface)是hive命令行接口的补充. 使用方法: 1.配置: 在配置文件hive-site.xml 中,默认有hwi的配置 <property> &l ...

  6. IOS中的UINavigationController(导航控制器)

    UINavigationController UINavigationControlle:导航控制器,是iOS中最常用的多视图控制器之一,它用来管理多个试图控制器 导航控制器可以认为是管理控制器的控制 ...

  7. (转)前端构建工具gulp入门教程

    前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...

  8. Linux I/O总结

    文件流 标准I/O文件流可用于单字节或多字节字符集.流的定向决定了所读写的是单字节还是多字节.流在最初创建时,并没有定向,此时如果在为定向的流上使用多字节I/O函数,那么该流被设置为宽定向的:如果在为 ...

  9. 008--VS2013 C++ 位图半透明化(另一种显示)

    注:主要变化是在下面这张位图上的操作 //全局变量HBITMAP bg, girl;HDC mdc;//起始坐标const int xstart = 50;const int ystart = 20; ...

  10. JAVA类与对象(九)------多态

    多态是同一个行为具有多个不同表现形式或形态的能力.多态性是对象多种表现形式的体现. 多态存在的三个必要条件: 继承 重写 父类引用指向子类对象 例:Parent p = new Child(); 当使 ...