当前位置: 首页 > news >正文

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&#xff…...

【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&#xff0c;搭建安装VSOMEIP环境并运行基础例子。 1. 安装基础环境 使用apt-get来安装基础环境&#xff0c;受网络影响可以分开多次安装。环境好的也可以一次性执行。 sudo apt-get install gcc g sudo apt-get install cmake sudo apt-get install lib…...

Git | git revert命令详解

关注&#xff1a;CodingTechWork 引言 Git 是一个强大的版本控制工具&#xff0c;广泛应用于现代软件开发中。它为开发人员提供了多种功能来管理代码、协作开发和版本控制。在 Git 中&#xff0c;有时我们需要撤销或回退某些提交&#xff0c;而git revert 是一个非常有用的命令…...

ASP.NET Core 中,Cookie 认证在集群环境下的应用

在 ASP.NET Core 中&#xff0c;Cookie 认证在集群环境下的应用通常会遇到一些挑战。主要的问题是 Cookie 存储在客户端的浏览器中&#xff0c;而认证信息&#xff08;比如 Session 或身份令牌&#xff09;通常是保存在 Cookie 中&#xff0c;多个应用实例需要共享这些 Cookie …...

Flyte工作流平台调研(五)——扩展集成

系列文章&#xff1a; Flyte工作流平台调研&#xff08;一&#xff09;——整体架构 Flyte工作流平台调研&#xff08;二&#xff09;——核心概念说明 Flyte工作流平台调研&#xff08;三&#xff09;——核心组件原理 Flyte工作流平台调研&#xff08;四&#xff09;——…...

【AUTOSAR 基础软件】软件组件的建立与使用(“代理”SWC)

基础软件往往需要建立一些“代理”SWC来完成一些驱动的抽象工作&#xff08;Complex_Device_Driver_Sw或者Ecu_Abstraction_Sw等&#xff09;&#xff0c;或建立Application Sw Component来补齐基础软件需要提供的功能实现。当面对具体的项目时&#xff0c;基础软件开发人员还可…...

java通过ocr实现识别pdf中的文字

需求&#xff1a;识别pdf文件中的中文 根据github项目mymonstercat 改造,先将pdf文件转为png文件存于临时文件夹&#xff0c;然后通过RapidOcr转为文字,最后删除临时文件夹 1、引入依赖 <dependency><groupId>org.apache.pdfbox</groupId><artifactId&g…...

Git 命令代码管理详解

一、Git 初相识&#xff1a;版本控制的神器 在当今的软件开发领域&#xff0c;版本控制如同基石般重要&#xff0c;而 Git 无疑是其中最耀眼的明珠。它由 Linus Torvalds 在 2005 年创造&#xff0c;最初是为了更好地管理 Linux 内核源代码。随着时间的推移&#xff0c;Git 凭借…...

Docker的安装和使用

容器技术 容器与虚拟机的区别 虚拟机 (VM) VM包含完整的操作系统&#xff0c;并在虚拟化层之上运行多个操作系统实例。 VM需要更多的系统资源&#xff08;CPU、内存、存储&#xff09;来管理这些操作系统实例。 容器 (Container) 容器共享主机操作系统的内核&#xff0c;具…...

Flink系统知识讲解之:Flink内存管理详解

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

使用JMeter模拟多IP发送请求!

你是否曾遇到过这样的场景&#xff1a;使用 JMeter 进行压力测试时&#xff0c;单一 IP 被服务器限流或者屏蔽&#xff1f;这时&#xff0c;如何让 JMeter 模拟多个 IP 发送请求&#xff0c;成功突破测试限制&#xff0c;成为测试工程师必须攻克的难题。今天&#xff0c;我们就…...

【Ubuntu与Linux操作系统:六、软件包管理】

第6章 软件包管理 6.1 Linux软件安装基础 Linux的软件包是以二进制或源码形式发布的程序集合&#xff0c;包含程序文件和元数据。软件包管理器是Linux系统的重要工具&#xff0c;用于安装、更新和卸载软件。 1. 常见的软件包管理器&#xff1a; DEB 系统&#xff08;如Ubunt…...

【数据结构-堆】力扣1834. 单线程 CPU

给你一个二维数组 tasks &#xff0c;用于表示 n​​​​​​ 项从 0 到 n - 1 编号的任务。其中 tasks[i] [enqueueTimei, processingTimei] 意味着第 i​​​​​​​​​​ 项任务将会于 enqueueTimei 时进入任务队列&#xff0c;需要 processingTimei 的时长完成执行。 现…...

【前端动效】原生js实现拖拽排课效果

目录 1. 效果展示 2. 效果分析 2.1 关键点 2.2 实现方法 3. 代码实现 3.1 html部分 3.2 css部分 3.3 js部分 3.4 完整代码 4. 总结 1. 效果展示 如图所示&#xff0c;页面左侧有一个包含不同课程&#xff08;如语文、数学等&#xff09;的列表&#xff0c;页面右侧…...

C#使用OpenTK绘制3D可拖动旋转图形三棱锥

接上篇,绘制着色矩形 C#使用OpenTK绘制一个着色矩形-CSDN博客 上一篇安装OpenTK.GLControl后,这里可以直接拖动控件GLControl 我们会发现GLControl继承于UserControl //// 摘要:// OpenGL-aware WinForms control. The WinForms designer will always call the default//…...

排序的本质、数据类型及算法选择

排序的本质、数据类型及算法选择 一、排序的本质二、排序的数据类型三、排序算法的选择依据 前两天老金写了篇 “十大排序简介”&#xff0c;有点意犹未尽&#xff0c;这一回老金想把排序连根拔起&#xff0c;从排序的本质说道说道。 一、排序的本质 从字面上理解&#xff0c…...

