前言
大家好，我是林三心， 用最通俗易懂的話講最難的知識點 是我的座右銘， 基礎是進階的前提 是我的初心。
事情起因是，有幾個小夥伴在對一個數據進行排序，做了激烈的討論，這組數據，想要根據
num
欄位進行排序~把我氣的，你們就不能直接用
lodash的sortBy
嗎？你們再怎麽實作，能實作得比
lodash
好？
const arr = [ {num: 3,name: 'hh'}, {num: 1,name: 'xx'}, {num: 2,name: 'aa'}]// 使用lodashconsole.log(_.sortBy(arr, ['num']))
所以，我覺得有必要跟各位小夥伴分享一下，我在計畫中用的最多的 30個lodash工具方法
註：此文是總結一些常用的lodash方法，案例從文件拿的，介意的朋友請勿看~
我要對陣列進行一系列操作！
取「交集」!
interp
返回一個包含所有傳入陣列交集元素的新陣列。
_.interp([2, 1], [4, 2], [1, 2]); // => [2]
interpBy
根據某個欄位來進行計算交集
_.interpBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x'); // => [{ 'x': 1 }]
interpWith
根據某個條件函式來計算交集，比如使用
isEqual
var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]; var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }]; _.interpWith(objects, others, _.isEqual); // => [{ 'x': 1, 'y': 2 }]
取「合集」!
union
返回一個新的聯合陣列。
_.union([2], [1, 2]); // => [2, 1]
unionBy
根據某個欄位來計算合集
_.unionBy([{ 'x': 1, 'y': 5 }], [{ 'x': 2, 'y': 3 }, { 'x': 1, 'y': 6 }], 'x'); // => [{ 'x': 1, 'y': 5 }, { 'x': 2, 'y': 3 }]
unionWith
根據某個條件函式來計算合集
var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]; var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }]; _.unionWith(objects, others, _.isEqual); // => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 1 }]
取「差集」!
同上面兩種工具函式，這裏無需多言~
difference
differenceBy
differenceWith
取陣列「總和」!
sum
返回總和。
_.sum([4, 2, 8, 6]); // => 20
sumBy
根據某個欄位計算並返回總和。
var objects = [{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }]; _.sumBy(objects, function(o) { return o.n; }); // => 20 // The `_.property` iteratee shorthand. _.sumBy(objects, 'n'); // => 20
取「平均數」！
mean
計算平均數
_.mean([4, 2, 8, 6]); // => 5
meanBy
根據某個欄位計算出平均值
var objects = [{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }]; _.meanBy(objects, function(o) { return o.n; }); // => 5 // The `_.property` iteratee shorthand. _.meanBy(objects, 'n'); // => 5
根據欄位或條件「排序」！
sortBy
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) { returnMath.floor(o.age / 10); }); // => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]
超級實用的工具函式！
我要「淺拷貝」！
clone
const obj1 = [{a: 1 }]const obj2 = _.clone(obj1)console.log(obj1 === obj2) // falseconsole.log(obj1.a === obj2.a) // true
我要「深拷貝」！
cloneDeep
const obj1 = [{a: 1 }]const obj2 = _.cloneDeep(obj1)console.log(obj1 === obj2) // falseconsole.log(obj1.a === obj2.a) // false
debounce
我要「防抖」！
參數
func(Function) : 要防抖動的函式。[wait=0](number) : 需要延遲的毫秒數。[options=](Object) : 選項物件。[options.leading=false](boolean) : 指定在延遲開始前呼叫。[options.maxWait](number) : 設定func允許被延遲的最大值。[options.trailing=true](boolean) : 指定在延遲結束後呼叫。
返回
(Function) : 返回新的 debounced（防抖動）函式。
例子
// 避免視窗在變動時出現昂貴的計算開銷。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);
throttle
我要「節流」！
參數
func(Function) : 要節流的函式。[wait=0](number) : 需要節流的毫秒。[options=](Object) : 選項物件。[options.leading=true](boolean) : 指定呼叫在節流開始前。[options.trailing=true](boolean) : 指定呼叫在節流結束後。
返回
(Function) : 返回節流的函式。
例子
// 避免在捲動時過分的更新定位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);
我「獲取」物件中的某幾個欄位！
pick
var object = { 'a': 1, 'b': '2', 'c': 3 }; _.pick(object, ['a', 'c']); // => { 'a': 1, 'c': 3 }
我要「剔除」掉物件中的某幾個欄位！
omit
var object = { 'a': 1, 'b': '2', 'c': 3 }; _.omit(object, ['a', 'c']); // => { 'b': '2' }
我要判斷一個變量的型別！
isUndefined
如果
value
是
undefined
，那麽返回
true
，否則返回
false
_.isUndefined(undefined); // => true _.isUndefined(null); // => false
isNull
如果
value
為
null
，那麽返回
true
，否則返回
false
。
_.isNull(null); // => true _.isNull(undefined); // => false
isString
如果
value
為一個字串，那麽返回
true
，否則返回
false
。
_.isString('abc'); // => true _.isString(1); // => false
isPlainObject
如果
value
為一個普通物件，那麽返回
true
，否則返回
false
。
functionFoo() { this.a = 1; } _.isPlainObject(new Foo); // => false _.isPlainObject([1, 2, 3]); // => false _.isPlainObject({ 'x': 0, 'y': 0 }); // => true _.isPlainObject(Object.create(null)); // => true
isNumber
如果
value
為一個數值，那麽返回
true
，否則返回
false
。
_.isNumber(3); // => true _.isNumber(Number.MIN_VALUE); // => true _.isNumber(Infinity); // => true _.isNumber('3'); // => false
isArray
如果
value
是一個陣列返回
true
，否則返回
false
。
_.isArray([1, 2, 3]); // => true _.isArray(document.body.children); // => false _.isArray('abc'); // => false _.isArray(_.noop); // => false
isBoolean
如果
value
是一個布爾值，那麽返回
true
，否則返回
false
。
_.isBoolean(false); // => true _.isBoolean(null); // => false
isFunction
如果
value
是一個函式，那麽返回
true
，否則返回
false
。
_.isFunction(function(){}); // => true _.isFunction(''); // => false
isNill
如果
value
為
null
或
undefined
，那麽返回
true
，否則返回
false
。
_.isNil(null); // => true _.isNil(void0); // => true _.isNil(NaN); // => false
結語
我是林三心，一個熱心的前端菜鳥程式設計師。如果你上進，喜歡前端，想學習前端，那咱們可以交朋友，一起摸魚哈哈，摸魚群，關註我，拉你進群，有5000多名前端小夥伴在等著一起學習哦 -->
模擬面試、簡歷指導可私信找我~
