一、什么是lodash?

lodash库是一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库。
lodash是一个javascript库,也是Node JS的常用模块,它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数,其中部分是目前 ECMAScript 尚未制定的规范,但同时被业界所认可的辅助函数。

二、lodash相关文档

API文档:

三、lodash模块组成

  • Array,适用于数组类型,比如填充数据、查找元素、数组分片等操作;
  • Collection,适用于数组和对象类型,部分适用于字符串,比如分组、查找、过滤等操作;
  • Function,适用于函数类型,比如节流、延迟、缓存、设置钩子等操作;
  • Lang,普遍适用于各种类型,常用于执行类型判断和类型转换;
  • Math,适用于数值类型,常用于执行数学运算;
  • Number,适用于生成随机数,比较数值与数值区间的关系;
  • Object,适用于对象类型,常用于对象的创建、扩展、类型转换、检索、集合等操作;
  • Seq,常用于创建链式调用,提高执行性能(惰性计算);
  • String,适用于字符串类型;

四、安装及使用

以_.groupBy()方法为例来讲:

(一)使用方法
  1. 安装命令:npm i --save lodash
  2. 使用方法:
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);
}
...

分组结果如下:

 

最新文章

  1. PL/0编译器实践---后记
  2. Redis 5种数据结构使用及注意事项
  3. 浅谈JSON
  4. iOS项目旋转控制
  5. Android项目实战(九):CustomShapeImageView 自定义形状的ImageView
  6. 自定义的 ListBoxItem 自适应ListBox的宽度
  7. 使用easyUI 创建复杂的toolbar到datagrid
  8. InputFormat,OutputFormat,InputSplit,RecordRead(一些常见面试题),使用yum安装64位Mysql
  9. Asp.Net底层解析
  10. 用Apache实现一个ip虚拟多个web站点
  11. laravel框架——线上环境错误总结
  12. [每日一题] OCP1z0-047 :2013-08-14 如何理解USING INDEX?...................................41
  13. 移动tempdb导致数据库服务不能启动
  14. winform利用委托delegate进行窗体间通信,相同标题已经存在??
  15. POJ3191-The Moronic Cowmpouter
  16. oracle 数据库中(创建、解锁、授权、删除)用户
  17. Mysql存中文字符出错:Incorrect string value: '\xC2\xE9\xD7\xED\解决方法
  18. Python 库汇总英文版
  19. 利用函数回调获取setInterval中返回的值
  20. pthon爬虫(9)--Selenium的用法

热门文章

  1. C# 跨域 请求带cookie
  2. C++语言第一课的学习
  3. 9、共享变量(Broadcast Variable和Accumulator)
  4. 怎么样在vue-cli的项目里面引入element ui
  5. ICEM-轴
  6. 使用Xpose突破安卓App禁止截屏限制
  7. “都是为了生活”小组 选题 Scrum立会报告+燃尽图 01
  8. Nginx-实践篇(重要)
  9. 解释一下 Flux
  10. 批量管理工具:pssh/ansible