lodash經常使用的一些方法

首先要明白的是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