JavaScript工具库之Lodash详解

Lodash简介与背景

前言

你是否经常为JavaScript中的数据转换、匹配和查找操作感到困扰？虽然foreach看似简单，但冗长的代码往往需要不断重复编写。或许你已经使用了Underscore.js，这确实是一个进步。然而，本文建议进一步升级，使用Lodash来替代Underscore，以获得更好的开发体验。

Lodash最初是Underscore.js的一个分支，因为主要贡献者在开发方向上存在分歧。John-David Dalton的初衷是提供更一致的跨浏览器行为并提升性能。随着项目的发展，Lodash在原有成功的基础上取得了显著成就。近期发布的3.5版本使其成为npm仓库中依赖最多的库，逐渐从边缘工具转变为开发者的常规选择。

目前，许多知名开源项目已迁移或开始使用Lodash，例如JavaScript转译器Babel、博客平台Ghost以及项目脚手架工具Yeoman。特别是Ghost从Underscore迁移至Lodash后，其创始人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函数实现。

数组转Map对象转换

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查看。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。