Lodash 經常使用方法說明之拋磚引玉

因爲 Lodash 是一個很是強大的工具類，提供了很是多的工具方法，因此這裏僅僅羅列一部分經常使用的方法，供你們參考。

若是想了解更全的，建議到官網去仔細過一遍，學習一下：www.lodashjs.com/docs/latest，以備不時之需。

Array 數組

_.uniq

數組去重，返回一個去重後的新數組。

參數：

• Array，數組

示例：

_.uniq([2, 1, 2]);
// => [2, 1]
複製代碼

_.uniqBy

這個方法相似 _.uniq，不過能夠接收一個回調函數，數組中每個值會調用一遍回調函數，以後再去重。

參數：

• Array，數組
• callback，回調函數，傳入參數：value

示例：

// 數組每個元素向下取整後比較去重
_.uniqBy([2.1, 1.2, 2.3], Math.floor);
// => [2.1, 1.2]

// 取得對象中每一個x的值進行比較去重
_.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], value => value.x);
// => [{ 'x': 1 }, { 'x': 2 }]
複製代碼

_.uniqWith

這個方法相似 _.uniq，不過能夠接收一個回調函數，回調函數會傳入要不比較的2個對象值，比較結果按函數的結果來執行。

參數：

• Array，數組
• callback，回調函數，傳入2個參數：當前值 和 其它待比較值

示例：

var objects = [{ 'x': 1, 'y': 2 }, { 'x': 3, 'y': 4 },  { 'x': 1, 'y': 6 }];

_.uniqWith(objects, (arrVal, othVal) => {
	return arrVal.x === othVal.x;
});
// [{ 'x': 1, 'y': 2 }, { 'x': 3, 'y': 4 }]
複製代碼

Object 對象

_.pick

建立一個從 object 中選中的 key 的對象。

參數：

• Object，對象
• Keys，對象的key的數組

示例：

var object = { 'a': 1, 'b': '2', 'c': 3 };
_.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }
複製代碼

_.pickBy

建立一個從 object 中經 value 函數判斷爲真值的屬性爲對象。

參數：

• Object，對象
• Function(value)，判斷函數，參數爲每個value

示例：

var object = { 'a': 1, 'b': '2', 'c': 3 };

