JS，指标是否达标的算法问题

cqwcns · 发表于 2022-10-18 14:54

讨论一个指标是否达标的算法问题。
情景是这样的，我们首先设定指标的目标，分为基准目标和奋斗目标。
但还有一个因素要考虑，就是有些指标是越大越好，有些是越小越好的。
（取决是指标目标的设定，奋斗目标>基准目标时，就越大越好，反之亦然）

我们现在输入一个指标值，自动计算这个指标是否达标，分为三档：“达奋斗目标”、“达基准目标但未达奋斗目标”，“未达基准目标”。
主要问题在这个计算函数上，我以下的代码已实现功能，但代码太冗长和不灵活。

有什么更好的写法？请各位大佬指教，感谢。

微信图片_20221017132812.png

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <head>
        <!-- style -->
        <link rel="stylesheet" href="https://unpkg.com/element-plus@2.2.17/dist/index.css" />
        <!-- Vue 3 -->
        <script src="https://unpkg.com/vue@3.2.40/dist/vue.global.js"></script>
        <!-- component library -->
        <script src="https://unpkg.com/element-plus@2.2.17/dist/index.full.js"></script>
    </head>
</head>

<body>
    <div id="app">

        <el-form-item label="基准目标">
            <el-input-number v-model="basic" :min="1" :max="100" @change="setChange" />
        </el-form-item>

        <el-form-item label="奋斗目标">
            <el-input-number v-model="challenge" :min="1" :max="100" @change="setChange" />
        </el-form-item>

        <div>方向：{{isBiggerBetter?'越大越好':'越小越好'}}</div>

        <br />
        <br />
        <br />

        <el-form-item label="指标值">
            <el-input-number v-model="thisValue" :min="1" :max="100" @change="thisValueChange" />
        </el-form-item>

        <div>结果：{{res}}</div>

    </div>
    <script>
        let that = null,
            App = {
                data() {
                    return {
                        basic: 80,
                        challenge: 90,
                        isBiggerBetter: true,
                        thisValue: 85,
                        res: ''
                    }
                },
                mounted() {
                    that = this;
                },
                methods: {
                    thisValueChange() {
                        let { basic, challenge, isBiggerBetter, thisValue } = that,
                            res = '';

                        // 如果值已填写
                        if (thisValue && basic && challenge) {
                            // 越大越好
                            if (isBiggerBetter) {
                                if (thisValue >= challenge) {
                                    res = '达奋斗目标'
                                } else if (thisValue < basic) {
                                    res = '未达基准目标'
                                } else {
                                    res = '达基准目标但未达奋斗目标'
                                }

                                // 越小越好
                            } else {
                                if (thisValue <= challenge) {
                                    res = '达奋斗目标'
                                } else if (thisValue > basic) {
                                    res = '未达基准目标'
                                } else {
                                    res = '达基准目标但未达奋斗目标'
                                }
                            }

                            // 保存
                            that.res = res;
                        }
                    },
                    setChange() {
                        // 根据输入的基准目标和奋斗目标，判断是越大越好，还是越小越好
                        that.isBiggerBetter = that.basic < that.challenge
                    }
                }
            }
        const app = Vue.createApp(App);
        app.use(ElementPlus);
        app.mount("#app");
    </script>
</body>

</html>

lucklys · 发表于 2022-10-18 15:04

也就这样了

cqwcns · 发表于 2022-10-18 15:19

类似这种表达式的运算符>，有没有方法按条件灵活更改。
thisValue >= challenge

比如说isBiggerBetter为true时，运算符为>，false时，运算符为<。

有没有这样的方法？

lucklys · 发表于 2022-10-18 16:10

cqwcns 发表于 2022-10-18 15:19
类似这种表达式的运算符>，有没有方法按条件灵活更改。
thisValue >= challenge

只能一条一条的if判断没有啥好办法

cqwcns · 发表于 2022-10-18 16:35

这样写，相对简单一些，但还是不够简洁，不好维护。

[JavaScript] 纯文本查看 复制代码

                    thisValueChange() {
                        let { basic, challenge, isBiggerBetter, thisValue } = that,
                        // 如果值已填写
                        if (thisValue && basic && challenge) {
                            if ((isBiggerBetter && thisValue >= challenge) || (!isBiggerBetter && thisValue <= challenge)) {
                                res = '达奋斗目标'
                            } else if ((isBiggerBetter && thisValue < basic) || (!isBiggerBetter && thisValue > basic)) {
                                res = '未达基准目标'
                            } else {
                                res = '达基准目标但未达奋斗目标'
                            }
                            // 保存
                            that.res = res;
                        }
                    },

chr_233 · 发表于 2022-10-18 16:56

[JavaScript] 纯文本查看 复制代码

if (thisValue && basic && challenge) {
  if (thisValue === challenge || (isBiggerBetter === thisValue > challenge)) {
    res = '达奋斗目标'
  } else if (isBiggerBetter === thisValue < basic) {
    res = '未达基准目标'
  } else {
    res = '达基准目标但未达奋斗目标'
  }
  // 保存
  that.res = res
}

稍微简化了一下

cqwcns · 发表于 2022-10-18 18:03

chr_233 发表于 2022-10-18 16:56
[mw_shl_code=javascript,true]if (thisValue && basic && challenge) {
if (thisValue === challenge | ...

靠谱，已经优雅太多了。感谢

帐号		自动登录	找回密码
密码			注册[Register]

[讨论] JS，指标是否达标的算法问题

免费评分