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演示。
JavaScript工具库之Lodash的更多相关文章
- 非常好用的JavaScript 工具库--lodash
一.什么是lodash? lodash库是一个具有一致接口.模块化.高性能等特性的 JavaScript 工具库. lodash是一个javascript库,也是Node JS的常用模块,它内部封装了 ...
- JS工具库之Lodash
破狼 JavaScript工具库之Lodash 2015-04-11 16:08 by 破狼, 235 阅读, 2 评论, 收藏, 编辑 你还在为JavaScript中的数据转换.匹配.查找等烦恼吗? ...
- 2018年你需要知道的13个JavaScript工具库
译者按: 你可能已经用到Underscore或者Lodash.本文列举了13个常用的JavaScript工具库来提高开发效率. 原文: 11 Javascript Utility Libraries ...
- JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布
JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布 研究了一年多的js,也差不多写一个自己的js库了.我写这个不算框架,只是一个小型的js工具 ...
- javascript之 JavaScript 工具库
javascript之 JavaScript 工具库jQuery 目录: 一.查找标签和事件绑定以及操作标签的对比 二.DOM对象和jquery的转换 三.$(document).ready( ) ...
- JavaScript工具库
jPublic 交流QQ群:1017567122 前言 在我们开发项目的时候,无论项目规模大小,在所难免会写一些工具型函数来解决一些问题,随着项目开发和维护的时间越来越长,这些工具型函数会越来越多,同 ...
- underscore javascript工具库支持seajs模块化
underscore是一个很有用的js工具库,但是好像默认不支持seajs模块化 新建一个文件例如叫做xx.js 谈后,键入 define(function(require,exports,modul ...
- JavaScript工具库 lodash 中文文档 英文文档
https://lodash.com/docs/ 英文版 http://lodashjs.com/docs/ 中文版 http://www.css88.com/doc/lodash/ 中文版 ...
- 2014年3月新鲜出炉的最佳 JavaScript 工具库
一个 JavaScript 库是预先编写的 JavaScript 程序,用于简化 Web 应用程序开发,特别是对 Ajax 和其它 Web 为中心的技术.JavaScript 提供了多种方法,通过它来 ...
随机推荐
- MyISAM和InnoDB索引区别
MyISAM引擎使用B+Tree作为索引结构,叶节点的data域存放的是数据记录的地址.下图是MyISAM索引的原理图: 图8 这里设表一共有三列,假设我们以Col1为主键,则图8是一个MyISAM表 ...
- Linux下chkconfig命令详解
chkconfig命令主要用来更新(启动或停止)和查询系统服务的运行级信息.谨记chkconfig不是立即自动禁止或激活一个服务,它只是简单的改变了符号连接. 使用语法:chkconfig [--ad ...
- PS:缝线颜色随着鞋帮颜色的改变发生改变.files
1.绘制逼真缝线 (1)新建两个图层,并且命名为“针眼”和“缝线”: (2)选择“铅笔”工具,像素为“2”: (3)在针孔图层上进行缝线路径描边,并双击图层,弹出“图层样式”窗口,选择“斜面与浮雕”- ...
- 题目:利用条件运算符的嵌套来完成此题:学习成绩>=90分的同学用A表示,60-89分之间的用B表示,60分以下的用C表示。
public class Five_05 { public static void main(String[] args) { Scanner input=new Scanner(System.in) ...
- 误打误撞写了段能让电脑奔溃的JS代码,但是自己不知道为什么,高手看到可以解答下吗?
代码如下: <script> for(i=1;j=3*i;i++){ for(;j<=50;){ document.write(j+"<br>") } ...
- php memcache扩展 出现错误dyld: Symbol not found: _mmc_queue_free
mac 10.10 系统安装php memcache扩展 在使用memcache的时候出现错误dyld: Symbol not found: _mmc_queue_free需要重新编译memcache ...
- java 获取服务器 linux 服务器IP 信息
public String getUnixLocalIp() { String ip = ""; try { Enumeration<?> e1 = (Enumerat ...
- [转]SQL Server表锁定原理以及如何解除锁定
2010年10月13日 12:46 来源:部松昌的博客 作者:部松昌 编辑:胡铭娅 一: 下面以AdventureWorks2008为示例数据库做简要的说明,过滤掉一般的数据库的共享锁, 作为示例必须 ...
- C# abstract
Abstract: 1.用途:提供一个可供多个派生类共享的通用基类定义. 2.抽象类也可以定义抽象方法,方法是将关键字 abstract 添加到方法的返回类型的前面(抽象方法没有实现,所以方法定义后面 ...
- UI基础之UITextField相关
UITextField *textF = [[UITextField alloc] init]; 1.字体相关 textF.text = @"文本框文字"; textF.textC ...