你還在用sort排序？分享30個(gè)用的最頻繁的lodash工具函數(shù)
作者：林三心不學(xué)挖掘機(jī)
事情起因是，有幾個(gè)小伙伴在對(duì)一個(gè)數(shù)據(jù)進(jìn)行排序，做了激烈的討論，這組數(shù)據(jù)，想要根據(jù)num字段進(jìn)行排序~把我氣的，你們就不能直接用lodash的sortBy嗎？你們?cè)僭趺磳?shí)現(xiàn)，能實(shí)現(xiàn)得比lodash好？
前言
大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心。
事情起因是，有幾個(gè)小伙伴在對(duì)一個(gè)數(shù)據(jù)進(jìn)行排序，做了激烈的討論，這組數(shù)據(jù)，想要根據(jù)num字段進(jìn)行排序~把我氣的，你們就不能直接用lodash的sortBy嗎？你們?cè)僭趺磳?shí)現(xiàn)，能實(shí)現(xiàn)得比lodash好？
const arr = [ {num: 3,name: 'hh'}, {num: 1,name: 'xx'}, {num: 2,name: 'aa'}]// 使用lodashconsole.log(_.sortBy(arr, ['num']))所以，我覺(jué)得有必要跟各位小伙伴分享一下，我在項(xiàng)目中用的最多的30個(gè)lodash工具方法
注：此文是總結(jié)一些常用的lodash方法，案例從文檔拿的，介意的朋友請(qǐng)勿看~
我要對(duì)數(shù)組進(jìn)行一系列操作！
取「交集」!
intersection
返回一個(gè)包含所有傳入數(shù)組交集元素的新數(shù)組。
_.intersection([2, 1], [4, 2], [1, 2]); // => [2]intersectionBy
根據(jù)某個(gè)字段來(lái)進(jìn)行計(jì)算交集
_.intersectionBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x'); // => [{ 'x': 1 }]intersectionWith
根據(jù)某個(gè)條件函數(shù)來(lái)計(jì)算交集，比如使用isEqual
var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]; var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }]; _.intersectionWith(objects, others, _.isEqual); // => [{ 'x': 1, 'y': 2 }]取「合集」!
union
返回一個(gè)新的聯(lián)合數(shù)組。
_.union([2], [1, 2]); // => [2, 1]unionBy
根據(jù)某個(gè)字段來(lái)計(jì)算合集
_.unionBy([{ 'x': 1, 'y': 5 }], [{ 'x': 2, 'y': 3 }, { 'x': 1, 'y': 6 }], 'x'); // => [{ 'x': 1, 'y': 5 }, { 'x': 2, 'y': 3 }]unionWith
根據(jù)某個(gè)條件函數(shù)來(lái)計(jì)算合集
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 }]取「差集」!
同上面兩種工具函數(shù)，這里無(wú)需多言~
- difference
- differenceBy
- differenceWith
取數(shù)組「總和」!
sum
返回總和。
_.sum([4, 2, 8, 6]); // => 20sumBy
根據(jù)某個(gè)字段計(jì)算并返回總和。
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取「平均數(shù)」！
mean
計(jì)算平均數(shù)
_.mean([4, 2, 8, 6]); // => 5meanBy
根據(jù)某個(gè)字段計(jì)算出平均值
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根據(jù)字段或條件「排序」！
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) { return Math.floor(o.age / 10); }); // => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]超級(jí)實(shí)用的工具函數(shù)！
我要「淺拷貝」！
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) // falsedebounce 我要「防抖」！
參數(shù)
- func (Function)
- [wait=0] (number)
- [optinotallow=] (Object)
- [options.leading=false] (boolean)
- [options.maxWait] (number) : 設(shè)置 func 允許被延遲的最大值。
- [options.trailing=true] (boolean)
返回
(Function)
例子
// 避免窗口在變動(dòng)時(shí)出現(xiàn)昂貴的計(jì)算開(kāi)銷。jQuery(window).on('resize', _.debounce(calculateLayout, 150)); // 當(dāng)點(diǎn)擊時(shí) `sendMail` 隨后就被調(diào)用。jQuery(element).on('click', _.debounce(sendMail, 300, { 'leading': true, 'trailing': false})); // 確保 `batchLog` 調(diào)用1次之后，1秒內(nèi)會(huì)被觸發(fā)。var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });var source = new EventSource('/stream');jQuery(source).on('message', debounced); // 取消一個(gè) trailing 的防抖動(dòng)調(diào)用jQuery(window).on('popstate', debounced.cancel);throttle 我要「節(jié)流」！
參數(shù)
- func (Function)
- [wait=0] (number)
- [optinotallow=] (Object)
- [options.leading=true] (boolean)
- [options.trailing=true] (boolean)
返回
(Function)
例子
// 避免在滾動(dòng)時(shí)過(guò)分的更新定位jQuery(window).on('scroll', _.throttle(updatePosition, 100)); // 點(diǎn)擊后就調(diào)用 `renewToken`，但5分鐘內(nèi)超過(guò)1次。var throttled = _.throttle(renewToken, 300000, { 'trailing': false });jQuery(element).on('click', throttled); // 取消一個(gè) trailing 的節(jié)流調(diào)用。jQuery(window).on('popstate', throttled.cancel);我「獲取」對(duì)象中的某幾個(gè)字段！
pick
var object = { 'a': 1, 'b': '2', 'c': 3 }; _.pick(object, ['a', 'c']); // => { 'a': 1, 'c': 3 }我要「剔除」掉對(duì)象中的某幾個(gè)字段！
omit
var object = { 'a': 1, 'b': '2', 'c': 3 }; _.omit(object, ['a', 'c']); // => { 'b': '2' }我要判斷一個(gè)變量的類型！
isUndefined
如果 value 是 undefined ，那么返回 true，否則返回 false
_.isUndefined(undefined); // => true _.isUndefined(null); // => falseisNull
如果 value 為null，那么返回 true，否則返回 false。
_.isNull(null); // => true _.isNull(undefined); // => falseisString
如果 value 為一個(gè)字符串，那么返回 true，否則返回 false。
_.isString('abc'); // => true _.isString(1); // => falseisPlainObject
如果 value 為一個(gè)普通對(duì)象，那么返回 true，否則返回 false。
function Foo() { this.a = 1; } _.isPlainObject(new Foo); // => false _.isPlainObject([1, 2, 3]); // => false _.isPlainObject({ 'x': 0, 'y': 0 }); // => true _.isPlainObject(Object.create(null)); // => trueisNumber
如果 value 為一個(gè)數(shù)值，那么返回 true，否則返回 false。
_.isNumber(3); // => true _.isNumber(Number.MIN_VALUE); // => true _.isNumber(Infinity); // => true _.isNumber('3'); // => falseisArray
如果value是一個(gè)數(shù)組返回 true，否則返回 false。
_.isArray([1, 2, 3]); // => true _.isArray(document.body.children); // => false _.isArray('abc'); // => false _.isArray(_.noop); // => falseisBoolean
如果 value 是一個(gè)布爾值，那么返回 true，否則返回 false。
_.isBoolean(false); // => true _.isBoolean(null); // => falseisFunction
如果 value 是一個(gè)函數(shù)，那么返回 true，否則返回 false。
_.isFunction(function(){}); // => true _.isFunction(''); // => falseisNill
如果 value 為null 或 undefined，那么返回 true，否則返回 false。
_.isNil(null); // => true _.isNil(void 0); // => true _.isNil(NaN); // => fals責(zé)任編輯：武曉燕
來(lái)源：
前端之神
