js:根据后端返回数据的最大值进行计算然后设置这个最大值为百分之百,其他的值除这个最大值

问:

现在tabData.value 接收到了后端返回的数据,
[{text:'人力',percentage:‘90’},{text:'物品',percentage:‘20’},{text:'物理',percentage:‘50’},{text:'服务',percentage:‘40’},{text:'操作',percentage:‘80’},]我希望在希望找到里面percentage最大的值然后存储起来

回答:

你可以使用JavaScript来找到`tabData.value`数组中`percentage`最大的值。以下是一个示例代码,展示了如何实现这一点:// 假设这是从后端返回的数据
let tabData = {value: [{ text: '人力', percentage: '90' },{ text: '物品', percentage: '20' },{ text: '物理', percentage: '50' },{ text: '服务', percentage: '40' },{ text: '操作', percentage: '80' },]
};// 找到percentage最大的值
let maxPercentage = Math.max(...tabData.value.map(item => parseInt(item.percentage)));// 存储最大的percentage值
let maxPercentageItem = tabData.value.find(item => parseInt(item.percentage) === maxPercentage);console.log('最大的percentage值:', maxPercentage);
console.log('具有最大percentage值的对象:', maxPercentageItem);在这个示例中,我们首先使用`map`方法将所有`percentage`值转换为整数,然后使用`Math.max`方法找到最大的`percentage`值。接着,我们使用`find`方法找到具有最大`percentage`值的对象,并将其存储起来。运行这段代码后,你会看到最大的`percentage`值以及具有最大`percentage`值的对象。

问:

现在有了最大值,假定最大值为90,,我希望在希望对后端返回的tabData进行修改,针对最大数90,然所有的tabData中的所有对象都除以这个最大值90,也就是让上述的20/90, 50/90,40/90,80/90然后分别将值创建一个新的字段percentageWidthNum:''然后将值放进去,最终结果是:形成了一个新的数组:
 [
        { text: '人力', percentage: '90' },
        { text: '物品', percentage: '20',percentageWidthNum:'20%' },
        { text: '物理', percentage: '50',percentageWidthNum:'30%' },
        { text: '服务', percentage: '40',percentageWidthNum:'30%' },
        { text: '操作', percentage: '80',percentageWidthNum:'30%' },
    ]

回答:

你可以使用JavaScript来实现这个功能。以下是一个示例代码,展示了如何对`tabData`进行修改,并添加一个新的字段`percentageWidthNum`:```javascript
// 假设这是从后端返回的数据
let tabData = {value: [{ text: '人力', percentage: '90' },{ text: '物品', percentage: '20' },{ text: '物理', percentage: '50' },{ text: '服务', percentage: '40' },{ text: '操作', percentage: '80' },]
};// 找到percentage最大的值
let maxPercentage = Math.max(...tabData.value.map(item => parseInt(item.percentage)));// 修改tabData中的每个对象,添加新的字段percentageWidthNum
tabData.value = tabData.value.map(item => {let percentageWidthNum = (parseInt(item.percentage) / maxPercentage * 100).toFixed(2) + '%';return {...item,percentageWidthNum: percentageWidthNum};
});console.log(tabData.value);
```在这个示例中,我们首先找到`percentage`最大的值,然后使用`map`方法对`tabData.value`进行遍历,计算每个对象的`percentageWidthNum`值。计算公式为`(parseInt(item.percentage) / maxPercentage * 100)`,并将结果转换为百分比字符串。运行这段代码后,你会看到修改后的`tabData`数组:```javascript
[{ text: '人力', percentage: '90', percentageWidthNum: '100%' },{ text: '物品', percentage: '20', percentageWidthNum: '20%' },{ text: '物理', percentage: '50', percentageWidthNum: '50%' },{ text: '服务', percentage: '40', percentageWidthNum: '40%' },{ text: '操作', percentage: '80', percentageWidthNum: '80%' },
]
```这样,你就成功地对`tabData`进行了修改,并添加了一个新的字段`percentageWidthNum`。

问:

我希望percentageWidthNum的值是每个元素的percentage的值除以我们保存的最大percentage的值的百分数形式比方:18/90=0.2,然后将0.2*100 + '%'=>20%所有的percentageWidthNum都要这样

回答:

