1. 程式人生 > >【vue】學習lodash : 這一篇就夠了

【vue】學習lodash : 這一篇就夠了

安裝的話很簡單

npm i lodash -D

然後在使用的vue元件裡邊

<script>

import _ from ‘lodash'

export default{} 

</script>

一、Array的一些常用方法的總結:

 

_.compact(array)

compact的中文意思是“緊湊的”

去假,例如falsenull0""undefined

_.compact([0, 1, false, 2, '', 3]);

// => [1, 2, 3]

 

_uniq(array)

建立一個去重後的array陣列副本

_.uniq([2, 1, 2]);

// => [2, 1]

上邊這倆總結為“緊湊”和“去重”


 

_.remove(array,[predicate=_.identity])

“搬除”原陣列中滿足判斷條件的值,返回一個搬除陣列,當然原來的陣列也變化了,元素被搬走了

var array = [1, 2, 3, 4];

var evens = _.remove(array, function(n) {

  return n % 2 == 0;

});

console.log(array);

// => [1, 3]

console.log(evens);

// => [2, 4]

_.join(array,[seperator=‘,’])

然後這個是“拼接”,按一定符號拼接陣列為字串

_.join(['a', 'b', 'c'], '~');

// => 'a~b~c'

_.slice(array,[start],[end])

“裁剪”陣列array,從 start 位置開始到end結束,但不包括 end 本身的位置。 返回陣列array 裁剪部分的新陣列。

 

 

還有js本身Array的一些常用方法:

arrayObject.splice(index,howmany,[item1,.....,itemX])

index位置,可以和前邊的_.indexOf混合使用,howmany長度,[ ]內為新新增的值,可選

 

arrayObject.shift()   和  arrayObject.unshift(newelement1,newelement2,....,newelementX)

shift刪除並返回陣列的第一個元素,unshift向陣列的開頭新增一個或多個元素,並返回長度

 

 

二、Collection的一些常用方法的總結:(包括Array Map Set)

 

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

遍歷集合中的每個元素, iteratee 呼叫3個引數: (value, index|key, collection)。 如果迭代函式(iteratee)顯式的返回 false ,迭代會提前退出。 

注意: 與其他"集合"方法一樣,類似於陣列,物件的 "length" 屬性也會被遍歷。想避免這種情況,物件可以用 _.forIn

_([1, 2]).forEach(function(value) {

  console.log(value);

});

// => Logs `1` then `2`.

_.forEach({ 'a': 1, 'b': 2 }, function(value, key) {

  console.log(key);

});

// => Logs 'a' then 'b' (iteration order is not guaranteed).

 

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

迭代函式呼叫3個引數: (value, index|key, collection),返回值是一個數組,這是它和forIn和forEach的區別,map可以對單條資料進行操作返回,是比forIn和forEach更進一步的方法 

function square(n) {

  return n * n;

}

_.map([4, 8], square);

// => [16, 64]



_.map(['  foo  ', '  bar  '], _.trim);

// => ['foo', 'bar']

 

 

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

 

返回真值。 predicate(斷言函式)呼叫三個引數:(value, index|key, collection)。 

var users = [

  { 'user': 'barney', 'age': 36, 'active': true },

  { 'user': 'fred',   'age': 40, 'active': false }

];

_.filter(users, function(o) { return !o.active; });

// => objects for ['fred']



_.filter(users, 'active');

// => objects for ['barney']

 

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

 

返回非真值,是_filter的反向方法

var users = [

  { 'user': 'barney', 'age': 36, 'active': false },

  { 'user': 'fred',   'age': 40, 'active': true }

];

_.reject(users, function(o) { return !o.active; });

// => objects for ['fred']



_.reject(users, 'active');

// => objects for ['barney']

這裡區分注意一下,_filter和_reject斷言之後都是返回新陣列,不改變老陣列,而remove斷言之後是改變老陣列的,

 

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

建立一個元素陣列。 以 iteratee 處理的結果升序排序。 

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]]

_.includes(collection, value,[fromIndex=0])

 

