随笔(四)——代码优化

文章目录

  • 前言
    • 1.原本代码
    • 2.新增逻辑
    • 3.优化逻辑


前言

原逻辑:后端data数据中返回数组,数组中有两个对象,一个是属性指标,一个是应用指标,根据这两个指标展示不同的多选框


1.原本代码

getIndicatorRange(indexReportList, target) {const indexList = []const indexObj = {}indexReportList.forEach(item => {item.showReportFieldList.forEach(fieldItem => {indexObj[fieldItem.showFieldTag] = {checked: target.includes(fieldItem.showFieldTag),disabled: item.name === '属性指标'}if (target.includes(fieldItem.showFieldTag)) {indexList.push({...fieldItem,// isAttri: item.name === '属性指标', // 判断是否是属性指标disabled: item.name === '属性指标'})}})})return {indexList,indexObj}},indexReportList.forEach(item => {const tarList = [...target] // 浅拷贝数组tarList.forEach(tarItem => {item.showReportFieldList.forEach(fieldItem => {indexObj[fieldItem.showFieldTag] = {checked: tarItem === fieldItem.showFieldTag,disabled: item.name === '属性指标'}if (tarItem === fieldItem.showFieldTag) {indexList.push({...fieldItem,// isAttri: item.name === '属性指标', // 判断是否是属性指标disabled: item.name === '属性指标'})}})})})

2.新增逻辑

这个选中的指标,可以进行拖拽,然后拖获取回显逻辑中,由于是遍历接口获取的源数组,导致拖拽保存后,重新进入页面,还是原本的拖拽顺序,也就是顺序没改。

3.优化逻辑

正常是在最外层使用遍历拖拽后的新数组,获取一个新的源数组进行渲染,但是这样加上本身的for循环,就有三层for循环了。优化后的代码如下:拷贝展示数据,遍历这个数据,将里面的是否存在,直接和item 的数据进行判断即可

在这里插入图片描述

优化后的代码

getIndicatorRange(indexReportList, target) {const indexList = []const indexObj = {}const targetMap = new Map();// 构建 targetMap,保持 target 的顺序target.forEach((tarItem, index) => {targetMap.set(tarItem, index);});indexReportList.forEach(item => {item.showReportFieldList.forEach(fieldItem => {const showFieldTag = fieldItem.showFieldTag;const isAttri = item.name === '属性指标';// 更新 indexObjif (!indexObj[showFieldTag]) {indexObj[showFieldTag] = {checked: false,disabled: isAttri};}// 如果 showFieldTag 在 target 中,更新 indexObj 并插入 indexListif (targetMap.has(showFieldTag)) {indexObj[showFieldTag].checked = true;// 插入 indexList,保持 target 的顺序indexList[targetMap.get(showFieldTag)] = {...fieldItem,disabled: isAttri};}})})return {indexList,indexObj}
},

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

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

相关文章

企业级版本管理工具(1)----Git

目录 1.Git是什么 2.Git的安装和使用 在Ubuntu下安装命令如下: 使用git --version查看已安装git的版本: 使用git init初始化仓库: 使用tree .git列出目录: 使用git config命令设置姓名和邮箱: 加入--global选项…

【前端】前端数据转化为后端数据

【前端】前端数据转化为后端数据 写在最前面格式化数组代码解释hasOwnProperty是什么? 🌈你好呀!我是 是Yu欸 🌌 2024每日百字篆刻时光,感谢你的陪伴与支持 ~ 🚀 欢迎一起踏上探险之旅,挖掘无限…

【操作系统】引导(Boot)电脑的奇妙开机过程

🌹😊🌹博客主页:【Hello_shuoCSDN博客】 ✨操作系统详见 【操作系统专项】 ✨C语言知识详见:【C语言专项】 目录 什么是操作系统的引导? 操作系统的引导(开机过程) Windows操作系…

渗透测试入门学习——使用python脚本自动识别图片验证码,OCR技术初体验

写在前面 由于验证码在服务端生成后存储在服务器的session中,而标用于标识用户身份的sessionid存在于用户cookie中 所以本次识别验证码时需要用requests.session()创建会话对象,模拟真实的浏览器行为,保持与服务器的会话才能获取登录时服务…

常用排序算法(下)

目录 2.5 冒泡排序 2.6 快速排序 2.6 1 快速排序思路 详细步骤 2.6 2 快速排序递归实现 2.6 3快速排序非递归: 快排非递归的优势 非递归思路 1. 初始化栈 2. 将整个数组的起始和结束索引入栈 3. 循环处理栈中的子数组边界 4. 单趟排序 5. 处理分区后的子…

【论文速看】DL最新进展20241005-Transformer、目标跟踪、Diffusion Transformer

目录 【Transformer】【目标跟踪】【Diffusion Transformer】 【Transformer】 [NeurlPS 2024] Parameter-Inverted Image Pyramid Networks 机构:清华大学、上海AI Lab、上交、港中文、商汤 论文链接:https://arxiv.org/pdf/2406.04330 代码链接&…

C++ | Leetcode C++题解之第454题四数相加II

题目&#xff1a; 题解&#xff1a; class Solution { public:int fourSumCount(vector<int>& A, vector<int>& B, vector<int>& C, vector<int>& D) {unordered_map<int, int> countAB;for (int u: A) {for (int v: B) {count…

网络基础 【HTTPS】

&#x1f493;博主CSDN主页:麻辣韭菜&#x1f493;   ⏩专栏分类&#xff1a;Linux初窥门径⏪   &#x1f69a;代码仓库:Linux代码练习&#x1f69a; &#x1f4bb;操作环境&#xff1a; CentOS 7.6 华为云远程服务器 &#x1f339;关注我&#x1faf5;带你学习更多Linux知识…

LabVIEW提高开发效率技巧----调度器设计模式

在LabVIEW开发中&#xff0c;针对多任务并行的需求&#xff0c;使用调度器设计模式&#xff08;Scheduler Pattern&#xff09;可以有效地管理多个任务&#xff0c;确保它们根据优先级或时间间隔合理执行。这种模式在需要多任务并发执行时特别有用&#xff0c;尤其是在实时系统…

软件验证与确认实验一:静态分析

目录 1. 实验目的及要求.................................................................................................... 3 2. 实验软硬件环境.................................................................................................... 3 …

JAVA运用中springBoot获取前端ajax提交参数方式汇总

本篇文章主要讲解springboot获取前端提交的参数信息&#xff0c;后端进行接受的常见方法汇总&#xff0c;通过本篇文章你可以快速掌握对表单和连接参数获取的能力。 作者&#xff1a;任聪聪 日期&#xff1a;2024年10月5日 一、delete、get等url参数获取方式 前台提交&#xf…

数字图像处理:空间域滤波

1.数字图像处理&#xff1a;空间域滤波 1.1 滤波器核&#xff08;相关核&#xff09;与卷积 图像上的邻域计算 线性空间滤波的原理 滤波器核&#xff08;相关核&#xff09;是如何得到的&#xff1f; 空间域的卷积 卷积&#xff1a;滤波器核与window中的对应值相乘后所有…

【Echarts】折线图和柱状图如何从后端动态获取数据?

&#x1f680;个人主页&#xff1a;一颗小谷粒 &#x1f680;所属专栏&#xff1a;Web前端开发 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 1.1 前端数据分析 1.2 数据库表分析 1.3 后端数据处理 1.4 前端接收数据 继上一篇文章&…

MySQL 查询优化器

文章目录 控制查询计划optimizer_prune_leveloptimizer_search_depth 优化器参数优化器提示索引提示成本模型server_costcost_name engine_cost 控制查询计划 https://dev.mysql.com/doc/refman/8.4/en/controlling-query-plan-evaluation.html 在执行SQL前会根据优化器选择执…

C++_智能指针详解

什么是智能指针&#xff1f;为什么要有智能指针&#xff1f;到目前为止&#xff0c;我们编写的程序所使用的对象都有着严格定义的生命周期。比如说&#xff0c;全局对象在程序启动时分配&#xff0c;在程序结束时销毁&#xff1b;再比如说局部static对象在第一次使用前分配&…

electron-builder 首次执行报错问题解决

假日想研究一下 react electron 的使用&#xff0c;结果发现首次打包疯狂报错&#xff0c;研究了一下之后才发现是第一次的话 electron-builder 会从外面下载依赖包到我们系统中&#xff0c;由于某种力量导致压缩包无法下载或者是下载过慢导致失败&#xff0c;要解决其实也简单…

初学51单片机之I2C总线与E2PROM二

总结下上篇博文的结论&#xff1a; 1&#xff1a;ACK信号在SCL为高电平期间会一直保持。 2&#xff1a;在字节数据传输过程中如果发送电平跳变&#xff0c;那么电平信号就会变成重复起始或者结束的信号。&#xff08;上篇博文的测试方法还是不能够明确证明这个结论&#xff0…

【C++】入门基础介绍(上)C++的发展历史与命名空间

文章目录 1. 前言2. C发展历史2. 1 C版本更新特性一览2. 2 关于C23的一个小故事: 3. C的重要性3. 1 编程语言排行榜3. 2 C在工作领域中的应用 4. C学习建议和书籍推荐4. 1 C学习难度4. 2 学习书籍推荐 5. C的第一个程序6. 命名空间6. 1 namespace的价值6. 2 namespace的定义6. …

首届中美可持续发展峰会在加州圆满举行,引领国际绿色发展新方向

现场嘉宾与(部分)与会人员大合影 2024年8月18日,由美国领创商业联盟(Youth Entrepreneur Business Alliance, YEBA)主办的首届中美可持续发展峰会(Sino-American Symposium on Sustainable Development)在加州森林湖市(Lake Forest)盛大举行。此次峰会吸引了数百名来自中美两国…

HTML+CSS之表格(15个案例+代码+效果图+素材)

目录 1.table标签的border属性 案例:制作一个带边框的表格 1.代码 2.效果 2.table标签的cellspacing属性 案例:制作一个带边距的表格 1.代码 2.效果 3.table标签的cellpadding属性 1.代码 2.效果 4.table标签的width和height属性 案例:指定宽高的表格 1.代码 2.效果 5.table标签…