明白了,你希望每个元素的percentageWidthNum字段的值是其percentage值除以最大的percentage值,然后转换为百分比形式。以下是实现这一功能的JavaScript代码:javascript
// 假设这是从后端返回的数据
let tabData = {value: [{ text: '人力', percentage: '90' },{ text: '物品', percentage: '20' },{ text: '物理', percentage: '50' },{ text: '服务', percentage: '40' },{ text: '操作', percentage: '80' },]
};// 找到percentage最大的值
let maxPercentage = Math.max(...tabData.value.map(item => parseInt(item.percentage)));// 修改tabData中的每个对象,添加新的字段percentageWidthNum
tabData.value = tabData.value.map(item => {let percentageWidthNum = (parseInt(item.percentage) / maxPercentage * 100).toFixed(0) + '%';return {...item,percentageWidthNum: percentageWidthNum};
});console.log(tabData.value);
在这个示例中,我们首先找到percentage最大的值,然后使用map方法对tabData.value进行遍历。对于每个对象,我们计算percentageWidthNum值,计算公式为(parseInt(item.percentage) / maxPercentage * 100).toFixed(0) + '%',这样可以将结果转换为百分比字符串,并保留整数部分。运行这段代码后,你会看到修改后的tabData数组:javascript
[{ text: '人力', percentage: '90', percentageWidthNum: '100%' },{ text: '物品', percentage: '20', percentageWidthNum: '22%' },{ text: '物理', percentage: '50', percentageWidthNum: '56%' },{ text: '服务', percentage: '40', percentageWidthNum: '44%' },{ text: '操作', percentage: '80', percentageWidthNum: '89%' },
]
这样,你就成功地对tabData进行了修改,并添加了一个新的字段percentageWidthNum,其值为每个元素的percentage值除以最大的percentage值的百分比形式

问:

可以的,上面的逻辑实现了,同时,text的长度要求控制在六个之内,超出六个就变味省略号

回答:

明白了,你希望在处理tabData时,不仅要计算每个对象的percentageWidthNum值,还要确保text字段的长度控制在六个字符之内。如果超过六个字符,就将其变为省略号表示。以下是实现这一功能的JavaScript代码:javascript
// 假设这是从后端返回的数据
let tabData = {value: [{ text: '人力', percentage: '90' },{ text: '物品', percentage: '20' },{ text: '物理学', percentage: '50' },{ text: '服务业', percentage: '40' },{ text: '操作系统', percentage: '80' },]
};// 找到percentage最大的值
let maxPercentage = Math.max(...tabData.value.map(item => parseInt(item.percentage)));// 修改tabData中的每个对象,添加新的字段percentageWidthNum
tabData.value = tabData.value.map(item => {let percentageWidthNum = (parseInt(item.percentage) / maxPercentage * 100).toFixed(0) + '%';let truncatedText = item.text.length > 6 ? item.text.slice(0, 6) + '...' : item.text;return {...item,percentageWidthNum: percentageWidthNum,text: truncatedText};
});console.log(tabData.value);
在这个示例中,我们首先找到percentage最大的值,然后使用map方法对tabData.value进行遍历。对于每个对象,我们计算percentageWidthNum值,并检查text字段的长度。如果超过六个字符,就将其变为省略号表示。运行这段代码后,你会看到修改后的tabData数组:javascript
[{ text: '人力', percentage: '90', percentageWidthNum: '100%' },{ text: '物品', percentage: '20', percentageWidthNum: '22%' },{ text: '物理学', percentage: '50', percentageWidthNum: '56%' },{ text: '服务业', percentage: '40', percentageWidthNum: '44%' },{ text: '操作系...', percentage: '80', percentageWidthNum: '89%' },
]
这样,你就成功地对tabData进行了修改,不仅添加了新的字段percentageWidthNum,还确保了text字段的长度控制在六个字符之内

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

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

相关文章

设计一个利用事务特性可以阻塞线程的排他锁,并且通过注解和 AOP 来实现

设计思路: 利用数据库表记录锁标识:通过唯一标识符(如方法名 参数),我们可以在数据库中插入一条记录,表示当前方法正在执行。这条记录需要记录插入时间。 注解:通过注解标识哪些方法需要加锁&a…

标定 3

标定场景与对应的方式 标定板标定主要应用场景: (1)无法获取到执行机构物理坐标值,比如相机固定,执行机构为传送带等 (2)相机存在畸变等非线性标定情况,需要进行畸变校正 (3)标定单像素精度 (4)获取两个相机之间的坐标系关系 标定板操作步骤: (1)确定好拍…

了解模2除法:原理与应用

模2除法,也被称为二进制除法或XOR除法,是一种在二进制数制下进行的特殊除法运算。与常规的十进制或其他进制的除法不同,模2除法使用异或(XOR)运算代替减法,并且不涉及进位或借位。这种除法运算在数字通信、…

基于 SSH 的任务调度系统

文末附有完整项目代码 在当今科技飞速发展的时代,任务调度系统的重要性日益凸显。本文将详细介绍一个基于 SSH(SpringStruts2Hibernate)的任务调度系统的设计与实现。 一、系统概述 本系统旨在改变传统人工任务调度方式,通过计算…

天童美语:如何培养孩子的音乐细胞

在孩子的成长旅程中,音乐不仅是美妙的旋律,更是情感表达和智力发展的重要媒介。培养孩子的音乐细胞不仅能增强他们的艺术修养,还能促进大脑发育,提高创造力和协调性。济南天童美语提供一些有效的方法,帮助家长激发孩子…

RFC 793

