JavaScript工具库之Lodash

你还在为JavaScript中的数据转换、匹配、查找等烦恼吗?一堆看似简单的foreach,却冗长无趣,可仍还在不停的repeat it!也许你已经用上了Underscore.js,不错,你已经进步很大一步了。然而今天我希望你能更进一步,利用lodash替换掉 Underscore。

lodash一开始是Underscore.js库的一个fork,因为和其他(Underscore.js的)贡献者意见相左。John- David Dalton的最初目标,是提供更多“一致的跨浏览器行为……,并改善性能”。之后,该项目在现有成功的基础之上取得了更大的成果。最近lodash也发 布了3.5版,成为了npm包仓库中依赖最多的库。它正在摆脱屌丝身份,成为开发者的常规的选择之一。

现在我们所熟知的很多开源项目都已经使用或者转到了lodash阵营之上。比如JavaScript转译器Babel、博客平台Ghost,和项目 脚手架工具Yeoman。特别Ghost是从Underscore迁移到了lodash,Ghost的创始人John O’Nolan对于此曾评价到:“这是一个非常明智的选择,它几乎完全是由我们开源开发社区推动的。我们发现lodash包含更多的功能,更好的性能、恰 到好处地使用了semver,并且在Node.js社区(以及其他依赖)中越来越抢眼“。

lodash演练

lodash主要使用了延迟计算,使得lodash其性能远远超过Underscore。在lodash中延迟计算意味着在我们的链式方法在显示或 隐式的value()调用之前是不会执行的。由于这种执行的延后,因此lodash可以进行shortcut fusion这样的优化,通过合并链式iteratee大大降低迭代的次数。从而大大提供其执行性能。

百说不如一练,下面我们以用户信息为例:

var users = [
  { ‘user‘: ‘barney‘,  ‘age‘: 36 },
  { ‘user‘: ‘fred‘,    ‘age‘: 40 },
  { ‘user‘: ‘pebbles‘, ‘age‘: 18 }
];

1.获取所有用户名字,并以”,“分割

var names = _.chain(users)
  .map(function(user){
    return user.user;
  })
  .join(" , ")
  .value();
console.log(names);

个人比较喜欢lodash延迟计算的现实value,以及JavaScript的函数式风格。在这里首先将users对象包装成为lodash对象,再 map获取所有用户的名称,并最后利用join将用户名称以”,“连接在一起。注意这里只是一串方法链,如果你没有显样的调用value方法,使其立即执 行的化,你将会得到如下的LodashWrapper延迟表达式:

LodashWrapper {__wrapped__: LazyWrapper, __actions__: Array[1], __chain__: true, constructor: function, after: function…}

因为延迟表达式的存在,因此我们可以多次增加方法链,但这并不会被执行,所以不会存在性能的问题,最后知道我们需要使用的时候,使用value显式立即执行即可。

2. 获取最年轻的用户

 var youngest = _.chain(users)
  .min(function(user){
    return user.age;
  })
  .value();
console.log(youngest);

这里利用了lodash提供的min函数可以轻易的解决。

在这里博主还希望用另外一个方式解释lodash方法链的优化,上面的方法可以等价为下面的方式,以age排序的第一个user:

var youngest2 = _.chain(users)
  .sortBy("age")
  .map(function(user){
    console.log("map", user);
    return user;
  })
  .first()
  .value();
console.log(youngest2);

在这里博主多加了一个map作为log输出,如果你执行这行代码的时候,你会惊奇的看见这里只会有一个user的输出,这点可以证明在立即执行的时候lodash为我们的方法链做了可靠的优化;如果我们去掉first函数你则会看见有3个user对象的输出。

3. 获取最年长的用户

var oldest  = _.chain(users)
  .max(function(user){
    return user.age;
  })
  .value();

console.log(oldest );

这里则使用lodash的max函数。

4. 用户数组到用户Map的转换

在开发中我们经常会有把一堆素组形式的数据转换为Object形式的数组,便于根据属性key值查找,下面将以user对象来演示:

var userObj = _.chain(users)
  .map(function(user){
    return [user.user, user.age];
  })
  .zipObject()
  .value();
console.log(userObj);

利用lodash首先将user数组map为[key, value]的数组集合,最后利用zipObject将结果转换为Object对象,zipObject会利用结果集的第一项作为key,第二项作为value生产Object。

结尾

我们在这里展示知识lodash中很小一部分的API,正如随笔开始所说:lodash是为了提供更多“一致的跨浏览器行为……,并改善性能”API。所有的lodash API你可以在这里https://lodash.com/docs#matches查找。

