JavaScript工具庫之Lodash

標籤：

https://lodash.com/ 直擊現場

你還在為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工具庫之Lodash