檢查 value(值) 是否在 collection(集合) 中。如果 collection(集合)是一個字串,那麼檢查 value(值,子字串) 是否在字串中, 否則使用做等值比較。 如果指定 fromIndex 是負數,那麼從 collection(集合) 的結尾開始檢索。

_.includes([1, 2, 3], 1);

// => true

_.includes([1, 2, 3], 1, 2);

// => false

_.includes({ 'user': 'fred', 'age': 40 }, 'fred');

// => true

_.includes('pebbles', 'eb');

// => true

 

_.size(collection)

返回collection(集合)的長度,如果集合是類陣列或字串,返回其 length ;如果集合是物件,返回其可列舉屬性的個數。

_.size([1, 2, 3]);

// => 3

_.size({ 'a': 1, 'b': 2 });

// => 2

_.size('pebbles');

// => 7


 

 

三、Object的一些常用方法的總結:

 

_.forIn(object,[iteratee=_.identity]),

  遍歷函式會傳入3個引數:(value, key, object)。forEach更多的用做集合,而forIn用做物件

function Foo() {

  this.a = 1;

  this.b = 2;

}

Foo.prototype.c = 3;

_.forIn(new Foo, function(value, key) {

  console.log(key);

});

// => Logs 'a', 'b', then 'c' (無法保證遍歷的順序)。

 

 

_.assignIn(object,[sources])

合併物件

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 }

 

_.get(object, path,[defaultValue])  和.   _.set(object,path,value)

 

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.get(object, 'a[0].b.c');

// => 3



var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.set(object, 'a[0].b.c', 4);

console.log(object.a[0].b.c);

// => 4

 

_.values(object)

把object本身屬性的值返回為陣列

function Foo() {

  this.a = 1;

  this.b = 2;

}

Foo.prototype.c = 3;

_.values(new Foo);

// => [1, 2] (無法保證遍歷的順序)

_.values('hi');

// => ['h', 'i']

 

 

四、String的一些常用方法的總結:

 

_.trim

去空格,或者去固定符號,

_.trim('  abc  ');

// => 'abc'

_.trim('-_-abc-_-', '_-');

// => 'abc'

_.map(['  foo  ', '  bar  '], _.trim);

// => ['foo', 'bar']

 

五、Function的一些常用方法的總結:

 

_.once(func)

建立一個只能呼叫 func 一次的函式。 重複呼叫返回第一次呼叫的結果。 func 呼叫時, this 繫結到建立的函式,並傳入對應引數。

var initialize = _.once(createApplication);

initialize();

initialize();

// `initialize` 只能呼叫 `createApplication` 一次。

 

_.delay(func,wait,[args])

延遲 wait 毫秒後呼叫 func。 呼叫時,任何附加的引數會傳給func

_.delay(function(text) {

  console.log(text);

}, 1000, 'later');

// => 一秒後輸出 'later'。

 

 

 

六、Math的一些常用方法的總結:

 

_.add(6, 4);

// => 10
_.subtract(6, 4);

// => 2
_.multiply(6, 4);

// => 24
_.divide(6, 4);

// => 1.5
_.min([4, 2, 8, 6]);

// => 2

_.min([]);

// => undefined
_.max([4, 2, 8, 6]);

// => 8

_.max([]);

// => undefined
_.sum([4, 2, 8, 6]);

// => 20
_.round(4.006);//四捨五入

// => 4

 

 

七、Number的一些常用方法的總結:

 

_.random([lower=0],[upper=1],[floating])

產生一個包括 lower 與 upper 之間的數。 如果只提供一個引數返回一個0到提供數之間的數。 如果 floating 設為 true,或者 lower 或 upper 是浮點數,結果返回浮點數。 

_.random(0, 5);

// => an integer between 0 and 5

_.random(5);

// => also an integer between 0 and 5

_.random(5, true);

// => a floating-point number between 0 and 5

_.random(1.2, 5.2);

// => a floating-point number between 1.2 and 5.2

 

 

 

八、Date的一些常用方法的總結:

_.now()

獲得 Unix 紀元 (1 January 1970 00:00:00 UTC) 直到現在的毫秒數。

_.defer(function(stamp) {

  console.log(_.now() - stamp);

}, _.now());

// => 記錄延遲函式呼叫的毫秒數