Lodash JS實用類庫 數組操作 延時執行 功能強大


Lodash

是一個一致性、模塊化、高性能的 JavaScript 實用工具庫。

中文文檔:https://www.lodashjs.com/docs/4.17.5.html

 

你還在為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查找。

實例(lodash debounce 實現input錄入防抖動):

我們在做input change 錄入內容監聽時,經常會遇到一個連續錄入的問題,比如我們的需求是,當用戶錄入完成后執行某一操作,遇到一個很實際的問題,只要用戶錄入開始就開始監聽並執行, 比如一個單詞 hello 錄入了就會執行 5次處理方法,我們希望的是錄入完 一個單詞 或 一個關鍵字 后停頓超過1秒鍾再開始執行處理方法,lodash 的 debounce 方法就是做這種防抖動 操作的 

$('#name').bind('input propertychange', _.debounce(
   function() {
      //拼接郵件字符串
      $('#email').val($(this).val()+'@qq.com');
       console.log(22);
   },
   1000,
   {
       'leading': true,
       'trailing': false
   })
);

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM