lodash入門

簡介

Lodash是一個著名的javascript原生庫，不須要引入其餘第三方依賴。是一個意在提升開發者效率,提升JS原生方法性能的JS庫。簡單的說就是，不少方法lodash已經幫你寫好了，直接調用就行，不用本身費盡心思去寫了，並且能夠統一方法的一致性。Lodash使用了一個簡單的 _ 符號，就像Jquery的 $ 同樣，十分簡潔。 相似的還有Underscore.js和Lazy.js

支持

chrome 43往上
Firefox 38往上
IE 6-11
MS Edge
Safari 5往上
（幾乎涵蓋如今市面上能夠見到的大部分瀏覽器）

如何安裝

瀏覽器

<script src="lodash.js"></script> 直接下載下來引入，或者使用cdn

NPM

$ npm i -g npm
$ npm i --save lodash
複製代碼

先全局安裝，在單獨安裝到項目中

node.js

var _ = require('lodash');

爲何使用lodash

經過使用數組，數字，對象，字符串等方法，Lodash使JavaScript變得更簡單。

經常使用lodash函數

（參考版本lodash v4.16.1）

一、N次循環

<script type="text/javascript"> console.log('------- javascript -------'); //js原生的循環方法 for(var i = 0; i < 5; i++){ console.log(i); } console.log('------- lodash -------'); //ladash的times方法 _.times(5,function(a){ console.log(a); }); </script>
複製代碼

for語句是執行循環的不二選擇，但在上面代碼的使用場景下，_.times()的解決方式更加簡潔和易於理解。

二、深層查找屬性值

<script type="text/javascript"> var ownerArr = [{ "owner": "Colin", "pets": [{"name": "dog1"}, {"name": "dog2"}] }, { "owner": "John", "pets": [{"name": "dog3"}, {"name": "dog4"}] }]; var jsMap = ownerArr.map(function (owner) { return owner.pets[0].name; }); console.log('------- jsMap -------'); console.log(jsMap); var lodashMap = _.map(ownerArr, 'pets[0].name'); console.log('------- lodashMap -------'); console.log(lodashMap); </script>
複製代碼

Lodash中的_.map方法和JavaScript中原生的數組方法很是的像，但它仍是有很是有用的升級。 你能夠經過一個字符串而不是回調函數來瀏覽深度嵌套的對象屬性。

三、深克隆對象

<script type="text/javascript"> var objA = { "name": "戈德斯文" }; var objB = _.cloneDeep(objA); console.log(objA); console.log(objB); console.log(objA === objB); </script>
複製代碼

深度克隆JavaScript對象是困難的，而且也沒有什麼簡單的解決方案。你可使用原生的解決方案:JSON.parse(JSON.stringify(objectToClone)) 進行深度克隆。可是，這種方案僅在對象內部沒有方法的時候纔可行。

四、在指定範圍內獲取一個隨機值

<script type="text/javascript"> function getRandomNumber(min, max){ return Math.floor(Math.random() * (max - min)) + min; } console.log(getRandomNumber(15, 20)); console.log(_.random(15, 20)); </script>
複製代碼

Lodash中的 _.random 方法要比上面的原生方法更強大與靈活。你能夠只傳入一個參數做爲最大值， 你也能夠指定返回的結果爲浮點數_.random(15,20,true)

五、擴展對象

