JavaScript工具库之Lodash详解


Posted in Javascript onJune 15, 2019

前言

你还在为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 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
学习YUI.Ext第五日--做拖放Darg&Drop
Mar 10 Javascript
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
jQuery创建折叠式菜单
Jun 15 #jQuery
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 #Javascript
Async/Await替代Promise的6个理由
Jun 15 #Javascript
一些可能会用到的Node.js面试题
Jun 15 #Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 #Javascript
通过实例讲解JS如何防抖动
Jun 15 #Javascript
js笔试题-接收get请求参数
Jun 15 #Javascript
You might like
PHP新手上路(十四)
2006/10/09 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
PHP会话控制实例分析
2016/12/24 PHP
JScript的条件编译
2007/05/29 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
简述JS控制台的使用
2018/07/15 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
小小聊天室Python代码实现
2016/08/17 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
python实现飞行棋游戏
2020/02/05 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
管理学专业个人求职信范文
2013/09/21 职场文书
公司离职证明范本
2014/10/17 职场文书
工作收入证明模板
2015/06/12 职场文书
python 命令行传参方法总结
2021/05/25 Python
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技