lodash学习笔记

目录

  • lodash
  • api学习
    • 数组
      • pullAt
      • zipObject
      • zipObjectDeep
      • xor
      • remove
      • uniqBy
      • sortedUniq
    • 集合
      • invokeMap
      • groupBy
      • keyBy
      • partition
      • sample 和 sampleSize
      • shuffle
    • Function
      • after
      • before
      • debounce
      • throttle

lodash

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

api学习

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

数组

pullAt

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

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

zipObject

二维数组变对象

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

zipObjectDeep

zipObject升级款

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

xor

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

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

remove

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

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

带筛选条件的去重

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

排序+去重

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

集合

invokeMap

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

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

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

_.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生成对象

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

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

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是取多个随机样本

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

shuffle

随机打乱数组

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

Function

after

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

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

防抖函数

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

节流函数

// 避免在滚动时过分的更新定位
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);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/102856.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vscode 资源管理器移动到右边

目录 vscode 资源管理器移动到右边 vscode 资源管理器移动到右边 点击 文件》首选项》设置》工作台》外观》 找到这个配置下拉选择左右

单元测试很难么?也没有吧

前言 你可能会用单元测试框架,python的unittest、pytest,Java的Junit、testNG等。 那么你会做单元测试么!当然了,这有什么难的? test_demo.py def inc(x):return x 1def test_answer():assert inc(3) 4 inc() 是…

三次挥手和四次握手

TCP建立连接(三次握手) 经过DNS域名解析后,获取到了服务器的IP地址,在获取到IP地址后,便会开始建立一次连接,这是由TCP协议完成的,主要通过三次握手进行连接。 第一次握手: 建立连…

(部署服务器系列一)虚拟机模拟部署服务器

1、下载安装vmware 15 (win7最高支持版) 2、下载安装CentOS 配置2核2g(最少)磁盘100g(不会实际占有)选择时区-上海配置分区:https://blog.csdn.net/qq_35363507/article/details/127390889 &a…

设计模式02———建造者模式 c#

首先我们打开一个项目 在这个初始界面我们需要做一些准备工作 建基础通用包 创建一个Plane 重置后 缩放100倍 加一个颜色 更换天空盒(个人喜好) 任务:使用【UI】点击生成6种车零件组装不同类型车 【建造者模式】 首先资源商店下载车模型 将C…

虚幻引擎:如何才能对音波(声音资产)进行逻辑设置和操作

案列:调整背景音乐大小 1.创建一个SoundCue 2.进入创建的SoundCue文件 3. 创建音效类和音效类混合 4.进入SoundCue选择需要的音效类 5.然后音效类混合选择相同的音效类 6.然后蓝图中通过节点进行控制音量大小

把二叉搜索树转换为累加树

题目链接 把二叉搜索树转换为累加树 题目描述 注意点 树中的节点数介于 0 和 10000 之间每个节点的值介于 -10000 和 10000 之间树中的所有值 互不相同给定的树为二叉搜索树 解答思路 因为二叉搜索树的性质是左子树的值始终小于根节点的值,右子树的值始终大于根…

Android组件通信——ActivityGroup(二十五)

1. ActivityGroup 1.1 知识点 (1)了解ActivityGroup的作用; (2)使用ActivityGroup进行复杂标签菜单的实现; (3)使用PopupWindow组件实现弹出菜单组件开发; 1.2 具体…

el-upload手动上传图片,上传后隐藏上传样式(el-upload上传单张图片,vue2)

简介:上期介绍了使用el-upload上传文件,这次来介绍一下如何使用el-upload上传图片,只能上传一次,上传图片后隐藏上传按钮部分。 实现效果图: 1、首先,想要在项目中使用el-upload组件,同样&#…

检验检疫系统(LIS)源码:C# + MVC + SQLserver + Redis

LIS系统源码技术特点:采用.Net Core新的技术框架、DEV报表、前端js封装、分布式文件存储、分布式缓存等,支持LIS独立部署,Docker部署等多种方式。 技术架构:ASP.NET CORE 3.1 MVC SQLserver Redis等 开发语言:C…

基于全景运动感知的飞行视觉脑关节神经网络全方位碰撞检测

https:/doi.org/10.1155/2023/5784720 摘要: 生物系统有大量的视觉运动检测神经元,其中一些神经元可以优先对特定的视觉区域做出反应。然而,关于如何使用它们来开发用于全向碰撞检测的神经网络模型,很少有人做过工作。为此&#…

env变量设置

起源 经常会遇到使用环境变量的时候 api os.getenv("API") let case_sensitive: bool env::var(key: "CASE_INSENSITIVE").is_err() strategy: os.Getenv("Strategy") 设置 powershell: $env:EGG1bash: export CASE_INSENSITIVE1cmd: set S…

【算法优选】 二分查找专题——贰

文章目录 😎前言🌲[山脉数组的峰顶索引](https://leetcode.cn/problems/peak-index-in-a-mountain-array/)🚩题目描述:🚩算法思路🚩代码实现: 🌴[寻找峰值](https://leetcode.cn/pro…

深度伪造相关代码/工具

提取人脸Landmark 提取81/6813个Landmark的人脸检测器: https://github.com/codeniko/shape_predictor_81_face_landmarks 人脸特征提取模块 多尺度伪影检测模块 2023CVPR Implicit Identity Leakage: The Stumbling Block to Improving Deepfake Detection Gen…

Oracle 简介与 Docker Compose部署

最近,我翻阅了在之前公司工作时的笔记,偶然发现了一些有关数据库的记录。当初,我们的项目一开始采用的是 Oracle 数据库,但随着项目需求的变化,我们不得不转向使用 SQL Server。值得一提的是,公司之前采用的…

编程前置:句子联想游戏

꧂ 问题最初꧁ 首先,让我们从一个简单的词汇“水”开始: 1. 我喜欢在晚饭时喝一杯温水。 2. 水是一种无色透明的液体。 3. 鱼需要水才能生存。 4. 当你游泳时,记得要保持呼吸。 5. 水可以带走所有的垃圾和污垢。 6. 水在自然界中循环&#…

golang使用energy开发GUI桌面程序,CEF,LCL

1、概述 仓库:https://github.com/energye/energy 文档:https://energy.yanghy.cn/ Energy 是 Go 基于 CEF(Chromium Embedded Framework) 开发的框架,内嵌 CEF 二进制 使用 Go 和 Web 端技术 ( HTML CSS JavaScript ) 构建支持Windows, …

Docker - 网络模式与容器网络互连

前言 简单记录一下在Docker学习过程中,关于网络模式和容器网络互连的基本概念。 一、Docker的网络模式 (1)桥接模式:Docker会为每个容器创建一个虚拟网卡,并将这些虚拟网卡连接到一个虚拟交换机上,从而实…

MongoDB——centOS7环境Mongodb权限管理(图解版)

目录 一、MongDB权限概述1.1、MongDB权限概述1.2、MongDB权限列表 二、Mongodb权限管理示例2.1、创建账号2.1.1、创建管理员用户2.1.2、开启认证2.1.3、创建普通账号 一、MongDB权限概述 1.1、MongDB权限概述 mongodb是没有默认管理员账号,所以要先添加管理员账号…

解决echarts配置滚动(dataZoom)后导出图片数据不全问题

先展现一个echarts&#xff0c;并配置dataZoom&#xff0c;每页最多10条数据&#xff0c;超出滚动 <div class"echartsBox" id"echartsBox"></div>onMounted(() > {nextTick(() > {var chartDom document.getElementById(echartsBox);…