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 提供了多种方法,通过它来 ...
随机推荐
- 什么是publickeytoken及publickeytoken的作用
什么是publickeytoken及publickeytoken的作用 dll的publickeytoken的作用.
- 1214 - Large Division -- LightOj(大数取余)
http://lightoj.com/volume_showproblem.php?problem=1214 这就是一道简单的大数取余. 还想还用到了同余定理: 所谓的同余,顾名思义,就是许多的数被一 ...
- VMware 搭建 虚拟机设置 静态IP地址配置
第一步: 第二部:注意网关 第三步: 在配置CentOs安装的时候,记得勾选
- js-正则表达式的替换
正则表达式替换使用的是replace()方法.Replace()方法是用一些字符途欢另一些字符 语法:stringObject.replace(regexp,replacement) regexp 必 ...
- VS2013 密钥 – 所有版本(Visual Studio Ultimate,Premium,Professional,TFS)
Visual Studio Ultimate 2013 KEY(密钥):BWG7X-J98B3-W34RT-33B3R-JVYW9 Visual Studio Premium 2013 KEY(密钥) ...
- Python读取文本,输出指定中文(字符串)
因业务需求,需要提取文本中带有检查字样的每一行. 样本如下: 1 投入10kVB.C母分段820闭锁备自投压板 2 退出10kVB.C母分段820备投跳803压板 3 退出10kVB.C母分段820备 ...
- C# 计算字符串在控制台中的显示长度
var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...
- 原生js-焦点图轮播
首先是html实现页面结构及主程序 <!doctype html> <html> <head> <meta charset="utf-8" ...
- MongoDB学习笔记—02 MongoDB入门
Mongodb的基本概念 文档:是MongoDB中数据的基本单元,类似于关系型数据库中的行. 集合:多个文档组成一个集合,类似于关系型数据库中的表. 数据库:MongoDB的当个实例可以容纳多个独立的 ...
- CreateCompatibleDC 与 CreateCompatibleBitmap 小小结
通常使用CreateCompatibleBitmap时候都会用到CreateCompatibleDC.而是用CreateCompatibleDC的目的不是为CreateCompatibleBitmap ...