热搜：前端 vuedraggable 插件 vue

你还在用sort进行排序？分享30个用的最频繁的lodash工具函数~

lxf2023-03-13 13:02:01

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。

你还在用sort进行排序？分享30个用的最频繁的lodash工具函数~

事情起因是，有几个小伙伴在对一个数据进行排序，做了激烈的讨论，这组数据，想要根据num字段进行排序~把我气的，你们就不能直接用lodash的sortBy吗？你们再怎么实现，能实现得比lodash好？

const%20arr%20=%20[
%20%20%20%20{num:%203,name:%20'hh'},
%20%20%20%20{num:%201,name:%20'xx'},
%20%20%20%20{num:%202,name:%20'aa'}
]

//%20使用lodash
console.log(_.sortBy(arr,%20['num']))

所以，我觉得有必要跟各位小伙伴分享一下，我在项目中用的最多的30个lodash工具方法

注：此文是总结一些常用的lodash方法，案例从文档拿的，介意的朋友请勿看~

我要对数组进行一系列操作！ 取「交集」! intersection

返回一个包含所有传入数组交集元素的新数组。

_.intersection([2,%201],%20[4,%202],%20[1,%202]);%20%20
//%20=>%20[2]
intersectionBy

根据某个字段来进行计算交集

_.intersectionBy([{%20'x':%201%20}],%20[{%20'x':%202%20},%20{%20'x':%201%20}],%20'x');%20%20
//%20=>%20[{%20'x':%201%20}]
intersectionWith

根据某个条件函数来计算交集，比如使用isEqual

var%20objects%20=%20[{%20'x':%201,%20'y':%202%20},%20{%20'x':%202,%20'y':%201%20}];%20%20
var%20others%20=%20[{%20'x':%201,%20'y':%201%20},%20{%20'x':%201,%20'y':%202%20}];%20%20
%20%20
_.intersectionWith(objects,%20others,%20_.isEqual);%20%20
//%20=>%20[{%20'x':%201,%20'y':%202%20}]
取「合集」! union

返回一个新的联合数组。

_.union([2],%20[1,%202]);%20%20
//%20=>%20[2,%201]
unionBy

根据某个字段来计算合集

_.unionBy([{%20'x':%201,%20'y':%205%20}],%20[{%20'x':%202,%20'y':%203%20},%20{%20'x':%201,%20'y':%206%20}],%20'x');%20%20
//%20=>%20[{%20'x':%201,%20'y':%205%20},%20{%20'x':%202,%20'y':%203%20}]
unionWith

根据某个条件函数来计算合集

var%20objects%20=%20[{%20'x':%201,%20'y':%202%20},%20{%20'x':%202,%20'y':%201%20}];%20%20
var%20others%20=%20[{%20'x':%201,%20'y':%201%20},%20{%20'x':%201,%20'y':%202%20}];%20%20
%20%20
_.unionWith(objects,%20others,%20_.isEqual);%20%20
//%20=>%20[{%20'x':%201,%20'y':%202%20},%20{%20'x':%202,%20'y':%201%20},%20{%20'x':%201,%20'y':%201%20}]
取「差集」!

同上面两种工具函数，这里无需多言~

  • difference
  • differenceBy
  • differenceWith
取数组「总和」! sum

返回总和。

_.sum([4,%202,%208,%206]);%20%20
//%20=>%2020
sumBy

根据某个字段计算并返回总和。

var%20objects%20=%20[{%20'n':%204%20},%20{%20'n':%202%20},%20{%20'n':%208%20},%20{%20'n':%206%20}];%20%20
%20%20
_.sumBy(objects,%20function(o)%20{%20return%20o.n;%20});%20%20
//%20=>%2020%20%20
%20%20
//%20The%20`_.property`%20iteratee%20shorthand.%20%20
_.sumBy(objects,%20'n');%20%20
//%20=>%2020
取「平均数」！ mean

计算平均数

_.mean([4,%202,%208,%206]);%20%20
//%20=>%205
meanBy

根据某个字段计算出平均值

var%20objects%20=%20[{%20'n':%204%20},%20{%20'n':%202%20},%20{%20'n':%208%20},%20{%20'n':%206%20}];%20%20
%20%20
_.meanBy(objects,%20function(o)%20{%20return%20o.n;%20});%20%20
//%20=>%205%20%20
%20%20
//%20The%20`_.property`%20iteratee%20shorthand.%20%20
_.meanBy(objects,%20'n');%20%20
//%20=>%205
根据字段或条件「排序」！ sortBy 
var%20users%20=%20[%20%20
{%20'user':%20'fred',%20'age':%2048%20},%20%20
{%20'user':%20'barney',%20'age':%2036%20},%20%20
{%20'user':%20'fred',%20'age':%2040%20},%20%20
{%20'user':%20'barney',%20'age':%2034%20}%20%20
];%20%20
%20%20
_.sortBy(users,%20function(o)%20{%20return%20o.user;%20});%20%20
//%20=>%20objects%20for%20[['barney',%2036],%20['barney',%2034],%20['fred',%2048],%20['fred',%2040]]%20%20
%20%20
_.sortBy(users,%20['user',%20'age']);%20%20
//%20=>%20objects%20for%20[['barney',%2034],%20['barney',%2036],%20['fred',%2040],%20['fred',%2048]]%20%20
%20%20
_.sortBy(users,%20'user',%20function(o)%20{%20%20
return%20Math.floor(o.age%20/%2010);%20%20
});%20%20
//%20=>%20objects%20for%20[['barney',%2036],%20['barney',%2034],%20['fred',%2048],%20['fred',%2040]]
超级实用的工具函数！ 我要「浅拷贝」！ clone 
const%20obj1%20=%20[{a:%201%20}]

const%20obj2%20=%20_.clone(obj1)

console.log(obj1%20===%20obj2)%20//%20false

console.log(obj1.a%20===%20obj2.a)%20//%20true
我要「深拷贝」！ cloneDeep 
const%20obj1%20=%20[{a:%201%20}]

const%20obj2%20=%20_.cloneDeep(obj1)

console.log(obj1%20===%20obj2)%20//%20false

console.log(obj1.a%20===%20obj2.a)%20//%20false
debounce%20我要「防抖」！ 参数
  1. func %20(Function)%20:%20要防抖动的函数。
  2. [wait=0] %20(number)%20:%20需要延迟的毫秒数。
  3. [options=] %20(Object)%20:%20选项对象。
  4. [options.leading=false] %20(boolean)%20:%20指定在延迟开始前调用。
  5. [options.maxWait] %20(number)%20:%20设置 func 允许被延迟的最大值。
  6. [options.trailing=true] %20(boolean)%20:%20指定在延迟结束后调用。
返回

(Function)%20:%20返回新的%20debounced（防抖动）函数。

例子 
//%20避免窗口在变动时出现昂贵的计算开销。
jQuery(window).on('resize',%20_.debounce(calculateLayout,%20150));
%20
//%20当点击时%20`sendMail`%20随后就被调用。
jQuery(element).on('click',%20_.debounce(sendMail,%20300,%20{
%20%20'leading':%20true,
%20%20'trailing':%20false
}));
%20
//%20确保%20`batchLog`%20调用1次之后，1秒内会被触发。
var%20debounced%20=%20_.debounce(batchLog,%20250,%20{%20'maxWait':%201000%20});
var%20source%20=%20new%20EventSource('/stream');
jQuery(source).on('message',%20debounced);
%20
//%20取消一个%20trailing%20的防抖动调用
jQuery(window).on('popstate',%20debounced.cancel);
throttle%20我要「节流」！ 参数
  1. func %20(Function)%20:%20要节流的函数。
  2. [wait=0] %20(number)%20:%20需要节流的毫秒。
  3. [options=] %20(Object)%20:%20选项对象。
  4. [options.leading=true] %20(boolean)%20:%20指定调用在节流开始前。
  5. [options.trailing=true] %20(boolean)%20:%20指定调用在节流结束后。
返回

(Function)%20:%20返回节流的函数。