本文的所演示的demo,你也可以在jsbin http://jsbin.com/xocixubaru/1/edit?html,js,output演示

摘自:http://www.cnblogs.com/whitewolf/p/4417873.html

时间: 2024-12-26 14:31:03

JavaScript工具库之Lodash的相关文章

JS工具库之Lodash

破狼 JavaScript工具库之Lodash 2015-04-11 16:08 by 破狼, 235 阅读, 2 评论, 收藏, 编辑 你还在为JavaScript中的数据转换.匹配.查找等烦恼吗?一堆看似简单的foreach,却冗长无趣,可仍还在不停的repeat it!也许你已经用上了Underscore.js,不错,你已经进步很大一步了.然而今天我希望你能更进一步,利用lodash替换掉Underscore. lodash一开始是Underscore.js库的一个fork,因为和其他(U

javascript之 JavaScript 工具库

javascript之 JavaScript 工具库jQuery 目录: 一.查找标签和事件绑定以及操作标签的对比 二.DOM对象和jquery的转换 三.$(document).ready( )  四.链式操作 五.元素的操作:取值和赋值 六.元素的操作:移动 七.工具方法 八.特殊效果 一.查找标签和事件绑定以及操作标签的对比 1.查找标签的对比*** (1)原生javascript document.getElementsByClassName("classname");//根据

雅虎宣布停止开发开源的JavaScript工具库YUI

雅虎官方博客宣布终止开发开源的JavaScript工具库Yahoo User Interface library (YUI). 雅虎开发者解释说,行业趋势发生了改变.过去几年,Web平台经历了激烈变革,相比以前如今的JavaScript几乎是无处不在.Node.JS的出现 允许JavaScript在服务器端使用, 以及新的包管理器如npm,构建工具如Grunt,应用程序框架,测试工具等的出现,使得YUI之类的大型JavaScript工具库不再像以前那样受到 社区的关注. 今天大多数开发者将大型J

JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布

JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布 研究了一年多的js,也差不多写一个自己的js库了.我写这个不算框架,只是一个小型的js工具库,所以我用的名字是Library.主要集合了我写js时一些常用的方法,并参考了prototype.js,jquery,google,百度,有啊等框架. 这个工具库的主要特点是: [跨浏览器]能在以下浏览器使用:IE6,IE7,IE8,Firefox 3.5.3,Chrome 3.0,Safari 4.

Underscore.js工具库

Underscore 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象. 他解决了这个问题:"如果我面对一个空白的 HTML 页面,并希望立即开始工作,我需要什么?" 他弥补了 jQuery 没有实现的功能,同时又是 Backbone 必不可少的部分. http://www.bootcss.com/p/underscore/

CSV.js – 用于 CSV 解析和编码的 JS 工具库

逗号分隔值(CSV )文件用于以以纯文本的形式存储表格化数据(数字和文本). CSV 文件包含任意数量的记录,通过某种换行符分隔,每条记录由字段,其他一些字符或字符串分隔,最常用的是文字逗号或制表符.CSV.js 是一个简单,超快的用于 CSV 解析和编码的 JavaScript 工具库,兼容浏览器,AMD 和 NodeJS 环境. 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[附源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12款经典的白富美型 jQuery 图片

【JavaScript 封装库】BETA 2.0 测试版发布!

1 /* 2 源码作者: 石不易(Louis Shi) 3 联系方式: http://www.shibuyi.net 4 =================================================================================================== 5 程序名称: JavaScript 封装库 BETA 2.0 版 6 迭代版本: BETA 1.0 7 功能总数: 50 个 8 新增总数: 6 个 9 删除总数: 0 个 1

【JavaScript 封装库】BETA 1.0 测试版发布!

1 /* 2 源码作者: 石不易(Louis Shi) 3 联系方式: http://www.shibuyi.net 4 =================================================================================================== 5 程序名称: JavaScript 封装库 BETA 1.0 版 6 迭代版本: Prototype 7 功能总数: 44 个 8 新增总数: 30 个 9 删除总数: 0 个

【JavaScript 封装库】BETA 4.0 测试版发布!

1 /* 2 源码作者: 石不易(Louis Shi) 3 联系方式: http://www.shibuyi.net 4 =================================================================================================== 5 程序名称: JavaScript 封装库 BETA 4.0 版 6 迭代版本: BETA 3.0 7 插件总数: 12 个 8 库方法数: 26 个 9 功能总数: 67 个