20个Lodash 函数瞬间提升代码逼格

减少重复操作,提升可读性,提升团队性。

有一大波API将要想你走来

0 _.last(array)

获取array中的最后一个元素 array.length - 1可还行

_.head(array) 获取数组 array 的第一个元素。

1 _.pull(array, [values])

移除数组array中所有和给定值相等的元素

indexOf、splice可还行

var array = [1, 2, 3, 1, 2, 3];
 
_.pull(array, 2, 3);
console.log(array);
// => [1, 1]

_.pullAt 根据索引 indexes,移除array中对应的元素,并返回被移除元素的数组。
_.pullAll 这个方法类似 _.pull,区别是这个方法接收一个要移除值的数组。

3 _.uniq(array)

创建一个去重后的array数组副本。使用了 SameValueZero 做等值比较。只有第一次出现的元素才会被保留。

_.uniq([2, 1, 2]);
// => [2, 1]

Aarray 系列中还有扁平化、排序、交集、并集、补集等操作

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

原生forEach 不支持对象,不能退出,这些都帮你解决啦。

还有其他高阶函数哦
_.every_.filter_.find_.findLast
_.forEachRight

5 _.keyBy(collection, [iteratee=_.identity])

将数据转化为id可以key值得对象,便于查询,太常用了。

 var list = [{ age: 12, id: 1 }, { age: 14, id: 5 }];
 console.log(_.keyBy(list, (argItem) => argItem.id));
image.png

_.countBy_.groupBy_.orderBy_.sortBy

6 _.shuffle(collection)

打乱一个集合

sort(()=>Math.random()-0.5) 可还行。

_.sample 从collection(集合)中获得一个随机元素。

_.sampleSize 从collection(集合)中获得 n 个随机元素。

下面解释好懂吧

7 _.debounce(func, [wait=0], [options={}])

防抖 setTimeout、clearTimeout可还行。

如果用手指一直按住一个弹簧,它将不会弹起直到你松手为止。

也就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。

8 _.throttle(func, [wait=0], [options={}])

节流,限制resize这种再好不过了

将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出。

也就是会说预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期。

9 _.defer(func, [args])

推迟调用func,直到当前堆栈清理完毕。 调用时,任何附加的参数会传给func。

_.delay(func, wait, [args]) 延迟 wait 毫秒后调用 func。 调用时,任何附加的参数会传给func。

Function 还有处理参数的、调用次数、柯理化、缓存函数结果等等

10 _.cloneDeep(value)

JSON.parse(JSON.stringfy) 实现深拷贝可还行,还要考虑循环引用问题。

11_.isEqual(value, other)

深度判断两个对象的值是否相等,

_.isEmpty 检查 value 是否为一个空对象,集合,映射或者set。
_.isError 检查 value 是否是 Error
_.isElement 检查 value 是否是可能是 DOM 元素。

12 _.ceil(number, [precision=0])

根据 precision(精度) 向上舍入 number。( precision(精度)可以理解为保留几位小数。)

_.ceil(4.006);
// => 5
 
_.ceil(6.004, 2);
// => 6.01
 
_.ceil(6040, -2);
// => 6100

_.floor(number, [precision=0]) 根据 precision(精度) 向下舍入 number。( precision(精度)可以理解为保留几位小数。)
_.round(number, [precision=0])

13 _.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

14 _.get(object, path, [defaultValue])

当为了防止后台返回数据存在深层次属性取值失败而导致的渲染问题,再也不用各种? : 、各种||,或是各种assign和扩展运算符了!!!

打他!
var object = { 'a': [{ 'b': { 'c': 3 } }] };
 
_.get(object, 'a[0].b.c');
// => 3
 
_.get(object, ['a', '0', 'b', 'c']);
// => 3
 
_.get(object, 'a.b.c', 'default');
// => 'default'

_.set 设置 object对象中对应 path 属性路径上的值,如果path不存在,则创建。 缺少的索引属性会创建为数组,而缺少的属性会创建为对象

15 _.attempt

优雅的写 try catch

尝试调用func,返回结果 或者 捕捉错误对象。任何附加的参数都会在调用时传给func。

// Avoid throwing errors for invalid selectors.
var elements = _.attempt(function(selector) {
  return document.querySelectorAll(selector);
}, '>_>');
 
if (_.isError(elements)) {
  elements = [];
}

16 _.mapKeys(object, [iteratee=_.identity])

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

17 _.mapValues(object, [iteratee=_.identity])

var users = {
  'fred':    { 'user': 'fred',    'age': 40 },
  'pebbles': { 'user': 'pebbles', 'age': 1 }
};
 
_.mapValues(users, function(o) { return o.age; });
// => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)
 
// The `_.property` iteratee shorthand.
_.mapValues(users, 'age');
// => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)

18 _.escape([string=''])

转义string中的 "&", "<", ">", '"', "'", 和 "`" 字符为HTML实体字符。

_.escapeRegExp([string='']) 转义 RegExp 字符串中特殊的字符 "^", "$", "", ".", "*", "+", "?", "(", ")", "[", "]", "{", "}", 和 "|" in .

19 _.times(n, [iteratee=_.identity])

调用 iteratee n 次,每次调用返回的结果存入到数组中。 iteratee 调用入1个参数: (index)。

_.times(3, String);
// => ['0', '1', '2']
 
 _.times(4, _.constant(0));
// => [0, 0, 0, 0]

20 _.uniqueId([prefix=''])

生成唯一ID。 如果提供了 prefix ,会被添加到ID前缀上。

_.uniqueId('contact_');
// => 'contact_104'
 
_.uniqueId();
// => '105'

至于链式调用,还是少用的好。

在VueCli3.0 中使用Lodash

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容