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 的时长完成执行。 现…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机:Ubuntu 20.04.6 LTSHost:ARM32位交叉编译器:arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明:server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代,情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现,消费者对内容的“有感”程度,正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多,如何一步解决,采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集(每个目录代表一个类别,目录下是该类别的所有图片),你需要进行以下配置步骤&#x…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...
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 开发者设计的强大库ÿ…...
[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.
ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #:…...
PostgreSQL——环境搭建
一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在࿰…...
上位机开发过程中的设计模式体会(1):工厂方法模式、单例模式和生成器模式
简介 在我的 QT/C 开发工作中,合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式:工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...