Python的列表基础知识点(超详细流程)

目录 一、环境搭建 二、列表 2.1 详情 2.2 列表定义 2.3 列表长度 2.4 列表索引 2.5 切片索引 2.6 添加 2.7 插入 2.8 剔除 2.8.1 pop方法 2.8.2 del方法 2.9 任何数据类型 2.10 拼接 2.10.1 “” 2.10.2 “*” 2.11 逆序 ​编辑 2.12 计算出现次数 2.13 排序…...

HarmonyOS鸿蒙开发 弹窗及加载中指示器HUD功能实现

HarmonyOS鸿蒙开发 弹窗及加载中指示器HUD功能实现 最近在学习鸿蒙开发过程中&#xff0c;阅读了官方文档&#xff0c;在之前做flutter时候&#xff0c;经常使用overlay&#xff0c;使用OverlayEntry加入到overlayState来做添加悬浮按钮、提示弹窗、加载中指示器、加载失败的t…...

【Ubuntu与Linux操作系统:一、Ubuntu安装与基本使用】

第1章 Ubuntu安装与基本使用 1.1 Linux与Ubuntu Linux是一种开源、类Unix操作系统内核&#xff0c;拥有高稳定性和强大的网络功能。由于其开源性和灵活性&#xff0c;Linux被广泛应用于服务器、嵌入式设备以及桌面环境中。 Ubuntu是基于Debian的一个流行Linux发行版&#xf…...

React 元素渲染

React 元素渲染 React 是一个用于构建用户界面的 JavaScript 库&#xff0c;它允许开发人员创建大型应用程序&#xff0c;这些应用程序可以随着时间的推移而高效地更新和渲染。React 的核心概念之一是元素渲染&#xff0c;它描述了如何将 JavaScript 对象转换为 DOM&#xff0…...

【2024年华为OD机试】 (C卷,100分)- 括号匹配(Java JS PythonC/C++)

一、问题描述 题目描述 给定一个字符串&#xff0c;里边可能包含“()”、“[]”、“{}”三种括号&#xff0c;请编写程序检查该字符串中的括号是否成对出现&#xff0c;且嵌套关系正确。 若括号成对出现且嵌套关系正确&#xff0c;或该字符串中无括号字符&#xff0c;输出&am…...

解锁企业数字化转型新力量:OpenCoze(开源扣子)

在当今数字化浪潮席卷之下&#xff0c;企业对于高效管理和协同运作的需求愈发迫切&#xff0c;而开源技术正逐渐成为众多企业破局的关键利器。今天&#xff0c;想给大家介绍一款极具潜力的开源项目 ——OpenCoze&#xff0c;中文名称 “开源扣子”。 一、OpenCoze 是什么&…...

【网络云SRE运维开发】2025第2周-每日【2025/01/12】小测-【第12章 rip路由协议】理论和实操考试题解析

文章目录 选择题答案及解析理论题答案及解析实操题答案及解析下一步进阶 选择题答案及解析 RIP路由协议是基于哪种算法的动态路由协议&#xff1f; 答案&#xff1a;B. 距离矢量算法解析&#xff1a;链路状态算法用于OSPF等协议&#xff1b;最小生成树算法主要用于生成树协议&…...

白山北京网站建设/推广方案框架

C#下RSA算法的实现&#xff08;适用于支付宝和易宝支付&#xff09; 目录(?)[-] RSA算法代码RSA算法测试代码RSA算法代码&#xff1a; [csharp] view plaincopy using System; using System.Collections.Generic; using System.Text; using System.IO; using System.Secur…...

贴吧网站怎么做/seo关键词排名优化app

作者&#xff1a;13 GitHub&#xff1a;https://github.com/ZHENFENG13 版权声明&#xff1a;本文为原创文章&#xff0c;未经允许不得转载。 Lombok简介 Lombok是Java语言的实用工具&#xff0c;确切的说&#xff0c;应该说是一个很好用的插件&#xff0c;对&#xff0c;插件&…...

网站做测试怎样做/今日西安头条最新消息

读文件代码&#xff1a; # 读取一个文件&#xff0c;逐行调用返回结果&#xff0c;并加工 fpath c:\\Users\\user\\python\\EastMoney\\10.txt rfile open(fpath) # 打开文件&#xff0c;默认为只读r for rline in rfile.readlines(): # 读…...

网站推广流程是/新媒体运营哪个培训机构好

[b]冒泡排序[/b]&#xff08;Bubble Sort&#xff0c;台灣譯為&#xff1a;泡沫排序或氣泡排序&#xff09;是一種簡單的排序算法。它重複地走訪過要排序的數列&#xff0c;一次比較兩個元素&#xff0c;如果他們的順序錯誤就把他們交換過來。走訪數列的工作是重複地進行直到沒…...

网站怎么做二维码链接地址/杭州网络推广网络优化

一、什么是AJAX&#xff0c;为什么要使用Ajax&#xff08;请谈一下你对Ajax的认识&#xff09; ajax全称Asynchronous JavaScript and XML&#xff08;异步的javascript和XML&#xff09;,为什么会有这么一种技术的出现呢&#xff0c;因为前端时常会有这样的需求&#xff0c;我…...

做pc端大型网站 前端用/做好网络推广

[索引页][源码下载]稳扎稳打Silverlight(16) - 2.0数据之独立存储(Isolated Storage)作者&#xff1a;webabcd介绍Silverlight 2.0 数据的独立存储(Isolated Storage)&#xff1a;IsolatedStorageFile - 操作 独立存储 的类IsolatedStorageFile.GetUserStoreForSite() - 按站点…...