原文:地址
在ES6盛行,ES78馬上就要出來的情況下;我們還是需要懂得一些工具庫的使用,比較推薦的是lodash。
在下面就會談一談爲什麼要使用lodash和lodash的基本使用。
首先要明白的是lodash的所有函數都不會在原有的數據上進行操作,而是複製出一個新的數據而不改變原有數據。類似immutable.js的理念去處理。
lodash是一套工具庫,內部封裝了很多字符串、數組、對象等常見數據類型的處理函數。
lodash的引用:
import _ from 'lodash'
用一個數組遍歷來說明爲什麼要使用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能大大的提高開發的效率。
再來總結一些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(),返回對象中可枚舉屬性的數組。
巴拉巴拉: