随笔(一)——项目代码优化

文章目录

  • 前言
  • 一、if判断点对象赋值
    • 1.需求
    • 2.原本方法
    • 3.优化方法
  • 二、数组的inclueles方法的使用
    • 1.需求
    • 2.原本方法
    • 3.优化方法
  • 三、数组对象的按顺序渲染Object.entries
    • 0. Object.entries的基本使用
    • 1.需求
    • 2.原本方法
    • 3.优化方法
    • 4. 问题


前言

提示:


一、if判断点对象赋值

1.需求

后端返回json格式的字符串,是无序的,然后页面渲染指定的字段在指定的位置。

2.原本方法

const questionForm = reactive({answer: ''
})
if(val === 'zhibiao') {questionForm.value1 = '指标答案'
} else if(val === 'weidu') {questionForm.value2 = '维度答案'
} else if(val === 'biaozhun') {questionForm.value3 = '标准答案'
} else if(val === 'coustom') {questionForm.value4 = '自定义答案'
}

3.优化方法

const questionMap: { [key: string]: string } = { value1: '指标答案', value2: '维度答案', value3: '标准答案', value4: '自定义答案',}if(questionMap[val]) {questionForm.answer = valMap[val];}

二、数组的inclueles方法的使用

1.需求

后端返回一个json,这个json中有七个键值对的对象。将原本展示为一行4个的改为tab渲染,由于是一个json数据,转为对象后,过滤value1,value2,value3,获取新数组

jsonArray 数据格式:
答案有多个,里面的对象就是一个json,手动处理成了数组,不然渲染的时候,每一次都需要判断是对应哪一个答案,比较麻烦

[{[value1, '答案1'],[value2, '答案2'],[value3, '答案3'],[value4, '答案4'],[value5, '答案5'],[value6, '答案6'],[value7, '答案7'],},{},
]

2.原本方法

json

 let tabsAnswer = jsonArray.filter((item: Array<any>) =>  item[0] === 'value1' || item[0] === 'value2' || item[0] === 'value3')let tabsQuestion = jsonArray.filter((item: Array<any>) =>  item[0] === 'value4' || item[0] === 'value5' || item[0] === 'value6' || item[0] === 'value7')

3.优化方法

let tabsAnswer = orderArray.filter((item: Array<any>) =>  ['value1', 'value2', 'value3'].includes(item[0]))
let tabsQuestion = orderArray.filter((item: Array<any>) =>  ['quickSql', 'quickIndicatorSql', 'quickDsl', 'quickIndicatorDsl'].includes(item[0]))

三、数组对象的按顺序渲染Object.entries

0. Object.entries的基本使用

Object.entries方法 MDN官方文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
Object.keys 获取对象所有的键,
Object.values获取对象所有的值
Object.entries 获取对象的所有的键值

let a = {'a': '111', b: '222'}
Object.entries(a) // [["a" "111"], ["b", "222"] ]

1.需求

后端返回一个数组,数组有个对象,对象中有个answer的属性值为json格式的字符串,这个json中有七个键值对的对象。将原本展示为一行4个的改为tab渲染,由于是一个json数据,转为对象后,需要判断key是什么,渲染对应的结果

2.原本方法

html页面上遍历 jsonArr数组,通过判断是否是value1/value2/value3来确定key,并获取value值

let jsonArr = [{'value1': '答案1','value2': '答案2','value3': '答案3','value4': '答案4','value5': '答案5','value6': '答案6','value7': '答案7',},{ },
]

3.优化方法

html页面上遍历 jsonArr数组,然后通过jsonItem使用Object.entries()方法获取数据如下,这样就可以按顺序渲染

jsonItem = [["value1","答案1"],["value2","答案2"],["value3","答案3"],["value4","答案4"],["value5","答案5"],["value6","答案6"],["value7","答案7"]
]

4. 问题

由于后端的数据返回是无序的,所以上述方法并未使用,优化了,没有完全优化

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

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

相关文章

