Lodash 和 Underscore 是非常優秀的當代JavaScript的工具集合架構,它們被前端開發者廣泛地使用。
如官方所介紹的那樣,Lodash是一個具有一緻接口、子產品化、高性能的JavaScript工具庫。一開始Lodash隻是Underscore.js的一個fork,之後再原有的成功基礎上取得了更大的成果,lodash的性能遠遠的超過了Underscore。是以,很多子產品放棄了Underscore轉入Lodash的懷抱。目前,lodash是npm倉庫中依賴最多的庫。使用lodash的全部函數需要使用全局的_就像是使用jQuery的函數前加上全局的$一樣。lodash的使用極大的減少了你的代碼量以及編寫代碼時間。[附上lodash的API文檔](http://lodashjs.com/docs/) ]
接下來,展示一些簡單的用法。
循環
// 典型的循環寫法
for(let i = 0;i < 5;i++){
//todo
}
// lodash寫法
_.times(5,()=>{
//todo
})
過濾
_.compact([0,1,false,2,'',underfined,3])
// => [1,2,3]
直接通過一個函數删選掉所有假值的資料,比尋常的周遊更加友善。
var arr1 = [1,2,3,4]
var arr2 = _.remove(arr1,(n) => {
return n%2 == 0
})
//arr1 => [1,3]
//arr2 => [2,4]
通過_.remove() 的方法删選出了符合條件的數組元素,并構成一個新數組,同時對原數組進行了去除改元素的操作。
疊代
var arr = [{
name: 'linge',
son: [{name: 'liu'},{name: 'chen'}]
},{
name: 'huangxiaoshu',
son: [{name: 'diao'},{name: 'xu'}]
}]
_.map(arr,'name') //['linge','huangxiaoshu']
_.map(arr,'son[0].name') //['liu','diao']
lodash中map的方法也是異常強大,它即可以用
_.map(arr,()=>{//todo})
如同原生js的形式對數組進行疊代,另外lodash中map方法能夠周遊深度嵌套的對象屬性,這一點在實際開發的時候是非常有用的。
對象擴充
//Lodash
_.assign({name: 'shidiao',age: 38},{sex: 'famale'},{name: 'liushitao'})
//ES6新增函數
Object.assign({name: 'shidiao',age: 38},{sex: 'famale'},{name: 'liushitao'})
//{name: 'liushitao',age: 38,sex: 'female'}
odash中的_.assign隻是淺拷貝,這與ES6新增的函數
Object.assign
功能重複了。
深度克隆
個人認為深度克隆是lodash裡面最好用的函數之一。衆所周知,深度克隆JavaScript對象是挺麻煩的事情,但是lodash一個簡簡單單的_.cloneDeep方法幫你完成了繁瑣的深度克隆操作,使用_.clone(obj,true)也能起到相同的作用,但是_.clone能夠指定深度克隆的層級。
var obj = {
name: 'linge',
son: [{name: 'liu'},{name: 'chen'}]
};
var deep = _.cloneDeep(obj);
obj === deep //false
删選對象屬性
var obj = {
name: 'linge',
age: 20
}
_.omit(obj, 'age') // {name: 'linge'}
這個方法在實際的開發項目中也相當實用,值得注意的是_.omit傳回了一個新的數組,并不改變原數組。與_.omit相反_.pick方法可以挑選出指定的屬性,組成一個新數組。