實用工具庫Lodash

時間 2020-04-10

標籤實用工具 lodash 简体版

原文原文鏈接

Lodash是一個能夠提升開發者效率、提升原生JS方法性能的 JavaScript 第三方實用工具庫；
Lodash特色就是一致性、模塊化、高性能。業界赫赫有名，其不須要引入其餘第三方依賴，咱們在使用的過程當中能夠封裝好的方法；（其模塊化特別適用於：建立符合功能的函數、遍歷 array（數組）、object （對象）和 string（字符串）等）
Lodash使用了一個簡單的 _ 符號，十分簡潔。

1、引入Lodash

使用Lodash.js，有如下幾種方式引入Lodash.js開發包：css

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的依賴包，具體以下：

安裝依賴html

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

根據須要，掛載依賴包，例node

// 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_。

2、使用Lodash

之因此咱們選擇Lodash，主要是由於Lodash經過使用數組，數字，對象，字符串等方法，使JavaScript變得更加的簡單，大大提升了開發效率。
如下方法，在引入相關的loash依賴包後，就能夠按照官方文檔直接調用相關的方法來運行

_.cloneDeep（深克隆）衆所周知：在JS中深度克隆對象是比較困難的，例:JSON.parse(JSON.stringify(obj)) 進行深度克隆。可是，這種方案僅在對象內部沒有方法的時候纔可行，否則行不通的。webpack
```
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 都是被認爲是「假值」。web
```
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與任何數組或值鏈接在一塊兒，返回鏈接後的新數組。chrome

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 沒法被分割成所有等長的區塊，那麼最後剩餘的元素將組成一個區塊。返回一個包含拆分區塊的新數組（注：至關於一個二維數組）。npm
```
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更加簡潔和易於理解。dom

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

_.map() 是原生JS中的數組方法的升級版，咱們能夠經過一個字符串而不是回調函數來瀏覽深度嵌套的對象屬性iphone

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

_.random () 該方法也是比較強大與靈活的，咱們能夠只傳入一個參數做爲最大值，也能夠指定返回的結果爲浮點數。例：
```
function randomNum(min, max){
    return Math.floor(Math.random() * (max - min)) + min;
}
console.log(randomNum(12, 18));

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