簡介
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）
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()的解決方式更加簡潔和易于理解。
2、深層查找屬性值
<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中原生的數組方法非常的像，但它還是有非常有用的升級。 你可以通過一個字符串而不是回調函數來瀏覽深度嵌套的對象屬性。
3、深克隆對象
<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)) 進行深度克隆。但是，這種方案僅在對象內部沒有方法的時候才可行。
4、在指定范圍內獲取一個隨機值
<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)
5、擴展對象
<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 方法也可以接收多個參數對象進行擴展，都是往后面的對象上合并
6、從列表中隨機的選擇列表項
<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為需要返回的元素個數
7、判斷對象中是否含有某元素
<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()第一個參數是需要查詢的對象，第二個參數是需要查詢的元素，第三個參數是開始查詢的下標
8、遍歷循環
<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是值
9、遍歷循環執行某個方法
_.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>
10、檢驗值是否為空
_.isEmpty()
<script type="text/javascript">
_.isEmpty(null);
// => true
_.isEmpty(true);
// => true
_.isEmpty(1);
// => true
_.isEmpty([1, 2, 3]);
// => false
_.isEmpty({ 'a': 1 });
// => false
</script>
11、查找屬性
_.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的反向方法，不返回真值的（集合）元素
12、數組去重
_.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。
13、模板插入
_.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框架的的數據綁定，在<%= %>中可以調用到數據呈現（純屬個人見解，不知道理解的對不對）
