天天看點

Underscore和lodash 介紹

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方法可以挑選出指定的屬性,組成一個新數組。

繼續閱讀