lodash库_.chunk、_.pick、_.omit、_.cloneDeep、_.debounce方法

lodash 模块化、高性能的 JavaScript 实用工具库。官方文档:https://www.lodashjs.com

1.对数组进行分组 _.chunk(array, [size=1])

使用场景,如移动端页面一行能放5个元素,总共7条数据,将一维数组转为二维数组,让一个数组只有5个成员

参数:arr表示要分组的数组,num表示一个分组里面放几个元素

 arr: [{a: 1},{a: 2},{a: 3},{a: 4},{a: 5},{a: 6},{a: 7}],

2.选中和过滤对象的属性_.pick(Object,[prop])和_.omit()

_.pick(Object,[prop]) :第一个参数数据源,必须是对象,第二个参数需要获取的属性(可以是数组形式),返回新的数组

_.omit():和pick相反,排除某个数据

3.防抖处理

_.debounce(fn,wait,[options]) : [options]是一个对象,可以设置定时器各种配置

leading: true延时开始前是否调用,默认false

trailing: false延时结束后是否调用,默认true

注意:防抖函数在vue中的使用,在data中定义函数并调用_.debounce()函数后,进行return。

直接在methods里面写不能被正常调用,因为_.debounce()主要是接收一个返回值,然后再执行返回函数。

4. 数据进行深拷贝 _.cloneDeep(obj)

使用场景:如vuex中对state数据是引用数据类型的修改,直接通过obj.a = 1的形式修改发现没有触发页面渲染

<template><button style="height:30px" @click="onDebounce">按钮</button>
</template>
<script>
import _ from "lodash";export default {name: "Form",data() {const onDebounce = _.debounce(function() {console.log("按钮触发了---");},1000,{leading: false,trailing: true})return {onDebounce,arr: [{ a: 1 },{ a: 2 },{ b: 3 },{ b: 4 },{ c: 5 },{ c: 6 },{ d: 7 }],obj:{name:'lmf',age: 23}};},mounted(){console.log(_.chunk(this.arr, 5));console.log(_.pick(this.obj, ['name']));console.log(_.omit(this.obj, ['name']));let obj2 = _.cloneDeep(this.obj)obj2.name = "limingfang"console.log(this.obj,obj2);},
};
</script>

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

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

相关文章

ETX很小

windows桌面调节分辨率即可&#xff1a;

shopee平台现在好做吗

Shopee 是一家知名的电子商务平台&#xff0c;特别在东南亚地区非常流行。是否在 Shopee 平台做生意是否好做取决于多种因素&#xff0c;包括你的产品、市场竞争、营销策略和运营能力等。 以下是一些考虑因素&#xff1a; 1、产品选择&#xff1a;选择畅销的产品或具有市场需求…

Java设计模式之外观模式(Facade Pattern)

外观模式&#xff08;Facade Pattern&#xff09;是一种结构型设计模式&#xff0c;它提供了一个统一的接口&#xff0c;用于访问子系统中的一组接口。外观模式通过隐藏子系统的复杂性&#xff0c;简化了客户端与子系统之间的交互&#xff0c;提供了一个更简单、更直观的接口。…

CBitmap、CreateCompatibleBitmap、CreateBitmap

一、CBitmap类主要是加载位图资源&#xff0c;或者建立一个空白位图用于存储画面。 BOOL LoadBitmap(UINT nIDResource)从工程资源中加载一张位图BOOL LoadOEMBitmap(UINT nIDBitmap)从系统资源中加载一张位图BOOL CreateBitmap(int nWidth, int nHeigjt, UINT nPlane, UINT n…

Linux使用rpm包安装mysql5.7

以前安装过mysql 前言&#xff1a;检查以前是否装有mysql rpm -qa|grep -i mysql安装了会显示&#xff1a;   bt-mysql57-5.7.31-1.el7.x86_64 停止mysql服务和删除之前安装的mysql rpm -e bt-mysql57-5.7.31-1.el7.x86_64查找并删除mysql相关目录 find / -name mysql/va…

2023-10-20 游戏开发-cocos2.0.6-下载地址-记录

官方下载地址: Cocos Creator 下载 - 轻量高效的开发引擎 Tags cocos/cocos-engine GitHub cocos creater 旧版本: Tool/Package/REAMDE.md 木限东/CocosCreatorFAQ - Gitee.com v2.0.6版本: Mac版&#xff1a;http://cocos2d-x.org/filedown/CocosStudioForMac-v2.0.6.dm…

排序算法(python)

排序算法 冒泡排序 一次比较相邻的两个数&#xff0c;每轮之后末尾的数字是确定的。 时间复杂度为 O ( n 2 ) O(n^2) O(n2)&#xff0c;空间复杂度为 O ( 1 ) O(1) O(1)&#xff0c;稳定。 def BUB(nums):for i in range(len(nums)):count 0for j in range(len(nums)-i-1)…

教育课堂小程序,三分钟打造专属小程序 带完整搭建教程

大家好哇&#xff0c;今天来给大家分享一款教育课堂小程序。现如今&#xff0c;线上教育已经普及&#xff0c;在大学课堂里&#xff0c;老师尝尝是使用各种各样的学习APP进行点名&#xff0c;签到&#xff0c;答题&#xff0c;考试等等&#xff0c;相较于传统的APP来说&#xf…

