Vue中使用Lodash

Vue中使用Lodash

  • 前言
  • 安装Lodash
  • 引用方法
  • vue中使用
    • 1、cloneDeep 深拷贝
    • 2、uniq 数组去重
    • 3、uniqWith 数组对象去重 isEqual 深度比对
    • 4、intersection 提取数组相同元素
    • 5、chunk 数组切分
    • 6、compact去除假值
    • 7、reject:根据条件删除指定的值
    • 8、find:查找结果的第一个值
    • 9、filter:过滤数组——根据条件过滤出符合条件的元素,返回新数组
    • 10、map:从集合中挑出一个key,将其值作为数组返回
    • 11、最值

前言

在平时涉及到深拷贝中出现了嵌套对象,会发现JSON.parse(JSON.stringify(obj1))已经不能满足咱们需求了那就可以采用利用lodash中的_.cloneDeep进行深拷贝,
除此之外可以深拷贝 & 数组-深拷贝、去重、提取相同元素、切分、去除假值、查找、过滤、key的值数组、最值等方法
在这里插入图片描述

安装Lodash

npm i --save lodashnpm install --save @types/lodash

引用方法

// 深拷贝 & 数组-深拷贝、去重、提取相同元素、切分、去除假值、查找、过滤、key的值数组、最值
import { cloneDeep, uniq, uniqWith, isEqual, chunk, compact, reject, find, filter, map, max, min, sum, intersection } from 'lodash'

vue中使用

1、cloneDeep 深拷贝

    // Vue中使用Lodashconst oldList = [{ a: 1 }, { b: 2 }]const newList = cloneDeep(oldList)console.log('深拷贝后的数组', newList)console.log(oldList[0] === newList[0])

在这里插入图片描述

2、uniq 数组去重

    const arr = [1, 1, 2, 3, 3, 4]const ary = 

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

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

相关文章

基于sortablejs实现拖拽element-ui el-table表格行进行排序

可以用原生的dragstart、drag、dragend、dragover、drop、dragleave实现这个效果&#xff0c;但是有现成的轮子就不要重复造了&#xff0c;看效果&#xff1a; <template><el-table :class"$options.name" :data"tableData" ref"table"…

Android Kotlin知识汇总(一)编程语言

在 2019 年 Google I/O 大会上宣布今后将优先采用 Kotlin 进行 Android 开发。Kotlin 是一种富有表现力且简洁的编程语言&#xff0c;不仅可以减少常见代码错误&#xff0c;还可以轻松集成到现有应用中。如果您想构建 Android 应用&#xff0c;建议您从 Kotlin 开始着手&#x…

java.lang.NoSuchMethodException异常解决

标题 java.lang.NoSuchMethodException异常的正确解决方法摘要&#x1f680; 异常介绍&#x1f9d0; 异常原因分析&#x1f6e0; 解决方法核对方法名称和参数使用正确的方法签名调整方法访问权限 &#x1f4dd; 解决步骤详解&#x1f5a5; 代码案例演示❓ QA部分Q: 如何区分jav…

使用canvas实现图纸标记及回显

图纸 图纸标记后的效果图 最近做的一个qms项目里面&#xff0c;需要前端在图纸上实现标记及标记后的内容还要能够回显&#xff0c;然后后端通过标记的点&#xff0c;去读取标记图纸的内容&#xff0c;如一些公式、数据之类的&#xff0c;目前实现的功能有 在图纸上面进行矩形…

【论文阅读】DiffSpeaker: Speech-Driven 3D Facial Animation with Diffusion Transformer

DiffSpeaker: 使用扩散Transformer进行语音驱动的3D面部动画 code&#xff1a;GitHub - theEricMa/DiffSpeaker: This is the official repository for DiffSpeaker: Speech-Driven 3D Facial Animation with Diffusion Transformer paper&#xff1a;https://arxiv.org/pdf/…

MyBatis基础使用

MyBatis 是一款优秀的持久层框架&#xff0c;它支持自定义 SQL、存储过程以及高级映射。MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。MyBatis 可以通过简单的 XML 或注解来配置和映射原始类型、接口和 Java POJO&#xff08;Plain Old Java Objects&am…

2024 年(第 12 届)“泰迪杯”数据挖掘挑战赛——A 题:生产线的故障自动识别与人员配置具体思路以及源代码分析

一、问题背景 随着新兴信息技术的大规模应用&#xff0c;工业生产线的智能化控制技术日益成熟。自动生产线 可以自动完成物品传送、物料填装、产品包装和质量检测等过程&#xff0c;极大地提高了生产效率和 产品质量&#xff0c;减少了生产成本。自动生产线融入故障智能报警…

HTML CSS入门:从基础到实践

&#x1f310; HTML & CSS入门&#xff1a;从基础到实践 &#x1f3a8; &#x1f4d6; 引言 HTML和CSS是构建网页的基石。HTML&#xff08;超文本标记语言&#xff09;用于创建网页内容&#xff0c;而CSS&#xff08;层叠样式表&#xff09;则用于美化这些内容。无论你是…

