【lodash.js】非常好用高性能的 JavaScript 实用工具库,防抖,深克隆,排序等

前言:lodash是一款前端必须要知道的js库,它里面提供了许多常用的功能和实用的工具函数

基本上我参与的项目中都有lodash,只能说lodash太强大了,lodash.js 提供了超过 300 个实用的工具函数,涵盖了很多常见的编程任务

lodash中文文档,lodash中文文档请戳这里

本文只讲一些常用的功能,以代码示例说明。最好的方法就是直接去看中文文档,文档上的示例也是非常好理解的。

1、安装

npm i --save lodash

2、全局引入或直接引入
1、全局引入,在main.js中

// 全局引入lodash
import _ from 'lodash'
Vue.prototype._ = _

2、直接引入

import { cloneDeep } from 'lodash'

3、功能:
1、深拷贝对象或数组
在这里插入图片描述

import { cloneDeep} from 'lodash';
1、数组深拷贝
this.newArr=  cloneDeep(this.oldArr),
2、对象深拷贝let obj= cloneDeep(Object.assign(this.formData, this.form))// Object.assign 是 JavaScript 中一个常见的浅拷贝函数,它用于将多个对象合并成一个对象。loneDeep 函数只能对单个对象进行深拷贝,而不能同时对多个对象进行深拷贝。因此,为了将多个对象合并成一个新对象,并对其进行深拷贝,需要先使用 Object.assign 将这些对象合并成一个新对象,然后再将这个新对象传递给 cloneDeep 函数进行深拷贝

2、四舍五入数字
在这里插入图片描述

import { round } from 'lodash';
changeCurrency(row){
//保留两位小数,参数1:要四舍五入的数字,参数2:四舍五入的精度
this.$set(row, 'currency', round(row.currency, 2))
}

3、防抖动
在这里插入图片描述

