1. 程式人生 > 實用技巧 >實用工具庫Lodash

實用工具庫Lodash

Lodash是一個可以提高開發者效率、提高原生js方法效能的JavaScript第三方實用工具庫;

Lodash特點就是一致性、模組化、高效能。業界赫赫有名,其不需要引入其他第三方依賴,我們在使用的過程中可以封裝好的方法;(其模組化特別適用於:建立符合功能的函式、遍歷 array(陣列)、object (物件)和 string(字串)等)

Lodash使用了一個簡單的_符號,十分簡潔。

一、 引入Lodash

使用Lodash.js,有以下幾種方式引入Lodash.js開發包:

js離線檔案引入:直接在Lodash中文網下載相關的lodash.js包,放在自己的開發專案中,然後在需要使用的檔案中引入:< script src="lodash.js">< /script>

cdn方式引入:一般使用bootcdn來直接線上引入,然後通過cdn加速檔案下載訪問:< script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.core.min.js">< /script >

直接通過安裝依賴注入,使用webpack或者glup的打包模式直接在自己的專案中掛載lodash的依賴包,具體如下:

安裝依賴

    $ npm i \-g npm  
    $ npm i \--save lodash 

根據需要,掛載依賴包,例

    // Load the full build.  
    var
\_ \= require('lodash'); // Load the core build. var \_ \= require('lodash/core'); // Load the FP build for immutable auto-curried iteratee-first data-last methods. var fp \= require('lodash/fp'); // Load method categories. var array \= require('lodash/array'); var object \= require('lodash/fp/object'); // Cherry-pick methods for smaller browserify/rollup/webpack
bundles. var at \= require('lodash/at'); var curryN \= require('lodash/fp/curryN');

注意:如需在 Node.js < 6 的REPL環境中使用 Lodash,請安裝n_。

二、 使用Lodash

之所以我們選擇Lodash,主要是因為Lodash通過使用陣列,數字,物件,字串等方法,使JavaScript變得更加的簡單,大大提高了開發效率。

以下方法,在引入相關的loash依賴包後,就可以按照官方文件直接呼叫相關的方法來執行

_.cloneDeep(深克隆) 眾所周知:在JS中深度克隆物件是比較困難的,例:JSON.parse(JSON.stringify(obj)) 進行深度克隆。但是,這種方案僅在物件內部沒有方法的時候才可行,不然行不通的。

var obj ={  
     a:{  
     b:100,  
     fun:function(){  
         console.log("fun");  
         }  
     }  
}  
 var obj2 = _.cloneDeep(obj);  
  
 obj.a.b=2000;  
  
 console.log(obj2.a.b,obj.a.b); // 100  2000  
 obj2.a.fun(); 

_.compact(array)建立一個除去原陣列中所有的假值元素的陣列。例如false, null,0," ", undefined, 以及 NaN 都是被認為是“假值”。

 var arr =[1,2,'',null,0,33,"aa"];  
 var temArr = _.compact(arr); // 把空值 null 0 false 統統去掉  
 console.log(temArr);  // [ 1, 2, 33, 'aa' ]

_.concat(array, [values])建立一個新陣列,將array與任何陣列 或 值連線在一起,返回連線後的新陣列。

var array = [1,2,3];
var other = _.concat(array, 2, [3], [[4,5,6]]);

console.log(other); // [ 1, 2, 3, 2, 3, [ 4, 5, 6 ] ]

console.log(array); // [ 1, 2, 3 ]

_.chunk(array, [size=1])按照size的大小來拆分array陣列,將陣列(array)拆分成多個 size 長度的區塊,並將這些區塊組成一個新陣列。 如果array 無法被分割成全部等長的區塊,那麼最後剩餘的元素將組成一個區塊。返回一個包含拆分割槽塊的新陣列(注:相當於一個二維陣列)。

var chunk1 = _.chunk(['a', 'b', 'c', 'd'], 2);
 console.log(chunk1);      // [['a', 'b'], ['c', 'd']]
var chunk2 = _.chunk(['a', 'b', 'c', 'd'], 3);
 console.log(chunk2);      // [['a', 'b', 'c'], ['d']]

_.includes(obj,ele,index)第一個引數是需要查詢的物件,第二個引數是需要查詢的元素,第三個引數是開始查詢的下標。

var obj = {
    'name': '張三',
    'age': 18
},
arr = ["張三", "李四", "王五", "趙六"];
console.log(_.includes(obj, '張三'));    // true
console.log(_.includes(arr, '李四'));    // true
console.log(_.includes(arr, '李四',2));  // false

_.times()比for更加簡潔和易於理解。

_.times(5,function(a){
console.log(a);  // 0 1 2 3 4
});

_.map()是原生JS中的陣列方法的升級版,我們可以通過一個字串而不是回撥函式來瀏覽深度巢狀的物件屬性

var arr = [{
    "name": "張三",
    "phone": [{"name": "MI"}, {"name": "iphone"}]
}, {
    "name": "李四",
    "phone": [{"name": "HUAWEI"}, {"name": "honor"}]
}];
var jsMap = arr.map(function (owner) {
    return owner.phone[0].name;
});
var lodashMap = _.map(arr, 'phone[0].name');
console.log(lodashMap);    // MI  HUAWEI

PPT模板下載大全https://www.wode007.com

_.random ()該方法也是比較強大與靈活的,我們可以只傳入一個引數作為最大值, 也可以指定返回的結果為浮點數。例:

function randomNum(min, max){
    return Math.floor(Math.random() * (max - min)) + min;
}
console.log(randomNum(12, 18));

console.log(_.random(12, 18));

先寫這麼多,還有很多方法可自行檢視中文文件,很詳細哦,如在測試或學習這些方法時遇到問題,可在下方留言或私信我呦~

支援: chrome 43以上、Firefox 38以上、IE 6以上、MS Edge、Safari 5以上、Node.js 8以上環境中測試通過。