伊莉討論區

標題: 網頁前端Javascript套件:Lodash.js [打印本頁]

作者: Semisphere    時間: 2017-2-2 10:34 PM     標題: 網頁前端Javascript套件:Lodash.js

Lodash.js
https://lodash.com/

推薦一網頁前端Javascript套件:Lodash.js。Lodash一開始是Underscore庫的一個fork,開發者John-David Dalton的最初目標是提供更多一致的跨流覽器行為,並改善Underscore性能,但因為和其他(Underscore的)貢獻者意見相左,故從中獨立出來。

Lodash可以把它看成是對JavaScript底層的功能擴充,知名JavaScript庫 jQuery也是有自行擴充對陣列的操作。像是Function、Array、Object這些原生的物件,Lodash都亦增加了許多方法,相較於JQuery非常多,可說是專門處理數據或進行演算法開發的JavaScript擴充函式庫。且如同jQuery在全部函數前加全域的「$」一樣,Lodash可使用全域的底線「_」符號來進行快速呼叫使用。

Lodash於3.0對鏈式方法(chain method)進行延遲計算,意味著在調用.value()之前不會執行各函式的實體,因此Lodash可以進行如short cut fusion(以最佳化方法整併多種函式成一被呼叫的函式)優化,藉此降低運算次數來達到效能的提昇。而Lodash另一種特性是便利於將Javascript以函數式程式語言(Functional Programming)的思路推進,實踐函式之交換律與結合律等諸多數學性質。

Lodash英文版線上手冊
https://lodash.com/docs/4.17.4

Lodash簡體版線上手冊
http://lodash.think2011.net/sortBy

Lodash FP Guide函數式程式語言指引
https://github.com/lodash/lodash/wiki/FP-Guide

Lodash 4.0版相較3.0新增多種方法,並放棄對IE6至IE8的支持,詳細更新內容見:
https://segmentfault.com/a/1190000004305586

以下使用Lodash 4.0版示範操作與處理數據。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Lodash Demo</title>
  5.     <meta charset="utf-8">

  6.     <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

  7.     <script>


  8.       var t1 = _.union([2, 1], [4, 2], [1, 2]);
  9.       console.log(t1)
  10.       //Array [ 2, 1, 4 ]


  11.       var t2 = _.zipObject(['a', 'b'], [1, 2]);
  12.       console.log(t2)
  13.       //Object { a: 1, b: 2 }
  14.       
  15.       
  16.       var t3 = _.without([1, 2, 1, 3, 5, 6, 7], 1, 2);
  17.       console.log(t3)
  18.       //Array [ 3, 5, 6, 7 ]
  19.       
  20.       
  21.       function square(n) {
  22.         return n * n;
  23.       }
  24.       var t4 = _.map({ 'a': 4, 'b': 8 }, square);
  25.       console.log(t4)
  26.       //Array [ 16, 64 ]
  27.       
  28.       
  29.       var t5 = _.shuffle([1, 2, 3, 4]);
  30.       console.log(t5)
  31.       //Array [ 3, 1, 4, 2 ], 因隨機排序故可能非顯示此組數據
  32.       
  33.       
  34.       var t6 = _.invokeMap([[5, 1, 7], [3, 2, 1]], 'sort');
  35.       console.log(JSON.stringify(t6))
  36.       //[[1,5,7],[1,2,3]]
  37.       
  38.       
  39.       var users = [
  40.         { 'user': 'fred',   'age': 48 },
  41.         { 'user': 'barney', 'age': 36 },
  42.         { 'user': 'fred',   'age': 42 },
  43.         { 'user': 'barney', 'age': 34 }
  44.       ];
  45.       var t7 = _.sortBy(users, function(o) { return o.age; });
  46.       console.log(JSON.stringify(t7))
  47.       //[{"user":"barney","age":34},{"user":"barney","age":36},{"user":"fred","age":42},{"user":"fred","age":48}]
  48.       
  49.       
  50.       var t8 = _.chain({ 'a': 3, 'b': 7, 'c': 3 })
  51.       .map(function (v) {
  52.           return 'uniq:' + v;
  53.       })
  54.       .uniq()
  55.       .join(', ')
  56.       .value();
  57.       console.log(t8)
  58.       //uniq:3, uniq:7
  59.       

  60.     </script>

  61. </head>
  62. <body>
  63. </body>
  64. </html>
複製代碼





歡迎光臨 伊莉討論區 (http://s03.p02.eyny.com/) Powered by Discuz!