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

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. mysql数据库开发规范

    对规范的遵守可用二八原则,不要教条.为满足实际需求 可忽视部分规范. 1.索引规范 *目标 |--利用最小的索引成本找到需要的行记录 *原则 |--做前缀匹配 |--选择区分度高的列做前缀索引列 |- ...

  2. p ython笔记第三天

    #!/usr/bin/env python# -*- coding:utf-8 -*- # v = "李杰"# for item in v:# print(item)####### ...

  3. sublimeText OmniMarkupPreviewer 404

    这个错误也是出现的莫名奇妙. "Error: 404 Not Found Sorry, the requested URL 'http://127.0.0.1:51004/view/29' ...

  4. html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 (学习HTML过程中的小记录)

    html/css  盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width     是"宽 ...

  5. 【转】C# 子窗体如何调用父窗体的方法

    网络上有几种方法,先总结如下: 调用窗体(父):FormFather,被调用窗体(子):FormSub. 方法1: 所有权法       //FormFather:        //需要有一个公共的 ...

  6. wordpress 开发日志及技巧收集

    搜索结果数量提示 <?php /* Search Count */ $allsearch = &new WP_Query("s=$s&showposts=-1" ...

  7. 创建自己的oracle解释计划

    1.解释计划 当使用explain plan来为一个查询生成预期的执行计划时,输出将包括一下几种: SQL访问的每一张表: 访问每张表的方法: 每一个需要联结的数据源所使用的联结方法: 按次序列出的所 ...

  8. SQL Server基础

    一.常用命令 1.使用命令行开启SQL Server服务 获取管理员权限的命令行工具: net start mssqlserver 开启sql server服务 net restart mssqlse ...

  9. 嵌入式中的 *(volatile unsigned int *)0x500 解释

    C语言中*(volatile unsigned int *)0x500的解释: 如下: (unsigned int *)0x500:将地址0x500强制转化为int型指针*(unsigned int ...

  10. 戏说PHP的嵌套函数

    PHP很早就支持嵌套函数了.并是不PHP5.3有闭包时才有的.然而,它却不是象JS,AS那样的闭包嵌套.即它的嵌套函数根本无闭包模式的逃脱. PHP嵌套函数有一些特别之处.最特别的是,当外部函数被调用 ...