《Intel开发手册卷3》读书笔记3

1、中断和异常的概述 中断和异常是强制性的执行流的转移&#xff0c;从当前正在执行的程序或任务转移到一个特殊的称作句柄的例程或任务。当硬件发出信号时&#xff0c;便产生中断&#xff0c;中断的产生同正在执行的程序是异步的&#xff0c;即中断的产生是随机的。其用于处理…

青藤HIDS一键安装

0x00 前言 最近文章更新频率低了&#xff0c;因为发现版权保护太差了&#xff0c;有些博主转载我文章发布原创&#xff0c;并给自己的课程或公众号引流&#xff0c;我们这些博主写文章不图赚钱&#xff0c;只为了点流量&#xff0c;到头来却发现流量也被剽窃&#xff0c;遇到几…

如何使用Vue和Markdown实现博客功能

创建Vue项目和安装依赖 npm install -g @vue/cli vue create vue-blog cd vue-blog npm install vue-markdown-loader --save-dev配置Vue项目以解析Markdown 在 vue.config.js 文件中添加以下配置: module.exports = {chainWebpack: config => {config

JVM(四)

在上一篇中&#xff0c;介绍了JVM组件中的运行时数据区域&#xff0c;这一篇主要介绍垃圾回收器 JVM架构图&#xff1a; 1、垃圾回收概述 在第一篇中介绍JVM特点时&#xff0c;有提到过内存管理&#xff0c;即Java语言相对于C&#xff0c;C进行的优化&#xff0c;可以在适当的…

【Postman接口测试】第四节.Postman接口测试项目实战(上)

文章目录 前言一、项目介绍 1.1 项目界面功能介绍 1.2 项目测试接口介绍 1.3 项目测试接口流程二、HTTP协议三、接口测试中接口规范四、项目合同新增业务介绍 4.1 登录接口调试 4.1 登录接口自动关联 4.1 添加课程接口调试 4.1 上传合同…

Leetcode算法题笔记(3)

目录 矩阵101. 生命游戏解法一解法二 栈102. 移掉 K 位数字解法一 103. 去除重复字母解法一 矩阵 101. 生命游戏 根据 百度百科 &#xff0c; 生命游戏 &#xff0c;简称为 生命 &#xff0c;是英国数学家约翰何顿康威在 1970 年发明的细胞自动机。 给定一个包含 m n 个格子…

.NET 直连SAP HANA数据库

前言 上个项目碰到的需求&#xff0c;IT部门要求直连SAP的HANA数据库&#xff0c;以只读的权限读取SAP部门开发的CDS视图&#xff0c;是个有点复杂的工程&#xff0c;需要从成品一直往前追溯到原材料的产地&#xff0c;和交货单、工单、采购订单有相当程度上的关联 IT部门要求…

基于java实现图片中任意封闭区域识别

需求&#xff1a; 在浏览器中给用户呈现一张图片&#xff0c;用户点击图片中的某些标志物&#xff0c;需要系统给出标志物的信息反馈&#xff0c;达到一个交互的作用。 比如下图中&#xff0c;点击某个封闭区域时候&#xff0c;需要告知用户点击的区域名称及图形形状特性等等。…

2024华为OD机试真题-素数之积-C++-OD统一考试(C卷D卷)

题目描述 RSA加密算法在网络安全世界中无处不在,它利用了极大整数因数分解的困难度, 数据越大,安全系数越高,给定一个32位正整数,请对其进行因数分解, 找出是哪两个素数的乘积。 输入描述 一个正整数num,0 < num <= 2147483647 输出描述 如果成功找到,以单个空格…

【因果推断python】2_因果关系初步2

目录 偏差 关键思想 偏差 偏差是使关联不同于因果关系的原因。幸运的是&#xff0c;我们的直觉很容易理解。让我们在课堂示例中回顾一下我们的平板电脑。当面对声称为孩子提供平板电脑的学校会获得更高考试成绩的说法时&#xff0c;我们可以反驳说&#xff0c;即使没有平板电…

永久代(Permanent Generation)和元空间(Metaspace)

永久代&#xff08;Permanent Generation&#xff09;和元空间&#xff08;Metaspace&#xff09;是Java虚拟机&#xff08;JVM&#xff09;内存管理中的两个概念&#xff0c;主要区别在于它们的实现方式和内存分配策略。 永久代&#xff08;Permanent Generation&#xff09;…

【ai】livekit:Agents 3 : pythonsdk和livekit-agent的可编辑模式下的安装

livekit-agent 依赖于livekit、livekit-api、livekit-protocol 其中livekit就是livekkit-rtc: 包含俩sdk 实时互动sdkReal-time SDK for connecting to LiveKit as a participant livekit-api : 服务端sdk https://pypi.org/project/livekit-api/ livekit的python sdk

如何应对Android面试官 -> 玩转 Fragment

前言 本章主要讲解下 Framgent 的核心原理&#xff1b; 基础用法 线上基础用法&#xff0c;其他的可以自行百度 FragmentManager manager getSupportFragmentManager(); FragmentTransaction transaction manager.beginTransaction(); transaction.add(R.id.contentlayout,…

2018 年山东省职业院校技能大赛高职组“信息安全管理与评估”赛项任务书

2018年山东省职业院校技能大赛高职组 “信息安全管理与评估”赛项任务书 赛项时间 8:30-13:00&#xff0c;共计4小时30分钟&#xff0c;含赛题发放、收卷时间。 赛项信息 竞赛阶段 任务阶段 竞赛任务 竞赛时间 分值 第一阶段 平台搭建与安全设备配置防护 …

希尔排序(详讲)

目录 个人评价 原理 希尔排序分为两步 例如 间隔大小 时间复杂度 代码 个人评价 一个很天才的想法&#xff0c;对插入排序进行一点更改&#xff0c;代码很简略但是非常的快 和堆排序可以坐在一张桌上 原理 一般的插入排序都是以1为单位进行比较 越有序&#xff0c;插…

茅台领航,贵州白酒向前冲!

执笔 | 尼 奥 编辑 | 扬 灵 “茅台好&#xff0c;大家才好&#xff1b;大家好&#xff0c;茅台才会更好。”在2024年贵州白酒企业盛宴上&#xff0c;这股自信与豪情再度激荡&#xff0c;大家对茅台与贵州白酒产业的未来充满信心。 5月26日至27日&#xff0c;由贵州省白酒产…

一文读懂python同级目录的调用附Demo(详细解读)

目录 前言1. 问题所示2. 原理分析3. 解决方法3.1 添加父目录3.2 相对路径3.3 添加init 前言 通过制作简易的Demo&#xff0c;让其更加深入的了解如何使用 1. 问题所示 发现python的同级目录相互调用会出Bug E:\software\anaconda3\envs\py3.10\python.exe F:\python_project…

internvl-chat部署

简介 InternVL1.5是一个开源的视觉模型&#xff0c;效果接近gpt-4v github地址&#xff1a;https://github.com/OpenGVLab/InternVL 体验地址&#xff1a;https://internvl.opengvlab.com/ 安装 官方推荐使用LMDeploy进行安装&#xff1a;https://lmdeploy.readthedocs.io…

Django 里如何使用 sqlite (操作步骤)

在 settings.py 里&#xff0c;已经设定好 sqlite 了 DATABASES {default: {ENGINE: django.db.backends.sqlite3,NAME: BASE_DIR / db.sqlite3,} }必须得设置好app # 在 settings.py 里INSTALLED_APPS [django.contrib.admin,django.contrib.auth,django.contrib.contentt…

Paddle使用问题No module named ‘paddle.fluid’

这是Paddle版本的问题&#xff0c;从飞桨框架 2.5 版本开始&#xff0c;已经废弃了 paddle.fluid 。 ​解决方案&#xff1a;修改paddle版本 pip install paddlepaddle2.4.0