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字段的长度控制在六个字符之内
相关文章:
js:根据后端返回数据的最大值进行计算然后设置这个最大值为百分之百,其他的值除这个最大值
问: 现在tabData.value 接收到了后端返回的数据, [{text:人力,percentage:‘90’},{text:物品,percentage:‘20’},{text:物理,percentage:‘50’},{text:服务,percentageÿ…...

【Spring】@Size 无法拦截null的原因
问题复现 在构建 Web 服务时,我们一般都会对一个 HTTP 请求的 Body 内容进行校验,例如我们来看这样一个案例及对应代码。当开发一个学籍管理系统时,我们会提供了一个 API 接口去添加学生的相关信息,其对象定义参考下面的代码&…...

【Block总结】掩码窗口自注意力 (M-WSA)
摘要 论文链接:https://arxiv.org/pdf/2404.07846 论文标题:Transformer-Based Blind-Spot Network for Self-Supervised Image Denoising Masked Window-Based Self-Attention (M-WSA) 是一种新颖的自注意力机制,旨在解决传统自注意力方法在…...
用 HTML5 Canvas 和 JavaScript 实现雪花飘落特效
这篇文章将带您深入解析使用 HTML5 Canvas 和 JavaScript 实现动态雪花特效的代码原理。 1,效果展示 该效果模拟了雪花从天而降的动态场景,具有以下特点: 雪花数量、大小、透明度和下落速度随机。雪花会在屏幕底部重置到顶部,形成循环效果。随窗口大小动态调整,始终覆盖…...
【cocos creator】【ts】事件派发系统
触发使用: EventTool.emit(“onClick”) 需要监听的地方,onload调用: EventTool.on(“onClick”, this.onClickEvent, this) /**事件派发*/class EventTool {protected static _instance: EventTool null;public static get Instance(): Eve…...
《探索鸿蒙Next上开发人工智能游戏应用的技术难点》
在科技飞速发展的当下,鸿蒙Next系统为应用开发带来了新的机遇与挑战,开发一款运行在鸿蒙Next上的人工智能游戏应用更是备受关注。以下是在开发过程中可能会遇到的一些技术难点: 鸿蒙Next系统适配性 多设备协同:鸿蒙Next的一大特色…...

CSS | CSS实现两栏布局(左边定宽 右边自适应,左右成比自适应)
目录 一、左边定宽 右边自适应 1.浮动 2.利用浮动margin 3.定位margin 4.flex布局 5.table 布局 二、左右成比自适应 1:1 1flex布局 table布局 1:2 flex布局 <div class"father"><div class"left">左边自适应</div><div class"r…...
acwing_3195_有趣的数
acwing_3195_有趣的数 // // Created by HUAWEI on 2024/11/17. // #include<iostream> #include<cstring> #include<algorithm>#define int long longusing namespace std;const int N 1000 50; const int MOD 1e9 7; int C[N][N]; //组合数signed mai…...
Liunx-搭建安装VSOMEIP环境教程 执行 运行VSOMEIP示例demo
本文安装环境为Liunx,搭建安装VSOMEIP环境并运行基础例子。 1. 安装基础环境 使用apt-get来安装基础环境,受网络影响可以分开多次安装。环境好的也可以一次性执行。 sudo apt-get install gcc g sudo apt-get install cmake sudo apt-get install lib…...
Git | git revert命令详解
关注:CodingTechWork 引言 Git 是一个强大的版本控制工具,广泛应用于现代软件开发中。它为开发人员提供了多种功能来管理代码、协作开发和版本控制。在 Git 中,有时我们需要撤销或回退某些提交,而git revert 是一个非常有用的命令…...
ASP.NET Core 中,Cookie 认证在集群环境下的应用
在 ASP.NET Core 中,Cookie 认证在集群环境下的应用通常会遇到一些挑战。主要的问题是 Cookie 存储在客户端的浏览器中,而认证信息(比如 Session 或身份令牌)通常是保存在 Cookie 中,多个应用实例需要共享这些 Cookie …...

Flyte工作流平台调研(五)——扩展集成
系列文章: Flyte工作流平台调研(一)——整体架构 Flyte工作流平台调研(二)——核心概念说明 Flyte工作流平台调研(三)——核心组件原理 Flyte工作流平台调研(四)——…...

【AUTOSAR 基础软件】软件组件的建立与使用(“代理”SWC)
基础软件往往需要建立一些“代理”SWC来完成一些驱动的抽象工作(Complex_Device_Driver_Sw或者Ecu_Abstraction_Sw等),或建立Application Sw Component来补齐基础软件需要提供的功能实现。当面对具体的项目时,基础软件开发人员还可…...
java通过ocr实现识别pdf中的文字
需求:识别pdf文件中的中文 根据github项目mymonstercat 改造,先将pdf文件转为png文件存于临时文件夹,然后通过RapidOcr转为文字,最后删除临时文件夹 1、引入依赖 <dependency><groupId>org.apache.pdfbox</groupId><artifactId&g…...

Git 命令代码管理详解
一、Git 初相识:版本控制的神器 在当今的软件开发领域,版本控制如同基石般重要,而 Git 无疑是其中最耀眼的明珠。它由 Linus Torvalds 在 2005 年创造,最初是为了更好地管理 Linux 内核源代码。随着时间的推移,Git 凭借…...
Docker的安装和使用
容器技术 容器与虚拟机的区别 虚拟机 (VM) VM包含完整的操作系统,并在虚拟化层之上运行多个操作系统实例。 VM需要更多的系统资源(CPU、内存、存储)来管理这些操作系统实例。 容器 (Container) 容器共享主机操作系统的内核,具…...

Flink系统知识讲解之:Flink内存管理详解
Flink系统知识讲解之:Flink内存管理详解 在现阶段,大部分开源的大数据计算引擎都是用Java或者是基于JVM的编程语言实现的,如Apache Hadoop、Apache Spark、Apache Drill、Apache Flink等。Java语言的好处是不用考虑底层,降低了程…...

使用JMeter模拟多IP发送请求!
你是否曾遇到过这样的场景:使用 JMeter 进行压力测试时,单一 IP 被服务器限流或者屏蔽?这时,如何让 JMeter 模拟多个 IP 发送请求,成功突破测试限制,成为测试工程师必须攻克的难题。今天,我们就…...
【Ubuntu与Linux操作系统:六、软件包管理】
第6章 软件包管理 6.1 Linux软件安装基础 Linux的软件包是以二进制或源码形式发布的程序集合,包含程序文件和元数据。软件包管理器是Linux系统的重要工具,用于安装、更新和卸载软件。 1. 常见的软件包管理器: DEB 系统(如Ubunt…...

【数据结构-堆】力扣1834. 单线程 CPU
给你一个二维数组 tasks ,用于表示 n 项从 0 到 n - 1 编号的任务。其中 tasks[i] [enqueueTimei, processingTimei] 意味着第 i 项任务将会于 enqueueTimei 时进入任务队列,需要 processingTimei 的时长完成执行。 现…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文? 多租户隔离:自动为接入设备追加租户前缀,后端按 ClientID 拆分队列。零代码鉴权:将入站用户名替换为 OAuth Access-Token,后端 Broker 统一校验。灰度发布:根据 IP/地理位写…...

学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码,专为学校招生场景量身打造,功能实用且操作便捷。 从技术架构来看,ThinkPHP提供稳定可靠的后台服务,FastAdmin加速开发流程,UniApp则保障小程序在多端有良好的兼…...

对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验,以及大语言模型的分析能力,我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际,我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测,聊作存档。等到明…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序,以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务,提供稳定高效的数据处理与业务逻辑支持;利用 uniapp 实现跨平台前…...

SpringCloudGateway 自定义局部过滤器
场景: 将所有请求转化为同一路径请求(方便穿网配置)在请求头内标识原来路径,然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

深度学习习题2
1.如果增加神经网络的宽度,精确度会增加到一个特定阈值后,便开始降低。造成这一现象的可能原因是什么? A、即使增加卷积核的数量,只有少部分的核会被用作预测 B、当卷积核数量增加时,神经网络的预测能力会降低 C、当卷…...
A2A JS SDK 完整教程:快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...