mounted() {// 函数防抖this.getSearchquery = this._.debounce(this.getSearchquery, 300)},

4、对数组进行排序
在这里插入图片描述

import { orderBy} from 'lodash';
//以createBy字段进行降序排序,不指定第三个参数的值,默认为升序排序
this.newArr = orderBy(this.oldArr,'createBy','desc')

还有一些比较常用的,如:

数组操作:

chunk:将数组拆分为指定大小的小块。
compact:去除数组中的假值(false、null、0、""、undefined 和 NaN)。

集合操作:

map:对集合中的每个元素执行相同的操作,并返回结果数组。
filter:根据指定条件过滤集合中的元素,并返回符合条件的元素数组。
reduce:对集合中的元素进行累积计算,并返回最终结果。

函数操作:

debounce:防抖函数,延迟执行函数,直到一定时间内没有连续调用。
throttle:节流函数,在一定时间内只允许函数执行一次。

对象操作:

assign:将源对象的属性复制到目标对象。
pick:从对象中选择指定的属性创建一个新对象。
omit:从对象中排除指定的属性创建一个新对象。

字符串操作:

capitalize:将字符串的首字母转为大写。
trim:去除字符串两端的空格。

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

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

相关文章

【ascii码对照表】

计算机各种表 ascii码表BCD码(Binary-Coded Decimal‎)有权码-8421码有权码-2421码有权码-5421码无权码-余3码无权码-余3循环码无权码-格雷码 ascii码表 BCD码(Binary-Coded Decimal‎) BCD码也称二进码十进数 BCD用4位二进制数来…

数字图像处理(实践篇)三十六 OpenCV-Python 使用ORB和BFmatcher对两个输入图像的关键点进行匹配实践

目录 一 涉及的函数 二 实践 ORB(Oriented FAST and Rotated BRIEF)是一种特征点检测和描述算法,它结合了FAST关键点检测和BRIEF描述子。ORB算法具有以下优势: ①实时性:能够在实时应用中进行快速的特征点检测和描述。 ②

Windows系统云服务器自定义域名解析导致网站无法访问怎么解决?

本文九河云介绍Windows实例内部自定义域名解析与本地网络域名解析不一致导致无法访问网站的问题描述、问题原因和解决方案。 问题描述 在Windows实例内部通过浏览器无法访问某网站,但在其他设备上可以正常访问,排查发现Windows实例内部自定义域名解析与…

网络安全科普:SSL证书保护我们的网上冲浪安全

当我们在线上愉快冲浪时,各类网站数不胜数,但是如何判定该站点是安全还是有风险呢? 当当当,SSL数字证书登场!! SSL证书也称为数字证书,是一种用于保护网站和用户之间通信安全的加密协议。由权…

Python基础语法——数据输入(input语句)

一、引言 在Python编程中,数据的输入是一个基础且重要的环节。Python的input()函数允许用户从控制台输入数据,是Python中获取用户输入的主要方式。本文将详细解析input()函数的工作原理,以及如何处理和验证用户输入。 二、input()函数的工作…

Mac安装nvm,安装多个不同版本node,指定node版本

一.安装nvm brew install nvm二。配置文件 touch ~/.zshrc echo export NVM_DIR~/.nvm >> ~/.zshrc echo source $(brew --prefix nvm)/nvm.sh >> ~/.zshrc三.查看安装版本 nvm -vnvm常用命令如下:nvm ls :列出所有已安装的 node 版本nvm…

【网络】传输层TCP协议 | 三次握手 | 四次挥手

目录 一、概述 2.1 运输层的作用引出 2.2 传输控制协议TCP 简介 2.3 TCP最主要的特点 2.4 TCP连接 二、TCP报文段的首部格式 三、TCP的运输连接管理 3.1 TCP的连接建立(三次握手) 3.2 为什么是三次握手? 3.3 为何两次握手不可以呢? 3.4 TCP的…

AF647 二苯并环辛炔,AF647-DBCO,一种明亮且可感光的远红色染料

您好,欢迎来到新研之家 文章关键词:AF647 二苯并环辛炔,AF647 DBCO,Alexa Fluor 647 DBCO,AF647-二苯并环辛炔,AF647-DBCO 一、基本信息 产品简介:Alexa Fluor 647是一种独特的远红色染料&am…

2024-01-24-redis4

秒杀活动 需求:库存中有10件商品 商品的信息自定义 同时有100个人去抢购(这里100个人的抢购由jmeter来模拟) jmeter的使用 在idea中将后台代码实现 package org.aaa.controller;import org.apache.commons.lang3.StringUtils; import org.sp…

ORBSLAM3 运行流程 以rgbd_tum.cc函数为例进行分析

一、运行 使用的是D435i相机自己录制的数据。 运行命令: ./Examples/RGB-D/rgbd_tum /opt/vslam/ORB_SLAM3_detailed_comments-dense_map_new/Vocabulary/ORBvoc.txt /opt/vslam/ORB_SLAM3_detailed_comments-dense_map_new/Examples/RGB-D/TUM1.yaml /opt/vsl…

docker-compose部署单机ES+Kibana

记录部署的操作步骤 准备工作编写docker-compose.yml启动服务验证部署结果 本次elasticsearch和kibana版本为8.2.2 使用环境:centos7.9 本次记录还包括:安装elasticsearch中文分词插件和拼音分词插件 准备工作 1、创建目录和填写配置 mkdir /home/es/s…

基于springboot网上图书商城源码和论文

在Internet高速发展的今天,我们生活的各个领域都涉及到计算机的应用,其中包括网上图书商城的网络应用,在外国网上图书商城已经是很普遍的方式,不过国内的管理网站可能还处于起步阶段。网上图书商城具有网上图书信息管理功能的选择…

Spring Security的入门案例!!!

一、导入依赖 <dependencies><!--web--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!--security--><dependency><groupId>…

laravel框架项目对接小程序实战经验回顾

一.对接小程序总结 1.状态转换带来的问题&#xff0c;如下 问题原因&#xff1a;由于status 传参赋值层级较多&#xff0c;导致后续查询是数组但是传参是字符串&#xff0c; 解决方案&#xff1a;互斥的地方赋值为空数组&#xff0c;有状态冲突的地方unset掉不需要的参数 2参…

【数据结构1-1】线性表

线性表是最简单、最基本的一种数据结构&#xff0c;线性表示多个具有相同类型数据“串在一起”&#xff0c;每个元素有前驱&#xff08;前一个元素&#xff09;和后继&#xff08;后一个元素&#xff09;。根据不同的特性&#xff0c;线性表也分为数组&#xff08;vector&#…

代码随想录算法训练营DAY6 | 哈希表(1)

DAY5休息一天&#xff0c;今天重启~ 哈希表理论基础&#xff1a;代码随想录 Java hash实现 &#xff1a;java 哈希表-CSDN博客 一、LeetCode 242 有效的字母异位词 题目链接&#xff1a;242.有效的字母异位词 思路&#xff1a;设置字典 class Solution {public boolean isAnag…

shell脚本5 函数 数组

函数 试题1 查看版本 如果想更方便&#xff0c;可以建立一个专门存函数的文件 将func.sh里面的命令都移到func文件夹里面&#xff0c;在脚本里面执行文件夹更方便 输入echo $?反馈的结果都是0&#xff0c;都认为是正确的 无法使用$?去检验是否正确&#xff0c;所以要在后面增…

【Java反序列化】Shiro-550漏洞分析笔记

目录 前言 一、漏洞原理 二、Shiro环境搭建 三、Shiro-550漏洞分析 解密分析 加密分析 四、URLDNS 链 前言 shiro-550反序列化漏洞大约在2016年就被披露了&#xff0c;在上学时期也分析过&#xff0c;最近在学CC链时有用到这个漏洞&#xff0c;重新分析下并做个笔记&…

LocalContainerEntityManagerFactoryBean源码

是 Spring Data JPA 中的一个类&#xff0c;它用于创建 EntityManagerFactory 的实例&#xff0c;获取EntityManager实例 public class LocalContainerEntityManagerFactoryBean extends AbstractEntityManagerFactoryBeanimplements ResourceLoaderAware, LoadTimeWeaverAwar…

Java 集合 04 综合练习-查找用户是否存在

练习、 代码&#xff1a; public class User{private String id;private String username;private int password;public User() {}public User(String id, String username, int password) {this.id id;this.username username;this.password password;}public String getI…