读 TCP 协议 RFC-793_rfc 793-CSDN博客TCP灌包中RTT时延与RTO超时关系 - konglingbin - 博客园 TCP的RTT算法 从前面的TCP重传机制我们知道Timeout的设置对于重传非常重要。 设长了,重发就慢,丢了老半天才重发,没有效率,性能差&…

Transformer:深度学习的变革力量

深度学习领域的发展日新月异,在自然语言处理(NLP)、计算机视觉等领域取得了巨大突破。然而,早期的循环神经网络(RNN)在处理长序列时面临着梯度消失、并行计算能力不足等瓶颈。而 Transformer 的横空出世&am…

计算机网络 笔记 数据链路层 2

1,信道划分: (1)时分复用TDM 将时间等分为“TDM帧”,每个TDM帧内部等分为m个时隙,m个用户对应m个时隙 缺点:每个节点只分到了总带宽的1/m,如果有部分的1节点不发出数据,那么就会在这个时间信道被闲置,利用…

vue el-table 数据变化后,高度渲染问题

场景:el-table设置了height属性,但是切换查询条件后再次点击查询重新获取data时,el-table渲染的高度会有问题,滚动区域变矮了。 解决办法:使用doLayout方法‌,在表格数据渲染后调用doLayout方法可以重新布局…

深度学习|表示学习|一个神经元可以干什么|02

如是我闻: 如果我们只有一个神经元(即一个单一的线性或非线性函数),仍然可以完成一些简单的任务。以下是一个神经元可以实现的功能和应用: 1. 实现简单的线性分类 输入:一组特征向量 x x x 输出&#xff…

开源生成式物理引擎Genesis,可模拟世界万物

这是生成大模型时代 —— 它们能生成文本、图像、音频、视频、3D 对象…… 而如果将所有这些组合到一起,我们可能会得到一个世界! 现在,不管是 LeCun 正在探索的世界模型,还是李飞飞想要攻克的空间智能,又或是其他研究…

使用Docker模拟PX4固件的无人机用于辅助地面站开发

前言 最近在制作鸿蒙无人机地面站,模仿的是QGroundControl,协议使用mavlink,记录一下本地模拟mavlink协议通过tcp/udp发送 废话不多说直接上命令 1.启动docker的桌面端 启动之后才能使用docker命令来创建容器 docker run --rm -it jonas…

深度学习张量的秩、轴和形状

深度学习张量的秩、轴和形状 秩、轴和形状是在深度学习中我们最关心的张量属性。 秩轴形状 秩、轴和形状是在深度学习中开始使用张量时我们最关心的三个属性。这些概念相互建立,从秩开始,然后是轴,最后构建到形状,所以请注意这…

fastadmin插件wanlshop使用方法

1.在FastAdmin – 基于ThinkPHP和Bootstrap的极速后台开发框架官网下载FastAdmin框架 2.解压压缩包 3.本地安装部署FastAdmin 4.登录FastAdmin账号 5.在插件管理中在线安装插件或本地安装 6.后台B2B2C商城 - UNI-APP客户端 - 客户端配置 - 更新 - 生成源码(生成…

统计染色体长度信息-脚本009

一行代码统计染色体长度,不用seqkit,py脚本等等 seqkit安装与使用 (生物信息学工具-003)--seqkit常用操作(补01)-CSDN博客 seqtk安装与使用-seqtk-1.4(bioinfomatics tools-012)-…

【json】

JSON JSON是一种轻量级的,按照指定的格式去组织和封装数据的数据交互格式。 本质上是一个带有特定格式的字符串(py打印json时认定为str类型) 在各个编程语言中流通的数据格式,负责不同编程语言中的数据传递和交互,类似于计算机普通话 python与json关系及相互转换…

基于 Python 自动化接口测试(踩坑与实践)

文档:基于 Python 的自动化接口测试 目录 背景问题描述与解决思路核心代码修改点及其详细解释最终测试结果后续优化建议 1. 问题背景 本项目旨在使用 Python 模拟浏览器的请求行为,测试文章分页接口的可用性。测试目标接口如下: bashcoder…

《鸿蒙微内核与人工智能算法协同,开启智能系统新时代》

在当今科技飞速发展的时代,鸿蒙系统以其独特的微内核架构和对人工智能算法的深度融合,正引领着操作系统智能化的新潮流。本文将深入探讨鸿蒙系统的微内核架构是如何与人工智能算法高效协同,从而提升系统性能和智能化水平的。 鸿蒙系统微内核…

服务器登陆后有java变量

需求:在ssh服务器后,用户root 使用java会报错,没有这个变量,其实环境变量中已经有配置了,在/etc/profile 中有写变量及地址,通过source /etc/profile 命令也可以使环境变量加载上,但是ssh后不会…

k8s dashboard离线部署步骤

确定k8s版本,以1.23为例。 部署metrics-server服务,最好用v0.5.2。 用v0.6.0,可能会报以下错误: nodekubemaster:~/Desktop/metric$ kubectl top nodes Error from server (ServiceUnavailable): the server is currently unabl…