例子 
//%20避免在滚动时过分的更新定位
jQuery(window).on('scroll',%20_.throttle(updatePosition,%20100));
%20
//%20点击后就调用%20`renewToken`，但5分钟内超过1次。
var%20throttled%20=%20_.throttle(renewToken,%20300000,%20{%20'trailing':%20false%20});
jQuery(element).on('click',%20throttled);
%20
//%20取消一个%20trailing%20的节流调用。
jQuery(window).on('popstate',%20throttled.cancel);
我「获取」对象中的某几个字段！ pick 
var%20object%20=%20{%20'a':%201,%20'b':%20'2',%20'c':%203%20};%20%20
%20%20
_.pick(object,%20['a',%20'c']);%20%20
//%20=>%20{%20'a':%201,%20'c':%203%20}
我要「剔除」掉对象中的某几个字段！ omit 
var%20object%20=%20{%20'a':%201,%20'b':%20'2',%20'c':%203%20};%20%20
%20%20
_.omit(object,%20['a',%20'c']);%20%20
//%20=>%20{%20'b':%20'2'%20}
我要判断一个变量的类型！ isUndefined

如果 value 是 undefined ，那么返回 true，否则返回 false

_.isUndefined(undefined);%20%20
//%20=>%20true%20%20
%20%20
_.isUndefined(null);%20%20
//%20=>%20false
isNull

如果 value 为null，那么返回 true，否则返回 false。

_.isNull(null);%20%20
//%20=>%20true%20%20
%20%20
_.isNull(undefined);%20%20
//%20=>%20false
isString

如果 value 为一个字符串，那么返回 true，否则返回 false。

_.isString('abc');%20%20
//%20=>%20true%20%20
%20%20
_.isString(1);%20%20
//%20=>%20false
isPlainObject

如果 value 为一个普通对象，那么返回 true，否则返回 false。

function%20Foo()%20{%20%20
this.a%20=%201;%20%20
}%20%20
%20%20
_.isPlainObject(new%20Foo);%20%20
//%20=>%20false%20%20
%20%20
_.isPlainObject([1,%202,%203]);%20%20
//%20=>%20false%20%20
%20%20
_.isPlainObject({%20'x':%200,%20'y':%200%20});%20%20
//%20=>%20true%20%20
%20%20
_.isPlainObject(Object.create(null));%20%20
//%20=>%20true
isNumber

如果 value 为一个数值，那么返回 true，否则返回 false。

_.isNumber(3);%20%20
//%20=>%20true%20%20
%20%20
_.isNumber(Number.MIN_VALUE);%20%20
//%20=>%20true%20%20
%20%20
_.isNumber(Infinity);%20%20
//%20=>%20true%20%20
%20%20
_.isNumber('3');%20%20
//%20=>%20false
isArray

如果value是一个数组返回 true，否则返回 false。

_.isArray([1,%202,%203]);%20%20
//%20=>%20true%20%20
%20%20
_.isArray(document.body.children);%20%20
//%20=>%20false%20%20
%20%20
_.isArray('abc');%20%20
//%20=>%20false%20%20
%20%20
_.isArray(_.noop);%20%20
//%20=>%20false
isBoolean

如果 value 是一个布尔值，那么返回 true，否则返回 false。

_.isBoolean(false);%20%20
//%20=>%20true%20%20
%20%20
_.isBoolean(null);%20%20
//%20=>%20false
isFunction

如果 value 是一个函数，那么返回 true，否则返回 false。

_.isFunction(function(){});%20%20
//%20=>%20true%20%20
%20%20
_.isFunction('');%20%20
//%20=>%20false
isNill

如果 value 为null 或 undefined，那么返回 true，否则返回 false。

_.isNil(null);%20%20
//%20=>%20true%20%20
%20%20
_.isNil(void%200);%20%20
//%20=>%20true%20%20
%20%20
_.isNil(NaN);%20%20
//%20=>%20false
结语

我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜欢前端，想学习前端，那咱们可以交朋友，一起摸鱼哈哈，摸鱼群，点这个，有5000多名前端小伙伴在等着一起学习哦%20--> 摸鱼沸点

工具

本文是由"秘密武器开发者中心"本站原创整理，所有内容的版权归原作者所有。

相关专题