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 相关文章推荐
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
Vue实现购物车功能
Apr 27 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
原生js实现随机点餐效果
Dec 10 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
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
模仿OSO的论坛(三)
2006/10/09 PHP
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
php批量上传的实现代码
2013/06/09 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
腾讯公司的一个sql题
2013/01/22 面试题
企业治理工作自我评价
2013/09/26 职场文书
安全教育心得体会
2013/12/29 职场文书
小班下学期评语
2014/05/04 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
教师先进事迹材料
2014/12/16 职场文书
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android