_.pickBy(object, (value) => {return _.isNumber(value)};
// => { 'a': 1, 'c': 3 }
複製代碼

_.omit

反向版 pick, 返回忽略 key 以外的自身和繼承的可枚舉屬性。

參數：

• Object，對象
• Keys，對象的key的數組

示例：

var object = { 'a': 1, 'b': '2', 'c': 3 };
_.omit(object, ['a', 'c']);
// => { 'b': '2' }
複製代碼

_.omitBy

反向版 pickBy ，建立一個不是從 object 中經 value 函數判斷爲真值的對象。

參數：

• Object，對象
• Function(value)，判斷函數，參數爲每個value

示例：

var object = { 'a': 1, 'b': '2', 'c': 3 };

_.omitBy(object, value => {return _.isNumber(value)};
// => { 'b': '2' }
複製代碼

_.mapValues

遍歷全部的 value，返回處理後的對象。

參數：

• Object，對象

• Function(value, key, object)，判斷函數

示例：

var users = {
  'fred':    { 'user': 'fred',    'age': 40 },
  'pebbles': { 'user': 'pebbles', 'age': 1 }
};

_.mapValues(users, value => { return value.age; });
// => { 'fred': 40, 'pebbles': 1 } (沒法保證遍歷的順序)
複製代碼

_.mapKeys

反向版 _.mapValues。 遍歷全部的 key，返回處理後的對象，返回對象的value跟處理前同樣。

參數：

• Object，對象

• Function(value, key, object)，判斷函數

示例：

_.mapKeys({ 'a': 1, 'b': 2 }, function(value, key) {
  return key + value;
});
// => { 'a1': 1, 'b2': 2 }
複製代碼

_.merge

合併對象，注意幾個細節：

• 合併來源中，若是屬性值爲 undefined ，會忽略，不會覆蓋原有值；
• 數組和普通對象會遞歸合併，也就是：求並集。其它對象，會直接覆蓋原對象；
• 支持多個目標源，也就是參數能夠無限制（...sources）

參數：

• Object，對象
• sources，...Object 能夠傳多個合併源

示例：

var users = {
  'data': [{ 'user': 'barney' }, { 'user': 'fred' }]
};

var ages = {
  'data': [{ 'age': 36 }, { 'age': 40 }]
};

_.merge(users, ages);
// => { 'data': [{ 'user': 'barney', 'age': 36 }, { 'user': 'fred', 'age': 40 }] }
複製代碼

_.findKey

這個方法相似 _.find，只是返回的是 key。還有個 findLastKey ，不過是反向遍歷對象。

這個方法主要用於的場景：後臺返回的List，咱們須要過濾後獲得指定的全部key。

參數：

• Object，對象
• callback，回調函數

示例：

var users = {
  'barney':  { 'age': 36, 'active': true },
  'fred':    { 'age': 40, 'active': false },
  'pebbles': { 'age': 1,  'active': true }
};

_.findKey(users, function(o) { return o.age < 40; });
// => 'barney' (沒法保證遍歷的順序)

// 使用了 `_.matches` 的回調結果
_.findKey(users, { 'age': 1, 'active': true });
// => 'pebbles'

// 使用了 `_.matchesProperty` 的回調結果
_.findKey(users, ['active', false]);
// => 'fred'

// 使用了 `_.property` 的回調結果
_.findKey(users, 'active');
// => 'barney'
複製代碼

Collection 集合

注意：Collection 模塊表示 Object 或 Array 都支持

_.map

建立一個通過 回調函數處理的集合中每個元素的結果數組。

參數：

• collection，集合
• callback，回調函數

示例：

function square(n) {
  return n * n;
}

// 遍歷數組
_.map([4, 8], square);
// => [16, 64]

// 遍歷對象
_.map({ 'a': 4, 'b': 8 }, square);
// => [16, 64] (沒法保證遍歷的順序)
複製代碼

_.includes

檢查 值 是否在 集合中，若是集合是字符串，那麼檢查 值 是否在字符串中。

參數：

• collection，集合
• value，要檢查的值
• fromIndex，要檢索的位置

示例：

// 集合中是否包含1
_.includes([1, 2, 3], 1);
// => true

// 集合下標爲2的位置是否等於1
_.includes([1, 2, 3], 1, 2);
// => false

// 對象中是否包含value=fred
_.includes({ 'user': 'fred', 'age': 40 }, 'fred');
// => true

// 字符串中是否包含 eb 這2個連續的字母
_.includes('pebbles', 'eb');
// => true
複製代碼

Util 工具

_.property

返回指定對象的 key 的值的數組，支持多層屬性嵌套獲取，如：obj.x.y.z

參數：

• Object，對象
• path，路徑，如：obj.x.y.z

示例：

var objects = [
  { 'a': { 'b': { 'c': 2 } } },
  { 'a': { 'b': { 'c': 1 } } }
];

_.map(objects, _.property('a.b.c'));
// => [2, 1]
複製代碼

_.cloneDeep

遞歸拷貝對象，對應的 _.clone 是淺拷貝。

參數：

• Object，被拷貝對象

示例：

var objects = [{ 'a': 1 }, { 'b': 2 }];

var deep = _.cloneDeep(objects);

// 深拷貝後數組中的對象已經不是同一個
console.log(deep[0] === objects[0]);
// => false
複製代碼

_.isArray

檢查 value 是不是 Array 類對象。

參數：

• value，要檢查的對象

示例：

_.isArray([1, 2, 3]);
// => true

_.isArray(document.body.children);
// => false

_.isArray('abc');
// => false

_.isArray(_.noop);
// => false
複製代碼

_.isEmpty

檢查 value 是否爲空。

注意：該方法主要適用於Collection 或 Object，尤爲不適用於Number、Boolean等值，下面會詳細說明。

參數：

• value，要檢查的對象

示例：

_.isEmpty(null);
// => true

_.isEmpty(undefined);
// => true

_.isEmpty([]);
// => true

_.isEmpty({});
// => true

_.isEmpty("");
// => true

_.isEmpty([1, 2, 3]);
// => false

_.isEmpty({ 'a': 1 });
// => false
複製代碼

注意如下特殊示例（Boolean 和 Number）：

關於這是否是個bug，能夠看下討論區：github.com/lodash/loda…

_.isEmpty(true);
// => true

_.isEmpty(false);
// => true

_.isEmpty(123);
// => true
複製代碼

因爲 isEmpty 不能有效判斷 Boolean 和 Number ，因此，使用這個函數的須要特別當心，最好本身再封裝一個函數，作下容錯。

好比，你只考慮以下場景，那麼本身封裝一下：

function isEmpty(value) {
    return _.isEqual(a, {}) 
    	|| _.isEqual(a, []) 
    	|| _.isEqual(a, '') 
    	|| _.isEqual(a, null)
    	|| _.isEqual(a, undefined);
}
複製代碼

若是不肯定本身的數據類型，那麼就不推薦使用 _.isEmpty 這個函數。

Function 函數

_.throttle

節流函數，控制操做頻次，在 wait 秒內最多執行 func 一次的函數。

注意：這裏 最多 的意思其實隱含說明了js裏面事件輪循的一個問題，可能會受執行棧影響而致使不能在 settimeout 時間內執行。

參數：

1. func，(Function) 要節流的函數

2. [wait=0]，(number) 須要節流的毫秒

3. [options]，(Object) 選項對象

   • leading，默認true，動做開始時，當即執行一次func

   • trailing，默認true，動做結束時，再等待wait時間後，再執行一次func

示例：

// 避免在滾動時過度的更新定位
jQuery(window).on('scroll', _.throttle(updatePosition, 100));

// 點擊後就調用 `renewToken`，但5分鐘內超過1次。
var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
jQuery(element).on('click', throttled);

// 取消一個 trailing 的節流調用
jQuery(window).on('popstate', throttled.cancel);
複製代碼

注意事項：

// 錯誤
jQuery(window).on('scroll', function() {
   _.debounce(doSomething, 300); 
});
// 正確
jQuery(window).on('scroll', _.debounce(doSomething, 200));
複製代碼

_.debounce

n. 防反跳 按鍵防反跳（Debounce）爲何要去抖動呢？機械按鍵在按下時，並不是按下就接觸的很好，尤爲是有簧片的機械開關，會在接觸的瞬間反覆的開合屢次，直到開關狀態徹底改變。

建立一個防抖動函數。 該函數會在 wait 毫秒後調用 func 方法。

參數：

1. func，(Function) 要節流的函數

2. [wait=0]，(number) 須要節流的毫秒

3. [options]，(Object) 選項對象

   • leading，默認false，動做開始時，當即執行一次func

   • trailing，默認true，動做結束時，再等待wait時間後，再執行一次func

   • maxWait，最大等待時間（好比：設置一個動做結束2秒後執行func，可是這個動做一直不結束，那麼func就永遠不會執行，maxWait就是保證你等待這個動做的最長時間，不然就當即執行一次。）

示例：

// 避免窗口在變更時出現昂貴的計算開銷。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));

// 當點擊時 `sendMail` 隨後就被調用。
jQuery(element).on('click', _.debounce(sendMail, 300, {
  'leading': true,
  'trailing': false
}));

// 確保 `batchLog` 調用1次以後，1秒內會被觸發。
var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
var source = new EventSource('/stream');
jQuery(source).on('message', debounced);

// 取消一個 trailing 的防抖動調用
jQuery(window).on('popstate', debounced.cancel);
複製代碼

參考資料

• Lodash 官方中文文檔 v4.17.11
• 實例解析防抖動（Debouncing）和節流閥（Throttling）
• Javascript 的 Debounce 和 Throttle 的原理及實現