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

news2024/11/16 23:46:45

前言: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.coloradmin.cn/o/1411171.html

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

相关文章

群辉NAS的远程访问

群辉NAS是私有云存储,局域网访问很容易【详见:网上邻居访问设置、其它设备的访问设置】,远程访问相对复杂,涉及很多关键因素,现将过程记录如下: 目录 1、互联网接入 2、绑定MAC与IP地址 3、路由器开启5…

HTML5与App封装技术将网站一键打包成App

HTML5:跨平台的利器HTML5作为一种先进的网页标记语言,其最大的优势在于跨平台性。开发者仅需编写一次代码,即可在各种操作系统和设备上运行,无需为每个平台单独开发App。这种“编写一次,运行处处”的模式,大…

选择海外云手机需要考虑什么?

随着跨境电商行业的蓬勃发展,企业们纷纷寻找提升平台流量和广告投放效果的方法,这已成为业界的当务之急。传统的宣传模式在国内受到直播和链接带货等新兴方式的冲击,而在国外,类似的趋势也在悄然兴起,呈现出广阔的发展…

OOM 内存溢出与线上内存实时监控

单应用可用的最大内存 dalvik.vm.heapstartsize,它表示堆分配的初始大小。 APP启动的初始分配内存 dalvik.vm.heapgrowthlimit,它表示单个进程内存限定值。App最大内存限制 dalvik.vm.heapsize,单个进程可用的最大内存。开启largeHeap"t…

力扣646. 最长数对链

动态规划 思路: 思路与 力扣354. 俄罗斯套娃信封问题 类似将序列进行排序,然后假设 dp[i] 为第 i 个元素的最长数对链个数;则其状态转移方程: 第 i 个元素之前的某一个元素(假设是下标是 j),如…

VS2022联合Qt5开发学习11(QT5.12.3联合VTK在VS2022上开发医学图像项目5——qvtkWidget上显示STL三维图像并取点)

这篇博文是接着这个系列前面的博文,来讲如何实现医学图像三视图同步视图。我想到的一个思路是用Scrollbar来控制切面的改变,还有一个想法是在三维图像上取点,然后以这个点为切面中心更新三维视图。这篇博文主要介绍的就是第二个想法的三维图像…

软件功能测试如何确定测试需求?CMA、CNAS软件测试报告获取

软件功能测试是为了验证软件的功能是否按照设计要求正常工作的过程,可以确保软件的质量,提高用户体验,也是保证软件安全和可靠性的重要一环。我们需要从多个角度对软件的各个功能模块进行测试,确保每个功能都能正常运行&#xff0…

蓝桥杯备战——5.动态数码管扫描

1.分析原理图 经查阅说明书得知数码管为共阳极,共阳端口接到了U8,而段码接到了U7。 如果需要选中U8,我们只需要将P250;P261;P271; 如果需要选中U7,我们只需要将P251;P261;P271; 2.代码示例 void Delay1ms() //12.000MHz {unsigned char data i, j;i 12;j 169;…

Elasticsearch内核解析 - 数据模型篇

Elasticsearch内核解析 - 数据模型篇 - 知乎 Elasticsearch是一个实时的分布式搜索和分析引擎,它可以帮助我们用很快的速度去处理大规模数据,可以用于全文检索、结构化检索、推荐、分析以及统计聚合等多种场景。 Elasticsearch是一个建立在全文搜索引擎…

【运维】Ubuntu18.04系统docker方式安装ElasticSearch和kibana

前言 最近需要搭建一套测试环境,用到了ElasticSearch( 简称es)搜索引擎,安装过程有些曲折,记录下来作为经验。 正文 环境 Ubuntu18.04 操作系统Docker Server Version: 20.10.7ElasticSearch Version: 8.5.3Kibana Version: 8.5.3 说明 E…

【C++】STL和vector容器

STL和vector容器 基本概念六大组件容器算法迭代器容器算法迭代器 vector容器基本概念vector构造函数赋值vector的容量和大小vector插入与删除vector存取数据函数原型 vector互换容器vector预留空间vector容器嵌套容器 基本概念 长久以来,软件届一直希望建立一种可重…

腾讯云轻量应用Windows服务器如何搭建幻兽帕鲁Palworld私服?

幻兽帕鲁/Palworld是一款2024年Pocketpair开发的开放世界生存制作游戏,在帕鲁的世界,玩家可以选择与神奇的生物“帕鲁”一同享受悠闲的生活,也可以投身于与偷猎者进行生死搏斗的冒险。而帕鲁可以进行战斗、繁殖、协助玩家做农活,也…

跨平台同步 Shell 历史记录,无缝切换会话 | 开源日报 No.154

atuinsh/atuin Stars: 14.3k License: MIT Atuin 是一个用 SQLite 数据库替换现有 shell 历史记录的工具,可以记录命令的额外上下文,并提供可选且完全加密的历史同步功能。其主要功能和核心优势包括: 重新绑定 ctrl-r 和 up (可配置) 到全屏…

weak_ptr 与 一个难发现的错误(循环依赖问题)笔记

推荐B站视频:7.weak_ptr与一个非常难发现的错误_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV18B4y187uL/?p7&spm_id_frompageDriver&vd_sourcea934d7fc6f47698a29dac90a922ba5a3一、weak_ptr weak_ptr并不拥有所有权并不能调用 -> 和 解引…

动态规划之买卖股票问题(篇一)(买卖股票的最佳时机)

本篇博客和接下来的几篇博客主要讲解一下动态规划中的股票问题系列,本篇博客主要讲解121. 买卖股票的最佳时机和122.买卖股票的最佳时机II。 121. 买卖股票的最佳时机 题目: 给定一个数组 prices ,它的第 i 个元素 prices[i] 表示一支给定…

Spring-Kafka 3.0 消费者消费失败处理方案

一、背景 我们作为Kafka在使用Kafka是,必然考虑消息消费失败的重试次数,重试后仍然失败如何处理,要么阻塞,要么丢弃,或者保存 二、设置消费失败重试次数 1 默认重试次数在哪里看 Kafka3.0 版本默认失败重试次数为1…

【AI Agent系列】【MetaGPT】9. 一句话订阅专属信息 - 订阅智能体进阶,实现一个更通用的订阅智能体(2)

文章目录 0. 前置推荐阅读和本文内容0.1 前置推荐阅读0.2 本文内容 1. 修改一:直接用大模型获取网页信息,不用爬虫程序1.1 我们要给大模型什么内容1.2 提取网页文本信息1.3 组织Action1.4 完整代码及细节注释1.5 可能存在的问题及思考 2. 修改二&#xf…

python:socket基础操作(3)-《udp接收消息》

收跟发基本核心思想差不多,只不过收信息需要去绑定一下端口,如果我们发信息没有绑定端口,那系统会随机分配一个,如果是收信息,那我们必须要求自己绑定端口才行 基础的接收数据 import socketudp_socket socket.socke…

活字格V9获取图片失败bug,报错404,了解存储路径,已改为批量上传和批量获取

项目场景: 问题描述 原因分析: 解决方案: 完成了批量上传功能,这插件真的很方便 于是写了个批量获取附件的js代码,我真厉害 项目场景: 活字格V9版本获取图片链接Upload 【9.0.103.0】图片上传的存储路…

nodeJs+express+Vue+MongoDB

数据库【Sqlite3、MongoDB、Mysql】简介&小记 Sqlite3: SQLite3是一个轻量级的数据库系统,它被设计成嵌入式数据库。这意味着它是一个包含在应用程序中的数据库,而不是独立运行的系统服务。适用场景:如小型工具、游戏、本地…