oracle11g安装图解

软件需求 1.安装CentOS6.5的服务器一台 2.Oracle 11g 安装介质: linux.x64_11gR2_database_1of2.zip linux.x64_11gR2_database_2of2.zip 3.命令行客户端工具xshell、crt或者putty 4.图形界面客户端工具Xming 系统配置检查 1.内存检查 grep MemTotal /proc/m…

dubbogo-1 基础rpc服务

文章目录 基本环境处理编译pb接口开启rpc调用业务观察qa1 能取出protoc里面的字段值吗&#xff1f; 基本环境处理 https://cn.dubbo.apache.org/zh-cn/overview/quickstart/go/install/ 这里没有 protoc-gen-go --version 执行 go get -u github.com/golang/protobuf/protoc…

微信小程序多个按钮点击互不影响禁用实现

这段代码主要实现的是当有多个按钮时,需要改变按钮的内容,比如点击第一个按钮,按钮禁用并内容改为五秒后可点击,但此时不影响第二个按钮点击,每个按钮都是可以禁用5秒后再点击,就是互不影响 Page({data: {buttonStates: {}, // 用于存储按钮的状态},onButtonClick: function (e…

竞赛选题 深度学习乳腺癌分类

文章目录 1 前言2 前言3 数据集3.1 良性样本3.2 病变样本 4 开发环境5 代码实现5.1 实现流程5.2 部分代码实现5.2.1 导入库5.2.2 图像加载5.2.3 标记5.2.4 分组5.2.5 构建模型训练 6 分析指标6.1 精度&#xff0c;召回率和F1度量6.2 混淆矩阵 7 结果和结论8 最后 1 前言 &…

基于vue3+ts5+vue-router4+pinia2的PC端项目搭建教程

导语&#xff1a;在日常开发中&#xff0c;有时候会在项目中引入 ts 来解决一些 js 的问题&#xff0c;下面就简单介绍一下如何使用 vue3tsrouterpinia 来搭建一个项目。 目录 简介创建安装配置实战 简介 vue3 目前是常用的 vue 版本&#xff0c;提供了组合式 API 以及一些新…

Modbus网关实现设备之间的相互通信和数据共享

随着工业自动化的不断发展&#xff0c;Modbus协议在工业控制系统中得到了广泛应用。而Modbus网关&#xff0c;作为连接Modbus设备的桥梁&#xff0c;也成为了工业自动化领域中不可或缺的一部分&#xff0c;是连接不同设备、实现数据传输的关键组件。Modbus网关能够将不同设备的…

Windows 事件日志监控

Windows 事件日志是记录 Microsoft 系统上发生的所有活动的文件&#xff0c;在 Windows 环境中&#xff0c;将记录系统上托管的系统、安全性和应用程序的事件&#xff0c;事件日志提供包含有关事件的详细信息&#xff0c;包括日期、时间、事件 ID、源、事件类型和发起它的用户。…

拭目以待!万博智云亮相2023长沙·中国1024程序员节

2023年10月23 - 25日&#xff0c;第四届“长沙中国 1024 程序员节”将在中国长沙盛大举行&#xff0c;万博智云 OneProCloud将以大会钻石合作伙伴身份重磅亮相&#xff0c;CEO Michael将发表主题演讲。这也是万博智云首次成为长沙中国 1024 程序员节合作伙伴。 1.主题演讲 万博…

Qt/C++开源作品45-CPU内存显示控件/和任务管理器一致

一、前言 在很多软件上&#xff0c;会在某个部位显示一个部件&#xff0c;专门显示当前的CPU使用率以及内存占用&#xff0c;方便用户判断当前程序或者当前环境中是否还有剩余的CPU和内存留给程序使用&#xff0c;在不用打开任务管理器或者资源查看器的时候直接得知当前系统的…

求最大公约数的几种常见的方法 【详解】

目录 一、关于公约数 二、计算最大公约数的方法 1. 辗转相除法&#xff08;欧几里得算法&#xff09; 2. 更相减损法&#xff08;辗转相减法&#xff09; 3. 分解质因数法 4. 穷举法 5. 递归法 6. 短除法 三、总结 一、关于公约数 首先 &#xff0c;先介绍一下公约…

SVN一直报错Error running context: 由于目标计算机积极拒绝,无法连接。解决办法【杭州多测师_王sir】...

一、发现SVN一直报错Error running context: 由于目标计算机积极拒绝&#xff0c;无法连接。 二、没有启动 VisualSVN Server。cmd--> services.msc打开本地服务。查看VisualSVN的三个服务的启动类型&#xff0c;建议选择“手动”&#xff0c;不能选择“禁用”&#xff0c;选…

C++设计模式_09_Abstract Factory 抽象工厂

与上篇介绍的Factory Method工厂方法模式一样&#xff0c;Abstract Factory 抽象工厂模式也属于典型的“对象创建模式”模式&#xff0c;解决的问题也极其相似&#xff0c;在理解了Factory Method工厂方法模式的基础上再去理解Abstract Factory 抽象工厂模式就会变得更加容易。…