当前位置: 首页 > news >正文

React里使用lodash工具库

安装

使用命令 npm install lodash

页面引入

常见的引入方式
  1. 引入整个lodash对象: import _ from 'lodash'
  2. 按名称引入特定的函数: import { orderBy } from "lodash";
    tips: 这两种引入方式都会引入整个lodash库, 体积大;不推荐
建议引入方式
  1. 只引入需要的函数: import orderBy from 'lodash/orderBy'
  2. 使用 lodash-es: import { orderBy } from 'lodash-es'
    tips: 这两种方式只会引入对应的模块。

常用方法

concat

concat: 创建一个新数组,将原数组和任何数组或值连接在一起
用法:

const array = [1,3];
const newArray = _.concat(array,'4',7,[[8]]);
console.log(newArray)   // [1,3,'4',7,[8]];
findIndex

findIndex :返回第一个判断为真值的元素的索引值。
用法:

  const arr = [{name:'judy',age: 12},{name:'linda',age: 23},{name:'candy',age: 43},{name:'linda',age: 18},]const newArr = _.findIndex(arr,function(o) {return o.name == 'linda';})console.log(newArr);  // 1const newArr1 = _.findIndex(arr,{name: 'linda'});console.log(newArr1)  //1const newArr2 = _.findIndex(arr,['name','linda']);console.log(newArr2,);  //1
orderBy

orderBy: 对数组进行排序,默认为升序;也可以指定为 "desc" 降序,或者指定为 "asc" 升序。
用法:

const arr = [{name:'judy',age: 12},{name:'linda',age: 23},{name:'candy',age: 43},{name:'cindy',age: 18},
]// 根据名字排序,使用orderBy, 升序let arr1 = _.orderBy(arr,['name'],'asc');console.log(arr1)// 根据名字排序,使用orderBy, 降序let arr2 = _.orderBy(arr,['name'],'desc');console.log(arr2)
sample

sample: 获得一个随机元素。
用法:

  const arr = [ 1,2,3,4,5,6];const newArr = _.sample(arr);console.log(newArr)   // 随机返回了一个元素
size

size: 如果是数组或者字符串就返回 length ; 如果是对象,返回其可枚举的属性个数
用法:

  const str = 'string';console.log(_.size(str));  //6const arr = [1,2,3,4];console.log(_.size(arr));  // 4const obj = {name: 'linda',age: '24'};console.log(_.size(obj)) //  2
sortBy

sortBy 允许你指定一个属性来排序,默认为升序。如果需要降序排,需要借助reverse() ;或者使用上方 orderBy
用法:

  const arr = [{name:'judy',age: 12},{name:'linda',age: 23},{name:'candy',age: 43},{name:'cindy',age: 18},]// 根据名字排序,使用sortBy 升序let arr3 = _.sortBy(arr,['name']);console.log(arr3)// 根据名字排序,使用sortBy先进性升序排序,然后使用reverse()函数进行反转let arr4 = _.sortBy(arr,['name']).reverse();console.log(arr4)
debounce

debounce(func,wait ,options): 创建一个 debounced (防抖动)函数,该函数会从上一次被调用后,延迟 wait 毫秒后调用 func 方法;可以提供一个 options(选项) 对象决定如何调用func方法。
用法:

// 处理屏幕变化的函数const handle = () => {};// 使用debounce,避免窗口在变动时消耗过大。window.addEventListener('resize',_.debounce(handle,3000))
throttle

throttle(func,wait,options): 创建一个throttle节流函数,在 wait 秒内最多执行 func 一次的函数。
用法:

// 处理滚动事件const handleScroll = () => {};// 使用throttle,避免窗口在变动时消耗过大。window.addEventListener('scroll',_.throttle(handleScroll ,3000))
delay

delay: 延迟多少时间后执行函数
使用:

  _.delay(function() {console.log('延迟执行了~~~')},500)
clone

clone : 创建一个 浅拷贝
使用:

  const arr = [{name: 'linda',age: 13}];var newArr = _.clone(arr);console.log(arr[0] === newArr[0]); // true
cloneDeep

cloneDeep : 创建一个 深拷贝
使用:

  const arr = [{name: 'linda',age: 13}];var newArr = _.cloneDeep(arr);console.log(arr[0] === newArr[0]); // false

