lodash学习笔记

目录

lodash

lodash包括很多工具函数,可以操作数组,集合,数字,字符串,也有一些很方便的函数可以调用

api学习

中文官网链接
目前只是几个看起来可能会常用的进行记录,如果以后用到别的会更新记录
注意,能使用原生js做到的尽量不要使用lodash,一个是作者已经停止维护了,就尽量不要过度依赖这个库,第二,这个库很多内容是可以用原生简单解决的,用它反而效率降低,没有必要。

数组

pullAt

移除数组中的某些元素,可以单个移除不一定连续,然后这个函数返回的是移除的元素组成的数组。

js 复制代码
var array = [5, 10, 15, 20];
var evens = _.pullAt(array, 1, 3);
 
console.log(array);
// => [5, 15]
 
console.log(evens);
// => [10, 20]

zipObject

二维数组变对象

js 复制代码
_.zipObject(['a', 'b'], [1, 2]);
// => { 'a': 1, 'b': 2 }

zipObjectDeep

zipObject升级款

js 复制代码
_.zipObjectDeep(['a.b[0].c', 'a.b[1].d'], [1, 2]);
// => { 'a': { 'b': [{ 'c': 1 }, { 'd': 2 }] } }

xor

亦或合并,将两个数组相同的除去然后合并数组

js 复制代码
_.xor([2, 1], [2, 3]);
// => [1, 3]

remove

相当于filter,但同时能删除原数组的元素

js 复制代码
var array = [1, 2, 3, 4];
var evens = _.remove(array, function(n) {
  return n % 2 == 0;
});
 
console.log(array);
// => [1, 3]
 
console.log(evens);
// => [2, 4]

uniqBy

带筛选条件的去重

js 复制代码
_.uniqBy([2.1, 1.2, 2.3], Math.floor);
// => [2.1, 1.2]
 
// The `_.property` iteratee shorthand.
_.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x');
// => [{ 'x': 1 }, { 'x': 2 }]

sortedUniq

排序+去重

js 复制代码
_.sortedUniq([1, 1, 2]);
// => [1, 2]

集合

invokeMap

对集合进行处理,第一个参数是数组,第二个参数是处理函数,第三个是这个方法的参数

js 复制代码
_.invokeMap([[5, 1, 7], [3, 2, 1]], 'sort');
// => [[1, 5, 7], [1, 2, 3]]
 
_.invokeMap([123, 456], String.prototype.split, '');
// => [['1', '2', '3'], ['4', '5', '6']]

groupBy

按某个条件进行分类,第二个参数就是条件,这个条件将转换成结果

js 复制代码
_.groupBy([6.1, 4.2, 6.3], Math.floor);
// => { '4': [4.2], '6': [6.1, 6.3] }
 
// The `_.property` iteratee shorthand.
_.groupBy(['one', 'two', 'three'], 'length');
// => { '3': ['one', 'two'], '5': ['three'] }

keyBy

按什么东西(第二个参数)作为key生成对象

js 复制代码
var array = [
  { 'dir': 'left', 'code': 97 },
  { 'dir': 'right', 'code': 100 }
];
 
_.keyBy(array, function(o) {
  return String.fromCharCode(o.code);
});
// => { 'a': { 'dir': 'left', 'code': 97 }, 'd': { 'dir': 'right', 'code': 100 } }
 
_.keyBy(array, 'dir');
// => { 'left': { 'dir': 'left', 'code': 97 }, 'right': { 'dir': 'right', 'code': 100 } }

partition

用一个属性条件将数组进行分类

js 复制代码
var users = [
  { 'user': 'barney',  'age': 36, 'active': false },
  { 'user': 'fred',    'age': 40, 'active': true },
  { 'user': 'pebbles', 'age': 1,  'active': false }
];
 
_.partition(users, function(o) { return o.active; });
// => objects for [['fred'], ['barney', 'pebbles']]
 
// The `_.matches` iteratee shorthand.
_.partition(users, { 'age': 1, 'active': false });
// => objects for [['pebbles'], ['barney', 'fred']]
 
// The `_.matchesProperty` iteratee shorthand.
_.partition(users, ['active', false]);
// => objects for [['barney', 'pebbles'], ['fred']]
 
// The `_.property` iteratee shorthand.
_.partition(users, 'active');
// => objects for [['fred'], ['barney', 'pebbles']]

sample 和 sampleSize

sample是取一个随机样本,sampleSize是取多个随机样本

js 复制代码
_.sample([1, 2, 3, 4]);
// => 2

_.sampleSize([1, 2, 3], 2);
// => [3, 1]
 
_.sampleSize([1, 2, 3], 4);
// => [2, 3, 1]

shuffle

随机打乱数组

js 复制代码
_.shuffle([1, 2, 3, 4]);
// => [4, 1, 3, 2]

Function

after

此函数被调用n次后才会触发调用函数

js 复制代码
var saves = ['profile', 'settings'];
 
var done = _.after(saves.length, function() {
  console.log('done saving!');
});
 
_.forEach(saves, function(type) {
  asyncSave({ 'type': type, 'complete': done });
});
// => Logs 'done saving!' after the two async saves have completed.

before

和after一样只是在前n次调用此函数会调用回调函数

debounce

防抖函数

js 复制代码
// 避免窗口在变动时出现昂贵的计算开销。
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

节流函数

js 复制代码
// 避免在滚动时过分的更新定位
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);
相关推荐
哆哆啦0010 分钟前
使用 Obsidian + GitHub Actions + GitHub Pages 搭建内容发布流
数据库·笔记·github·obsidian
stars-he32 分钟前
基于 Python 的 DTMF 双音多频信号识别实验
学习·dsp开发
棉猴1 小时前
python海龟绘图之画布与窗口
javascript·python·html·setup·turtle·海龟绘图·screensize
wuxinyan1231 小时前
工业级大模型学习之路012:RAG 零基础入门教程(第七篇):高级检索架构(解决分块不合理问题)
人工智能·学习·rag
AI_paid_community1 小时前
25k Star 登顶 GitHub:这个专门吃 K 线图长大的 AI,让我意识到之前三年都在裸奔
javascript·claude
xuhaoyu_cpp_java2 小时前
SpringMVC学习(五)
java·开发语言·经验分享·笔记·学习·spring
炽烈小老头2 小时前
【每天学习一点算法 2026/05/15】被围绕的区域
学习·算法·深度优先
中屹指纹浏览器2 小时前
2026平台集群式风控溯源体系研究与浏览器环境适配应对方案
经验分享·笔记
秋雨梧桐叶落莳2 小时前
iOS——ZARA仿写项目
学习·macos·ios·objective-c·cocoa
gjwjuejin3 小时前
前端埋点第二弹:那些年我们踩过的坑,和填坑的正确姿势
javascript