lodash工具庫常用函式收集

lodash是一套工具庫，內部封裝了很多字串、陣列、物件等常見資料型別的處理函式。

lodash的引用

import _ from 'lodash'

用乙個陣列遍歷來說明為什麼要使用lodash

常規陣列遍歷

agent.foreach(function (n,key) )

使用lodash來遍歷

const arr = _.foreach();

這時候arr就是新的陣列agent。而在常規的js陣列遍歷中，還需要考慮return的值和this的指向問題。雖然這樣看起來，二者相差不大，但是在實際的開發過程中，熟練的使用lodash能大大的提高開發的效率。

再來總結一些lodash常用函式（還是推薦大家能去官網把所有的函式看一遍增加一些印象）

1._.chunk(array, [size=1])，將陣列進行切分。

這個函式把陣列按照一定的長度分開，返回新的陣列。（片段化陣列）

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(array)，去除假值。（將所有的空值，0，nan過濾掉）

_.compact(['1','2',' ',0])
// => ['1','2']

對應的還有乙個陣列去重函式，這在實際的開發中很有作用。

3._.uniq(array)，陣列去重。（將陣列中的物件去重，只能是陣列去重，不能是物件去重。）

_.uniq([1,1,3])
// => [1,3]

這跟介紹的第二個函式compact有很好的配合作用。（後端介面傳來的資料很多是有重複或者空值的，這時候就可以使用兩個函式來過濾資料。ladash只是最基礎的庫，其實可以將幾個函式封裝起來元件自己的庫。）

4._.filter(collection, [predicate=_.identity])

_.reject(collection, [predicate=_.identity])

過濾集合，傳入匿名函式。（二者放在一起討論的原因是，兩個函式類似但返回的值是相反。）

_.filter([1,2],x => x = 1)
// => [1]
_.reject([1,2],x => x=1)
// => [2]

這兩個過濾器，第二個引數值是false的時候返回是reject的功能，相反是true的時候是filter。

5._.map(collection, [iteratee=_.identity])

_.foreach(collection, [iteratee=_.identity])

陣列遍歷。（相似）

不過二者都不改變原來的陣列。

_.map([1,2],x => x+1)
// => [2,3]

推薦使用map。

6.merge,引數合併。（merge函式像是git的merge分支操作一樣，將兩個引數合併在一起。）

官網的解釋是，遞迴的將源物件和繼承的可列舉字串監控屬性合併到目標物件中。源物件從左到右引用，後續**將覆蓋以前**的屬性分配。

var object = , ]}; 
var other = , ]}; 
_.merge(object, other);
// => , ] }

這裡就像借用官網的**來解釋一下了。在實際開發中，前端在介面的請求可以merge一下之前的query和現在改變的查詢的值，再去請求後端介面的資料。

7.extend，類似引數物件合併。

function foo() 
function bar() 
foo.prototype.b = 2;
bar.prototype.d = 4;
_.assignin(, new foo, new bar);
// =>

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() 
foo.prototype.c = 3;
_.keys(new foo);
// => ['a', 'b'] (iteration order is not guaranteed)
_.keys('hi');
// => ['0', '1']

10._.get(object, path, [defaultvalue])

獲取object物件的值。如果未定義已解析的值，則返回defaultvalue

var object =  }] };
_.get(object, 'a[0].b.c');
// => 3
_.get(object, ['a', '0', 'b', 'c']);
// => 3
_.get(object, 'a.b.c', 'default');
// => 'default'

lodash工具庫常用函式收集

常用函式庫收集

web前端常用js工具庫收集

flash 一些常用類庫工具收集

lodash工具庫常用函式收集

常用函式庫收集

web前端常用js工具庫收集

flash 一些常用類庫工具收集

相關推薦