总结

更多lodash的方法及使用,可以参考中文官网文档: https://www.lodashjs.com/

相关文章:

React里使用lodash工具库

安装 使用命令 npm install lodash 页面引入 常见的引入方式 引入整个lodash对象: import _ from lodash按名称引入特定的函数: import { orderBy } from "lodash"; tips: 这两种引入方式都会引入整个lodash库, 体积大&#x…...

【免费分享】mysql笔记,涵盖查询、缓存、存储过程、索引,优化。

概括 本篇笔记涵盖基础查询、视图、存储过程、函数、索引、优化、分库分表。适合在学完mysql后进行时常观看。下面展示部分内容。如果需要可以在文章底部的链接进行下载查看。 简介 数据库 数据库:DataBase,简称 DB,存储和管理数据的仓库…...

C语言-数据结构-图

目录 一,图的概念 1,图的定义 2,图的基本术语 二,图的存储结构 1,邻接矩阵 2,邻接表 三,图的遍历 1,深度优先搜索 2,广度优先搜素 四,生成树和最小生成树 1,生成树的特点: 2,最小生成树 (1)普利姆算法Prim (2)普里姆算法思路 五,最短路径 1,Dijkstra算法 2,Fl…...

android sqlite 数据库简单封装示例(java)

sqlite 数据库简单封装示例,使用记事本数据库表进行示例。 首先继承SQLiteOpenHelper 使用sql语句进行创建一张表。 public class noteDBHelper extends SQLiteOpenHelper {public noteDBHelper(Context context, String name, SQLiteDatabase.CursorFactory fact…...

“宠物服务的跨平台整合”:多设备宠物服务平台的实现

2.1 SSM框架介绍 本课题程序开发使用到的框架技术,英文名称缩写是SSM,在JavaWeb开发中使用的流行框架有SSH、SSM、SpringMVC等,作为一个课题程序采用SSH框架也可以,SSM框架也可以,SpringMVC也可以。SSH框架是属于重量级…...

关于最新MySQL9.0.1版本zip自配(通用)版下载、安装、环境配置

一、下载 从MySQL官网进行下载MySQL最新版本,滑到页面最下面点击社区免费版,(不是企业版) 点击完成后选择自己想要下载的版本,选择下载zip压缩,不用debug和其他的东西。 下载完成后进入解压,注…...

【Halcon】例程讲解:基于形状匹配与OCR的多图像处理(附图像、程序下载链接)

1. 开发需求 在参考图像中定义感兴趣区域(ROI),用于形状匹配和文本识别。通过形状匹配找到图像中的目标对象位置。对齐多幅输入图像,使其与参考图像保持一致。在对齐后的图像上进行OCR识别,提取文本和数字信息。以循环…...

B站推荐模型数据流的一致性架构

01 背景 推荐系统的模型,通过学习用户历史行为来达到个性化精准推荐的目的,因此模型训练依赖的样本数据,需要包括用户特征、服务端推荐的视频特征,以及用户在推荐视频上是否有一系列的消费行为。 推荐模型数据流,即为…...

不安全物联网的轻量级加密:综述

Abstract 本文综述了针对物联网(IoT)的轻量级加密解决方案。这项综述全面覆盖了从轻量级加密方案到不同类型分组密码的比较等多个方面。同时,还对硬件与软件解决方案之间的比较进行了讨论,并分析了当前最受信赖且研究最深入的分组…...

mysql_init的概念和使用案例

mysql_init 是 MySQL C API 中的一个函数,用于初始化一个 MYSQL 结构,这个结构在后续的 MySQL 数据库操作中会被频繁使用。mysql_init 的调用是建立与 MySQL 数据库连接的第一步。 函数原型: MYSQL *mysql_init(MYSQL *mysql);参数说明&…...

3GPP R18 MT-SDT

Rel-17 指定MO-SDT允许针对UL方向的数据包进行小数据包传输。对于DL,MT-SDT(即DL触发的小数据)可带来类似的好处,即 通过不转换到 RRC_CONNECTED来减少信令开销和UE功耗,并通过允许快速传输(小而少见的)数据包(例如用于定位)来减少延迟。 在R17中,NR_SmallData_INACTIVE的工…...

时频转换 | Matlab暂态提取变换transient-extracting transform一维数据转二维图像方法

目录 基本介绍程序设计参考资料获取方式 基本介绍 时频转换 | Matlab暂态提取变换transient-extracting transform一维数据转二维图像方法 程序设计 clear clc % close all load x.mat % 导入数据 x x(1:5120); % 本数据只选择5120个点进行分析 fs 6400 ; % 数据采样频…...

.NET Framework 逐渐过时,.NET 8和 .NET 9引领未来

随着科技的不断进步,软件开发的工具和技术也在不断更新换代。.NET Framework,曾是微软的旗舰开发平台,曾经在软件开发领域占据了主导地位。然而,随着技术的演变和开发需求的变化,.NET Framework逐渐显得力不从心&#…...

从虚拟到现实:AI与AR/VR技术如何改变体验经济?

引言:体验经济的崛起 在当今消费环境中,产品与服务早已不再是市场竞争的唯一焦点,能够提供深刻感知和独特体验的品牌,往往更能赢得消费者的青睐。这种转变标志着体验经济的崛起。体验经济不仅仅是简单的买卖行为,而是通…...

在K8S中,Ingress该如何使用?

在Kubernetes中,Ingress是一种API对象,它提供了对外部请求进入集群内部服务的一种统一入口和路由机制。Ingress控制器是一个运行在集群中的守护进程,它监听Ingress对象的变化并配置相应的负载均衡器或代理服务,以便根据定义的规则…...

Ubuntu24.04安装NVIDIA驱动及工具包

Ubuntu24.04安装NVIDIA驱动及工具包 安装nvidia显卡驱动安装cuda驱动安装cuDNN安装Anaconda 安装nvidia显卡驱动 NVIDIA 驱动程序(NVIDIA Driver)是专为 NVIDIA 图形处理单元(GPU)设计的软件,它充当操作系统与硬件之间…...

【每日学点鸿蒙知识】组件封装通用方法、callback和await性能对比、Web组件下拉刷新、hsp包报错、WebView圆角

1、HarmonyOS 自定义的组件如何封装一些通用的属性和方法,例如 Java 中的继承? export class Animal{name:stringage:stringconstructor(name:string,age:string) {this.name namethis.age age} }export class Person extends Animal{reading:stri…...

Excel批量设置行高,Excel表格设置自动换行后打印显示不全,Excel表格设置最合适的行高后打印显示不全,完美解决方案!!!

文章目录 说个问题(很严重!!!)写个方案会Python看这里Python环境搭建不存在多行合并存在多行合并 不会Python看这里 说个问题(很严重!!!) 平时处理Excel表格…...

Web Bluetooth API 开发记录

搞了一天的蓝牙串口协议被几个软件和AI带沟里面去了。 1.00001101-0000-1000-8000-00805f9b34fb 是spp协议。但是我用的称是使用的49535343-fe7d-4ae5-8fa9-9fafd205e455蓝牙低功耗spp协议 2.推荐一款软件Android-nRF-Connect github地址:https://github.com/Nor…...

python基础知识(二)

元组 元组与列表类似,不同之处在于,元组的元素不能修改,元组使用()。 集合 集合是一个无序且不重复的元素列表。 基本功能是 进行成员关系测试和删除重复元素。 创建集合使用大括号或者set()函数。 例子: 注意:创建一…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段: 构建阶段(Build Stage)&#xff1a…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中,iftop是网络管理的得力助手,能实时监控网络流量、连接情况等,帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间, 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点,不需要开启数据库闪回。…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学(Elliptic Curve Cryptography)是基于椭圆曲线数学理论的公钥密码系统,由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA,ECC在相同安全强度下密钥更短(256位ECC ≈ 3072位RSA…...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时,你可能需要保留重要的数据,例如通讯录。好在,将通讯录从 iPhone 转移到 Android 手机非常简单,你可以从本文中学习 6 种可靠的方法,确保随时保持连接,不错过任何信息。 第 1…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S (client/server 客户端/服务器):由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序,负责提供用户界面和交互逻辑 ,接收用户输入,向服务器发送请求,并展示服务…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具,支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议,涵盖接口测试、性能测试、数字体验监测等测试类型…...

免费数学几何作图web平台

光锐软件免费数学工具,maths,数学制图,数学作图,几何作图,几何,AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...