很是好用的JavaScript 工具庫--lodash

1、什麼是lodash?

lodash庫是一個具備一致接口、模塊化、高性能等特性的 JavaScript 工具庫。
lodash是一個javascript庫，也是Node JS的經常使用模塊，它內部封裝了諸多對字符串、數組、對象等常見數據類型的處理函數，其中部分是目前 ECMAScript 還沒有制定的規範，但同時被業界所承認的輔助函數。

2、lodash相關文檔

API文檔：

• https://www.html.cn/doc/lodash/

3、lodash模塊組成

• Array，適用於數組類型，好比填充數據、查找元素、數組分片等操做；
• Collection，適用於數組和對象類型，部分適用於字符串，好比分組、查找、過濾等操做；
• Function，適用於函數類型，好比節流、延遲、緩存、設置鉤子等操做；
• Lang，廣泛適用於各類類型，經常使用於執行類型判斷和類型轉換；
• Math，適用於數值類型，經常使用於執行數學運算；
• Number，適用於生成隨機數，比較數值與數值區間的關係；
• Object，適用於對象類型，經常使用於對象的建立、擴展、類型轉換、檢索、集合等操做；
• Seq，經常使用於建立鏈式調用，提升執行性能（惰性計算）；
• String，適用於字符串類型；

4、安裝及使用

以_.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

5、舉個「慄」子

咱們要實現分組的城市列表，相似於微信中的通訊錄列表，上張圖：

 

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); } ... 

分組結果以下：