<script type="text/javascript"> Object.prototype.extend = function(obj) { for (var i in obj) { if (obj.hasOwnProperty(i)) { //判斷被擴展的對象有沒有某個屬性， this[i] = obj[i]; } } }; var objA = {"name": "戈德斯文", "car": "寶馬"}; var objB = {"name": "柴碩", "loveEat": true}; objA.extend(objB); console.log(objA); console.log(_.assign(objA, objB)); </script>
複製代碼

_.assign 方法也能夠接收多個參數對象進行擴展，都是日後面的對象上合併

六、從列表中隨機的選擇列表項

<script type="text/javascript"> var smartTeam = ["戈德斯文", "楊海月", "柴碩", "師貝貝"]; function randomSmarter(smartTeam){ var index = Math.floor(Math.random() * smartTeam.length); return smartTeam[index]; } console.log(randomSmarter(smartTeam)); // Lodash console.log(_.sample(smartTeam)); console.log(_.sampleSize(smartTeam,2)); </script>
複製代碼

此外，你也能夠指定隨機返回元素的個數_.sampleSize(smartTeam,n)，n爲須要返回的元素個數

七、判斷對象中是否含有某元素

<script type="text/javascript"> var smartPerson = { 'name': '戈德斯文', 'gender': 'male' }, smartTeam = ["戈德斯文", "楊海月", "柴碩", "師貝貝"]; console.log(_.includes(smartPerson, '戈德斯文')); console.log(_.includes(smartTeam, '楊海月')); console.log(_.includes(smartTeam, '楊海月',2)); </script>
複製代碼

_.includes()第一個參數是須要查詢的對象，第二個參數是須要查詢的元素，第三個參數是開始查詢的下標

八、遍歷循環

<script type="text/javascript"> _([1, 2]).forEach(function(value) { console.log(value); }); _.forEach([1, 3] , function(value, key) { console.log(key,value); }); </script>
複製代碼

這兩種方法都會分別輸出‘1’和‘2’，不只是數組，對象也能夠，數組的是後key是元素的下標，當傳入的是對象的時候，key是屬性，value是值

九、遍歷循環執行某個方法

_.map()

<script type="text/javascript"> function square(n) { return n * n; } console.log(_.map([4, 8], square)); // => [16, 64] console.log(_.map({ 'a': 4, 'b': 8 }, square)); // => [16, 64] (iteration order is not guaranteed) var users = [ { 'user': 'barney' }, { 'user': 'fred' } ]; // The `_.property` iteratee shorthand. console.log(_.map(users, 'user')); // => ['barney', 'fred'] </script>
複製代碼

十、檢驗值是否爲空

_.isEmpty()

<script type="text/javascript"> _.isEmpty(null); // => true _.isEmpty(true); // => true _.isEmpty(1); // => true _.isEmpty([1, 2, 3]); // => false _.isEmpty({ 'a': 1 }); // => false </script>
複製代碼

十一、查找屬性

_.find()、_.filter()、_.reject()

<script type="text/javascript"> var users = [ {'user': 'barney', 'age': 36, 'active': true}, {'user': 'fred', 'age': 40, 'active': false}, {'user': 'pebbles', 'age': 1, 'active': true} ]; console.log(_.find(users, function (o) { return o.age < 40; })); console.log(_.find(users, {'age': 1, 'active': true})); console.log(_.filter(users, {'age': 1, 'active': true})); console.log(_.find(users, ['active', false])); console.log(_.filter(users, ['active', false])); console.log(_.find(users, 'active')); console.log(_.filter(users, 'active')); </script>
複製代碼

_.find()第一個返回真值的第一個元素。 _.filter()返回真值的全部元素的數組。 _.reject()是_.filter的反向方法，不返回真值的（集合）元素

十二、數組去重

_.uniq(array)建立一個去重後的array數組副本。

參數 array (Array): 要檢查的數組。

返回新的去重後的數組

<script type="text/javascript"> var arr1 = [2, 1, 2]; var arr2 = _.uniq(arr1); function unique(arr) { var newArr = []; for (var i = 0; i < arr.length; i++) { if(newArr.indexOf(arr[i]) == -1){ newArr.push(arr[i]); } } return newArr; } console.log(arr1); console.log(arr2); console.log(unique(arr1)); </script>
複製代碼

_.uniqBy(array,[iteratee=_.identity])這個方法相似 _.uniq，除了它接受一個 iteratee（迭代函數），調用每個數組（array）的每一個元素以產生惟一性計算的標準。iteratee 調用時會傳入一個參數：(value)。

<script type="text/javascript"> console.log(_.uniqBy([2.1, 1.2, 2.3], Math.floor)); // => [2.1, 1.2] console.log(_.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x')); // => [{ 'x': 1 }, { 'x': 2 }] </script>
複製代碼

Math.floor只是向下取整，去重，並無改變原有的數組，因此仍是2.1和1.2，不是2和1。

1三、模板插入

_.template([string=''], [options={}])

<div id="container"></div>

<script src="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript"> $(function () { var data = [{name: '戈德斯文'}, {name: '柴碩'}, {name: '楊海月'}]; var t = _.template($("#tpl").html()); $("#container").html(t(data)); }); </script>
<script type="text/template" id="tpl"> <% _.each(obj,function(e,i){ %> <ul> <li><%= e.name %><%= i %></li> </ul> <%})%> </script>
複製代碼

注意，這個<script>標籤的type是text/template，相似於react的JSX的寫法，就是js和html能夠混寫，用<% %>括起來的就是js代碼，能夠執行，直接寫的就是html的標籤，而且有相似MVC框架的的數據綁定，在<%= %>中能夠調用到數據呈現（純屬我的看法，不知道理解的對不對）

就這麼多了，剩下的本身能夠查看中文文檔和官方文檔或者看看別人寫的博客，雖然如今不少方法ES6已經本身就已經封裝好了，咱們仍是寫ES5的多，有個偷懶少寫方法的路子，爲啥不用！！