Blocks —— 《Objective-C高级编程 iOS与OS X多线程和内存管理》

目录 Blocks概要什么是BlocksOC转C方法关于几种变量的特点 Blocks模式Block语法Block类型 变量截获局部变量值__block说明符截获的局部变量 Blocks的实现Block的实质 Blocks概要 什么是Blocks Blocks是C语言的扩充功能&#xff0c;即带有局部变量的匿名函数。 顾名思义&#x…

Day18 Java学生管理系统

Day18 Java学生管理系统 一、需求分析 考虑的方面&#xff1a; 用户需求、功能需求、非功能性需求、约束条件、优先级和权衡、可追踪性、需求验证。 二、项目搭建 搭建学生管理系统 1、创建项目的main ;pojo ; sms ; utils包。 2、编写系统的 增&#xff08;涉及到扩容–…

17.WEB渗透测试--Kali Linux(五)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;16.WEB渗透测试--Kali Linux&#xff08;四&#xff09;-CSDN博客 1.ettercap简介与使用…

【技术类-04】python实现docx表格文字和段落文字的“手动换行符(软回车)”变成“段落标记(硬回车)”

作品展示&#xff1a; 背景需求&#xff1a; 把python实现docx表格文字和段落文字的“手动换行符&#xff08;软回车&#xff09;”变成“段落标记&#xff08;硬回车&#xff09;合并在一起统计数量 【技术类-02】python实现docx段落文字的“手动换行符&#xff08;软回车&a…

一起玩儿3D打印机——03 Marlin固件的获取和安装环境的配置

摘要&#xff1a;本文介绍Marlin固件的获取和安装环境的配置 Marlin是一款开源软件&#xff0c;其主页为&#xff1a;https://marlinfw.org/&#xff0c;首页正中就是下载连接&#xff0c;如下图所示&#xff1a; 单击下面的“Download Marlin 2.1.2.2”按钮就会进入下载页面&a…

彻底学会系列:一、机器学习之梯度下降(1)

1 梯度下降概念 1.1 概念 梯度下降是一种优化算法&#xff0c;用于最小化一个函数的值&#xff0c;特别是用于训练机器学习模型中的参数&#xff0c;其基本思想是通过不断迭代调整参数的值&#xff0c;使得函数值沿着梯度的反方向逐渐减小&#xff0c;直至达到局部或全局最小…

AntV L7深圳智慧城市

本案例使用L7库和Mapbox GL JS构建深圳智慧城市。 文章目录 1. 引入 CDN 链接2. 引入组件3. 创建地图4. 创建场景5. 获取数据6. 创建面图层7. 演示效果8. 代码实现 1. 引入 CDN 链接 <!-- 1.引入CDN链接 --> <script src"https://unpkg.com/antv/l7"><…

Centos yum报错‘Connection timed out after 30002 milliseconds‘) 正在尝试其它镜像。解决办法

修改源后更新报错 我有两个Centos 一个7 一个8&#xff0c;疏忽在7上面配置了8的源后报错&#xff0c;通过下面的报错发现提示的是Centos7的源找不到&#xff0c;才意识到是不是配置错了源。 报错信息&#xff1a; http://mirrors.aliyun.com/centos/7/AppStream/x86_64/os/r…

Java 面向对象(类与对象 成员方法 方法重载 可变参数 构造方法 / 构造器 this关键字 包 访问修饰符)

目录 一、类与对象1. 类与对象的定义2. 类和对象的内存分配机制 二、成员方法1. 成员方法的定义2. 方法的调用机制3. 成员方法传参机制 三、方法重载四、可变参数1. 基本概念2. 基本语法3. 应用 五、 构造方法 / 构造器1. 特点2. 使用案例3. 对象创建的流程 六、this关键字1. 运…

【Linux】信号保存{sigset_t/sigpending/sigprocmask/bash脚本/代码演示}

文章目录 1.信号相关常见概念2.管理信号的数据结构3.初识sigset_t4.信号集操作函数4.1sigpending4.2sigprocmask4.2代码测试1.测试12.测试23.测试3 4.3bash 脚本文件 1.信号相关常见概念 信号相关动作&#xff1a;产生 发送 接收 阻塞 递达(处理) 实际执行信号的处理动作称为信…

0基础 三个月掌握C语言(11)

字符函数和字符串函数 为了方便操作字符和字符串 C语言标准库中提供了一系列库函数 接下来我们学习一下这些函数 字符分类函数 C语言提供了一系列用于字符分类的函数&#xff0c;这些函数定义在ctype.h头文件中。这些函数通常用于检查字符是否属于特定的类别&#xff0c;例如…

html--宠物

文章目录 htmljscss html <!DOCTYPE html> <html lang"en" > <head><meta charset"UTF-8"><title>CodePen - Spaceworm</title><script> window.requestAnimFrame (function() {return (window.requestAnimat…