`

停止使用循环,用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

  • 大小: 24.5 KB
分享到:
评论

相关推荐

    使用第三方模块Underscore.js,Immutable.js,UUID(源代码+截图)

    使用第三方模块Underscore.js,Immutable.js,UUID(源代码+截图)使用第三方模块Underscore.js,Immutable.js,UUID(源代码+截图)使用第三方模块Underscore.js,Immutable.js,UUID(源代码+截图)使用第三方模块...

    underscore应用

    通过阅读源码,我们可以学习到如何优雅地编写高效、简洁的JavaScript代码。 五、实战示例 为了更好地掌握underscore,可以尝试以下实战练习: 1. 使用`_.each()`遍历DOM节点并改变样式。 2. 利用`_.filter()`筛选...

    Underscore javascript库 使用教程.zip

    underscore javascript库 使用教程.zip

    underscore1.5.2中文帮助

    Underscore.js 是一个功能...通过了解上述知识点,开发者可以更深入地掌握Underscore.js的使用方法和最佳实践,提高开发效率和代码质量。此外,积极与开源社区合作,贡献代码和反馈问题,有助于库的持续改进和维护。

    Underscore.php——Underscore.js的php移植版

    注意:Underscore.php的原作者是老牌PHP程序员,其中使用静态调用方式访问非静态方法时php会提示Strict Standards: Non-static method的严谨性警告,不过只需要在php脚本的头部添加: error_reporting(E_ALL & ~E_...

    underscore

    underscore js工具类,underscore为集合类对象提供了一致的接口

    underscore-1.6.0.zip

    underscore库的核心思想是提供一套实用的函数,用于处理数组、对象、函数等基本数据类型,同时提供了一些辅助工具,使得JavaScript代码更易于理解和维护。它的设计目标是对JavaScript语言进行补充,而非替代,使得...

    underscore源码学习计划

    1. _.each():遍历数组或对象,是Underscore.js中最基础的迭代函数,可用于执行循环操作。 2. _.map():对数组中的每个元素应用一个函数并返回新的数组,实现了函数映射。 3. _.filter():根据指定的测试函数过滤...

    前端项目-underscore-contrib.zip

    通过深入研究和应用"underscore-contrib",开发者可以在项目中实现更加高效、优雅的代码编写。同时,理解并熟练使用这类工具库,也是提升个人技术水平和团队协作效率的关键步骤。在不断变化的前端开发环境中,掌握...

    underscore-1.4.3.zip

    例如,我们可以使用`_.each`遍历JSON数据,结合`_.filter`和`_.map`进行数据过滤和转换,再用`_.reduce`进行聚合计算。对于异步操作,`_.debounce`和`_.throttle`则可以帮助我们优化性能,防止频繁触发的事件导致的...

    underscore.js帮助文档

    在实际开发中,Underscore.js的这些功能可以帮助我们编写更高效、更简洁的代码。比如在处理数据时,我们可以方便地使用`_.map`、`_.filter`和`_.reduce`进行数组的转换和计算;在处理对象时,`_.keys`和`_.values`...

    Learning Underscore.js

    Explore the Underscore.js library by example using a test-driven development approach About This Book Understand and learn to apply functional programming principles using the built-in functions of ...

    前端项目-underscore.string.zip

    通过对"前端项目-underscore.string.zip"的解压分析,我们发现其中包含的是underscore.string的源码仓库"underscore.string-master",接下来我们将详细解读其核心功能和使用方法。 首先,underscore.string是...

    underscore.js 1.8.2

    underscore.js官方出的最新版本,与backone.js一起使用。

    Underscore ,是js的一个实用库

    由于其小巧且功能强大,Underscore.js成为了JavaScript开发者的得力助手,帮助他们写出更清晰、更易于维护的代码。 通过深入理解和熟练运用Underscore提供的这些工具,开发者可以更好地应对复杂的编程挑战,提升...

    js,jquery,underscore api文档

    Underscore_js.mht文件包含了Underscore.js的完整文档,可以帮助开发者理解和使用这些工具方法,提高代码的可读性和可维护性。 jQuery_CookBook中文版.pdf可能是一本关于jQuery实践的书籍,包含了许多解决实际问题...

    underscore-min.js 1.8.3

    underscore-min.js

    underscore解析

    underscore源码解析

Global site tag (gtag.js) - Google Analytics