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

问:

现在tabData.value 接收到了后端返回的数据,

{text:'人力',percentage:'90'},{text:'物品',percentage:'20'},{text:'物理',percentage:'50'},{text:'服务',percentage:'40'},{text:'操作',percentage:'80'},\]我希望在希望找到里面percentage最大的值然后存储起来 回答: ```javascript 你可以使用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 复制代码
你可以使用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都要这样

回答:

javascript 复制代码
明白了,你希望每个元素的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的长度要求控制在六个之内,超出六个就变味省略号

回答:

javascript 复制代码
明白了,你希望在处理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字段的长度控制在六个字符之内
相关推荐
bzmK1DTbd10 小时前
Git版本控制:Java项目中的分支管理与合并策略
java·开发语言·git
OYangxf13 小时前
Git基础概念
git
weixin_4022784516 小时前
VS code 本地推送github添加SSH设置
运维·git·ssh
笑望灬星辰18 小时前
VS Code 编辑器 Git 工具 - 分支操作【保姆级教程】
git·vscode·编辑器
shisanjin12318 小时前
关于 IDEA2025 版本中对 git 的操作与使用
git·github·idea
熬夜敲代码的小N18 小时前
鸿蒙PC开发者必备!GitNext深度测评:一站式Git管理工具
git·华为·harmonyos
坚果派·白晓明18 小时前
【开发者必备工具】Windows 11 安装 Git 完整指南
windows·git·项目开发必备工具·参与开源项目必备工具
cooldream200918 小时前
Git实战指南:从Gitee拉取到推送的完整工作流详解
git·gitee
希望未来不会秃18 小时前
【Git实战】如何将本地已有项目关联并推送到指定的远程仓库(保姆级教程)
git·gitee·github
挂科边缘18 小时前
2026 Git 安装流程和基础使用步骤(保姆级教程)
git