首先要明白的是lodash的所有函數都不會在原有的數據上進行操作,而是復制出一個新的數據而不改變原有數據。類似immutable.js的理念去處理。
lodash是一套工具庫,內部封裝了很多字符串、數組、對象等常見數據類型的處理函數。
lodash的引用
import _ from 'lodash'
<script src="https://cdn.bootcss.com/lodash.js/4.17.11/lodash.js"></script>
用一個數組遍歷來說明為什么要使用lodash
常規數組遍歷
agent.forEach(function (n,key) { agent[key].agent_id = agent[key].agent_name; }) return agent;
使用lodash來遍歷
_.forEach(agent,function(n,key) { agent[key].agent_id= agent[key].agent_name })
這是一個常見的forEach的數組遍歷,使用了lodash過后,_.forEach()這是一個值,而不是一個函數。就可以直接
const arr = _.forEach();
這時候arr就是新的數組agent。而在常規的js數組遍歷中,還需要考慮return的值和this的指向問題。雖然這樣看起來,二者相差不大,但是在實際的開發過程中,熟練的使用lodash能大大的提高開發的效率。
_.sortBy
_.sortBy(collection, [iteratees=[_.identity]])
_sortBy僅是升序排序
創建一個元素數組。 以 iteratee 處理的結果升序排序。 這個方法執行穩定排序,也就是說相同元素會保持原始排序。 iteratees 調用1個參數: (value)。
var users = [ { 'user': 'fred', 'age': 48 }, { 'user': 'barney', 'age': 36 }, { 'user': 'fred', 'age': 40 }, { 'user': 'barney', 'age': 34 } ]; _.sortBy(users, function(o) { return o.user; }); // => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]] _.sortBy(users, ['user', 'age']); // => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]] _.sortBy(users, 'user', function(o) { return Math.floor(o.age / 10); }); // => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]
_.orderBy
_.orderBy(collection, [iteratees=[_.identity]], [orders])
此方法類似於_.sortBy,除了它允許指定 iteratee(迭代函數)結果如何排序。 如果沒指定 orders(排序),所有值以升序排序。 否則,指定為"desc" 降序,或者指定為 "asc" 升序,排序對應值。
var users = [ { 'user': 'fred', 'age': 48 }, { 'user': 'barney', 'age': 34 }, { 'user': 'fred', 'age': 40 }, { 'user': 'barney', 'age': 36 } ]; // 以 `user` 降序排序 再 `age` 以降序排序。 _.orderBy(users, ['user', 'age'], ['desc', 'desc']); // => objects for [['fred', 48], ['fred', 40], ['barney', 36], ['barney', 34]]
再來總結
一些lodash常用函數(還是推薦大家能去官網把所有的函數看一遍增加一些印象)
1.chunk,將數組進行切分。(也是官網的第一個函數)
const arr = [1,2,3,4,5,6,7,8,9]; _.chunk(arr,2); // =>[[1,2],[3,4],[5,6],[7,8],[9]] 這個函數把數組按照一定的長度分開,返回新的數組。(片段化數組)
2.compact,去除假值。(將所有的空值,0,NaN過濾掉)
_.compact(['1','2',' ',0]) // => ['1','2'] 對應的還有一個數組去重函數,這在實際的開發中很有作用。
3.uniq,數組去重。(將數組中的對象去重,只能是數組去重,不能是對象去重。)
_.uniq([1,1,3]) // => [1,3] 這跟介紹的第二個函數compact有很好的配合作用。(后端接口傳來的數據很多是有重復或者空值的,這時候就可以使用兩個函數來過濾數據。ladash只是最基礎的庫,其實可以將幾個函數封裝起來組件自己的庫。)
4.filter和reject,過濾集合,傳入匿名函數。(二者放在一起討論的原因是,兩個函數類似但返回的值是相反。)
_.filter([1,2],x => x = 1) // => [1] _.reject([1,2],x => x=1) // => [2] 這兩個過濾器,第二個參數值是false的時候返回是reject的功能,相反是true的時候是filter。
5.map和forEach,數組遍歷。(相似)
如果不明白map和forEach有什么相似的可以百度一下,簡單說一下不同點就是,map的回調函數中是支持return返回值的。 不過二者都不改變原來的數組。 _.map([1,2],x => x+1) // => [2,3] 推薦使用map。
6.merge,參數合並。(merge函數像是Git的merge分支操作一樣,將兩個參數合並在一起。)
官網的解釋是,遞歸的將源對象和繼承的可枚舉字符串監控屬性合並到目標對象中。源對象從左到右引用,后續來源將覆蓋以前來源的屬性分配。 var object = { 'a': [{ 'b': 2 }, { 'd': 4 }] }; var other = { 'a': [{ 'c': 3 }, { 'e': 5 }] }; _.merge(object, other); // => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] } 這里就像借用官網的代碼來解釋一下了。在實際開發中,前端在接口的請求可以merge一下之前的query和現在改變的查詢的值,再去請求后端接口的數據。
7.extend,類似參數對象合並。
function Foo() { this.a = 1; } function Bar() { this.c = 3; } Foo.prototype.b = 2; Bar.prototype.d = 4; _.assignIn({ 'a': 0 }, new Foo, new Bar); // => { 'a': 1, 'b': 2, 'c': 3, 'd': 4 }
8.cancat,數組連接
var array = [1]; var other = _.concat(array, 2, [3], [[4]]); console.log(other); // => [1, 2, 3, [4]] console.log(array); // => [1] 可以接受多個參數,將多個參數合並為一個數組元素。
9.keys ,取出對象中所有的key值組成新的數組。
function Foo() { this.a = 1; this.b = 2; } Foo.prototype.c = 3; _.keys(new Foo); // => ['a', 'b'] (iteration order is not guaranteed) _.keys('hi'); // => ['0', '1'] 類似object.keys(),返回對象中可枚舉屬性的數組。
_.range(10) //生成元素為0到9的數組 _.times(10, (i)=>console.log(i)) //循環10次 _.uniqueId() //生成不同的id,用於元素中的id值再好不過 _.startWith //判斷字符串是否以xx開頭 _.endWith //判斷字符串是否以xx結尾 _.truncat //截取指定長度后加… 用於處理標題過長再好不過 _.template //es6有字符串模板的語法,而lodash是es5的替代方案 _.assign //合並,es6有Object.assign,類似於jQuery.extend _.assignIn //lodash里很多方法帶In的都是可枚舉原型鏈上的屬性 _.defaults //安全合並,即忽略undefined/null的重寫 _.findKey //根據value的屬性值找key .mapKeys //遍歷重寫key, 相當於.forIn .mapValues //遍歷重寫value , 相當於.forIn _.invert //反轉映射,快速通過value值找key _.omit //返回移除部分屬性的副本,比如提交表單時有些字段不要提交 _.pick //與omit相反,提取部分屬性的副本,比如只提交某些字段 _. clamp //確認所給值只在min,max之間 _.max //最大 _.min //最小 _.sum //求和 _.random //生成隨機數 _.round //四舍五入,允許指定精確位數 _.isNumber _.isInterger _.isFunction _.isPlainObject _.isArray _.isDate _.isElement _.isNil //null or undefined _.isEmpty //{} or 空數組 _.isEqual //支持對象和數組 _.isMatch //匹配對象屬性值 _.cloneDeep //深度復制 _.clone //淺復制 _.once //只執行一次 _.before //最多n-1次 _.after //n次后執行 _.debounce //忽略頻繁執行 _.union //合並兩數組,去重 _.uniq //去重 _.pull(array,element1,element2) // 直接在array中移除元素, _.without(array,element1,element2) //得到新array中移除元素 _.remove(array, function) //直接在array移除在function返回true的元素 _.sameple(array) //隨機取1 _.samepleSize(array, int) // 隨機取n _.shuffle(array) //亂序, jQuery.shuffle _.find(array, function | object) //根據function返回值和對象查找1個結果 _.filter(array, function | object) //根據function返回值和對象查找多個結果 _.groupBy(array, string) //分組,與多合一相反 _.keyBy(array, string) //分組,類似groupBy, 但只有唯一值 _.countBy(array, string) //分組統計 _.orderBy(array, array, array) _.sortBy(array, array) _.difference(array1,array2) //找不同於array2,元素是Object用differenceBy _.xor(array1,array2) //得到非交集,元素是Object用xorBy _.intersection(array1,array2) //得到交集,元素是Object用intersectionBy