在GitHub上寻找第三方控件react-native-atoz-list
时,在项目中发现了lodash,出于好奇,就去了解了一下,发现它真的方便快捷,好用到爆,在此记录一下。
一、什么是lodash?
lodash库是一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库。
lodash是一个javascript库,也是Node JS的常用模块,它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数,其中部分是目前 ECMAScript 尚未制定的规范,但同时被业界所认可的辅助函数。
二、lodash相关文档
API文档:
Lodash简书文章推荐:
三、lodash模块组成
- Array,适用于数组类型,比如填充数据、查找元素、数组分片等操作;
- Collection,适用于数组和对象类型,部分适用于字符串,比如分组、查找、过滤等操作;
- Function,适用于函数类型,比如节流、延迟、缓存、设置钩子等操作;
- Lang,普遍适用于各种类型,常用于执行类型判断和类型转换;
- Math,适用于数值类型,常用于执行数学运算;
- Number,适用于生成随机数,比较数值与数值区间的关系;
- Object,适用于对象类型,常用于对象的创建、扩展、类型转换、检索、集合等操作;
- Seq,常用于创建链式调用,提高执行性能(惰性计算);
- String,适用于字符串类型;
四、安装及使用
以_.groupBy()方法为例来讲:
(一)使用方法
- 安装命令:
npm i --save lodash
- 使用方法:
import _ from 'lodash';
let names = require('./names');
names = _.groupBy(require('./names'), (name) => name[0].toUpperCase());
(二)参数详细介绍
QQ20171102-230315@2x.png QQ20171102-230256@2x.png QQ20171102-225204@2x.png五、举个“栗”子
我们要实现分组的城市列表,类似于微信中的通信录列表,上张图:
QQ20171109-154325@2x.png假设我们现在只有这样的数据:
WX20171103-134040@2x.png那怎么实现呢?
用groupBy就可以实现分组啦~
...
import _ from 'lodash';
let cities = require('./beforeCity.json');
...
getCityInfo(){
console.log('cities=',cities);
let cityList = [];
cityList = _.groupBy(cities, (city) => city.pinyin[0]);
console.log('cityList=',cityList);
}
...
分组结果如下:
QQ20171109-153220@2x.png这样分组之后是不是就很方便了呢?
lodash库还有其他的方法,有兴趣的朋友可以自行研究。
网友评论