js 根据条件生成公式

已于 2023-05-30 17:26:04 修改
阅读量272 收藏 1
点赞数 2
分类专栏： js 文章标签： javascript servlet json
于 2023-05-30 17:02:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20487473/article/details/130952245
版权

需求：
根据用户选择公式条件，最终生成公式；

后端所需json较大举例IF函数：

{
		"name": "技术质量管理",
		"remark": "", //备注
		"evaluateId": "1656117529237520387",
		"previousResult": -1,
		"type": "函数", //选择类型
		"functionType": "IF", //具体函数类型 MIN、MAX、IF
		"functionStr": "IF(H19=0,1,IF(H19<=2,0.9,(IF(H19<=5,0.7,IF(H19<=8,0.5,0.2)))))", //形成的函数表达式
		"conditionParams": [
			{ //IF条件
				"expression": { //表达式参数
					"variable": {
						"des": "变量", //H31/H30*100<=100    IF(H5/H4>=0.8
						"type": "指标值", //指标分值、指标值,带入结果
						"previousResult": -1, //具体带入的结果步数 0，-1表示不带入
						"indicatorInfo": { //type 为指标分值、指标值、指标内容分值等
							"evaluateId": "1656117529237520388",
							"name": "质量问题投诉（次）",
							"indicatorId": "1655750184467955712",
							"indicatorVersionId": "d2d160b1-67ad-4608-9759-d9f3dfea0f9f"
						}
					},
					"condition": {
						"des": "条件",
						"type": "小于等于" //条件：大于、大于等于、小于、小于等于
					},
					"constant": {
						"des": "常量",
						"type": "填值",
						"value:": 8 //具体填的值
					}
				},
				"resultParams": { //结果参数
					"params1": {
						"des": "结果一",
						"type": "填值", //填值、指标分值、指标值、带入结果
						"value": 0.5, //具体填的值
						"previousResult": -1 //具体带入的结果步数 0，-1表示不带入
					},
					"params2": {
						"des": "结果二",
						"type": "填值", //填值、指标分值、指标值、带入结果
						"value": 0.2,
						"previousResult": -1 //具体带入的结果步数 0，-1表示不带入
					}
				}
			},
			{
				"previousConditionResult": 2, //具体带入的条件步数 0，-1表示不带入
				"asResultOne": false, //是否作为结果一，否则作为结果二
				"expression": { //表达式参数
					"variable": {
						"des": "变量", //H31/H30*100<=100    IF(H5/H4>=0.8
						"type": "指标值", //指标分值、指标值,带入结果
						"previousResult": -1, //具体带入的结果步数 0，-1表示不带入
						"indicatorInfo": { //type 为指标分值、指标值、指标内容分值等
							"evaluateId": "1656117529237520388",
							"name": "质量问题投诉（次）",
							"indicatorId": "1655750184467955712",
							"indicatorVersionId": "d2d160b1-67ad-4608-9759-d9f3dfea0f9f"
						}
					},
					"condition": {
						"des": "条件",
						"type": "等于" //条件：大于、大于等于、小于、小于等于
					},
					"constant": {
						"des": "常量",
						"type": "填值",
						"value:": 0 //具体填的值
					}
				},
				"resultParams": { //结果参数
					"params1": {
						"des": "结果一",
						"type": "填值", //填值、指标分值、指标值、带入结果
						"value": 0, //具体填的值
						"previousResult": -1 //具体带入的结果步数 0，-1表示不带入
					},
					"params2": {
						"des": "结果二",
						"type": "填值", //填值、指标分值、指标值、带入结果
						"value": null,
						"previousResult": -1 //具体带入的结果步数 0，-1表示不带入
					}
				}
			}
		]
	},

前端页面样式：
在这里插入图片描述
思路1：html代码中取数据，如遇带入步骤/带入条件则进行递归处理
item19，item 两个变量由于在老项目上改动，所以继续用了。
html代码中递归会出现很多问题，不好改动，后改为js写法。无需递归很简单的操作。

<template>
    <span>
        <span @click="dayin(item19)">
            查看
        </span>
        IF（
        <span v-if="item19.expression.variable.type == '指标值' || item19.expression.variable.type == '指标分值'">
            {{ item19.expression.variable.indicatorInfo.name }}
        </span>
        <span v-if="item19.expression.variable.type == '填值'">
            {{ item19.expression.variable.value }}
        </span>
        <span v-if="item19.expression.condition.type == '小于'"> &lt; </span>
        <span v-if="item19.expression.condition.type == '大于'"> &gt; </span>
        <span v-if="item19.expression.condition.type == '小于等于'"> &lt;= </span>
        <span v-if="item19.expression.condition.type == '大于等于'"> &gt;= </span>
        <span v-if="item19.expression.condition.type == '等于'"> = </span>
        <span v-if="item19.expression.constant.type == '填值'">
            {{ item19.expression.constant.value }} ，
        </span>
        <span v-if="item19.expression.constant.type == '指标值' || item19.expression.constant.type == '指标分值'">
            {{ item19.expression.constant.indicatorInfo.name }}
            ，
        </span>
        <span v-if="item19.resultParams.params1.type == '带入步骤结果'">
            <span v-if="item19.resultParams.params2.previousResult || item19.resultParams.params2.previousResult == 0">
                <span v-if="item[item19.resultParams.params1.previousResult]">
                   <formula :item19="item[item19.resultParams.params1.previousResult].ifFunctionList[0]" :item="item" />
                </span>
            </span>
        </span>
        <span v-if="item19.resultParams.params1.type == '填值'">
            {{ item19.resultParams.params1.value }} ，
        </span>
        <span v-if="item19.resultParams.params1.type == '带入条件结果'">
            <span
                v-if="item19.resultParams.params1.previousConditionResult || item19.resultParams.params1.previousConditionResult == 0">
              <formula
                    :item19="item[item19.resultParams.params1.previousResult].ifFunctionList[item19.resultParams.params1.previousConditionResult]"
                    :item="item" />
            </span>
        </span>

        <span v-if="item19.resultParams.params2.type == '带入步骤结果'">
            <span v-if="item19.resultParams.params2.previousResult || item19.resultParams.params2.previousResult == 0">
                <span v-if="item[item19.resultParams.params2.previousResult]">
                    <formula :item19="item[item19.resultParams.params2.previousResult].ifFunctionList[0]" :item="item" />
                </span>
            </span>
        </span>
        <span v-if="item19.resultParams.params2.type == '填值'">
            {{ item19.resultParams.params2.value }}
        </span>
        <span v-if="item19.resultParams.params2.type == '带入条件结果'">
            <span
                v-if="item19.resultParams.params2.previousConditionResult || item19.resultParams.params2.previousConditionResult == 0">
                <formula :item19="item.ifFunctionList[item19.resultParams.params2.previousConditionResult]" :item="item" />
            </span>
        </span>
        ）
    </span>
</template>

<script>
import formula from './formula.vue';
export default {
    name: "formula",
    components: {
        formula
    },
    data: function () {
        return {
            isShow: false,
            tableInfo: [],
        };
    },
    created() {
    },
    watch: {},
    props: {
        item: {
            item: {
                type: [Array, Object],
                default: () => ({})
            }
        },
        item19: {
            type: Object
        }
    },
    computed: {

    },
    methods: {
        dayin(record) {
            console.log('record =', record);
        }
    },
};
</script>

<style></style>

js代码如下：

// 设置 条件结果预览
        conditionResultPreview(item19, item) {
            let expression = "条件结果预览：IF（";

            if(item19.expression.variable.type == '指标值' || item19.expression.variable.type == '指标分值'){
                expression += item19.expression.variable.indicatorInfo.name;
            }
            if(item19.expression.variable.type == '填值'){
                expression += item19.expression.variable.value;
            }
            if(item19.expression.condition.type == '小于')  expression += ' < ';
            if(item19.expression.condition.type == '大于')  expression += ' > ';
            if(item19.expression.condition.type == '小于等于')  expression += ' <= ';
            if(item19.expression.condition.type == '大于等于')  expression += ' >= ';
            if(item19.expression.condition.type == '等于')  expression += ' = ';

            if(item19.expression.constant.type == '填值'){
                expression += item19.expression.constant.value + '，';
            }
            if(item19.expression.constant.type == '指标值' || item19.expression.constant.type == '指标分值'){
                expression += item19.expression.constant.indicatorInfo.name
            }
            // 带入步骤结果
            try {
                if (item19.resultParams.params1.type == '带入步骤结果') {
                    if (item19.resultParams.params1.previousResult || item19.resultParams.params1.previousResult == 0) {
                        expression += this.tyPeList[item19.resultParams.params1.previousResult].ifFunctionList[this.tyPeList[item19.resultParams.params1.previousResult].ifFunctionList.length-1].formula + '，'
                    }
                }
            } catch (error) {
                // 处理错误的代码
            }


            // 带入条件结果
            if(item19.resultParams.params1.type == '带入条件结果'){
                if(item19.resultParams.params1.previousConditionResult || item19.resultParams.params1.previousConditionResult == 0){
                    expression += item.ifFunctionList[item19.resultParams.params1.previousConditionResult].formula +'，'
                }
            }

            if(item19.resultParams.params1.type == '填值'){
                expression += item19.resultParams.params1.value + '，'
            }

            // 带入步骤结果
            try {
                if (item19.resultParams.params2.type == '带入步骤结果') {
                    if (item19.resultParams.params2.previousResult || item19.resultParams.params2.previousResult == 0) {
                        expression += this.tyPeList[item19.resultParams.params2.previousResult].ifFunctionList[this.tyPeList[item19.resultParams.params2.previousResult].ifFunctionList.length-1].formula
                    }
                }
            } catch (error) {
                // 处理错误的代码
            }

            // 带入条件结果
            if(item19.resultParams.params2.type == '带入条件结果'){
                if(item19.resultParams.params2.previousConditionResult || item19.resultParams.params2.previousConditionResult == 0){
                    expression += item.ifFunctionList[item19.resultParams.params2.previousConditionResult].formula
                }
            }

            if(item19.resultParams.params2.type == '填值'){
                expression += item19.resultParams.params2.value
            }

            expression += '）'
            item19.formula = expression;
            return expression;

        }

这边用到了try catch 防止报错导致程序不能运行，我只添加了报错(报错是因为数据没拿到)的条件下，这样能完美解决问题。并且方便拿到每个条件的数据，我认为这个方法比较好。

**

重构后代码：

重构后的代码将逻辑拆分为几个小函数，并且在 conditionResultPreview 函数中调用这些小函数处理相应的任务，并且针对空值和未定义的情况进行了检查。
使代码更加模块化和易于维护，同时可以提高代码的可复用性。

		conditionResultPreview(item19, item) {
            let expression = "IF（";
            const { variable = {}, condition = {}, constant = {} } = item19.expression || {};

            expression += this.getIndicatorOrValue(variable);
            expression += this.getConditionSymbol(condition.type);
            expression += this.getIndicatorOrValue(constant);

            expression += this.addStepOrConditionResult(item19.resultParams.params1, this.tyPeList, item);
            expression += this.addStepOrConditionResult(item19.resultParams.params2, this.tyPeList, item);

            expression += '）';
            item19.formula = expression;
            return expression;
        },

        getIndicatorOrValue(obj) {
            if (obj.type === '指标值' || obj.type === '指标分值') {
                return obj.indicatorInfo?.name ?? '';
            } else if (obj.type === '填值') {
                return obj.value ?? '';
            }
            return '';
        },

        getConditionSymbol(type) {
            switch (type) {
                case '小于': return ' < ';
                case '大于': return ' > ';
                case '小于等于': return ' <= ';
                case '大于等于': return ' >= ';
                case '等于': return ' = ';
                default: return '';
            }
        },

        addStepOrConditionResult(params, tyPeList, item) {
            if (params.type === '带入步骤结果' && params.previousResult != null && tyPeList && tyPeList[params.previousResult]) {
                return `，${tyPeList[params.previousResult].ifFunctionList[tyPeList[params.previousResult].ifFunctionList.length - 1].formula}`;
            } else if (params.type === '带入条件结果' && params.previousConditionResult != null && item && item.ifFunctionList) {
                return `，${item.ifFunctionList[params.previousConditionResult].formula}`;
            } else if (params.type === '填值') {
                return `，${params.value ?? ''}`;
            }
            return '';
        }
XJ_Plus
关注
专栏目录
Javascript运算符与数学运算公式
weixin_46376652的博客
04-06 2080
一、加号 + <script> //隐式转换 console.log(2+true); //true -> 1，结果为3 console.log(2+false); //false -> 0，结果为2 console.log(2+undefined); //undefined -> undefined，结果为NaN console.log(2+null); //nul
基于纯js脚本的数学公式计算源码
07-13
基于纯js脚本的数学公式计算工具，可以在客户端计算复杂的数学公式，对b/s报表公式计算有一定得帮助
一个基于纯js脚本的数学公式表达式计算工具源码
09-18
JavaScript Mathematical Expression Evaluator是一个基于纯js脚本的数学公式表达式计算工具，可以在客户端计算复杂的数学表达式，功能强大，调用方便！
JavaScript简单拖拽
c__dreamer的博客
03-30 333
        说到交互，基本上是在JavaScript语言中占据了大分量，JavaScript行为 为页面增添了光彩，而现在大多数网站都是运用交互式的，拖拽在交互这个大系统中也是很有重量的。        把一个东西放在大盒子里移动拖拽，计算拖拽公式是非常重要的，基本上明白了拖拽公式就可以写出拖拽代码了。               假设我们把物体1 拖拽到物体2 的地方，此刻可以知道拖拽的步骤...
js公式
weixin_34082854的博客
12-26 286
斐波那契数列(递归案例链接：https://juejin.im/post/5c2308abf265da615304ce41) /* * 斐波那契数列 * 第一位和第二位都是1从第三位开始当前项是前两项的和 * */ //求第N位的数量 //1 1 2 3 5 8 13 21 //递归 function feiBoNaQie(item){ if(item<2){ return...
js数学表达式计算,js实现公式计算
chatgpt001的博客
11-29 956
1、加号运算符中，有字符串参与运算会发生字符串拼接，无字符串参与运算则其他类型的数据会转换为数字类型参与运算，无法转换则结果显示NaN；2、其他运算符中，数字类型以外的其他数据类型都会转换为数字类型参与运算，无法转换则结果显示NaN；
JS中常见的算法
肉嘟嘟的博客
08-08 1126
常见算法 1累加/累积 累加：将一系列的数据加到一个变量里面。最后的达到累加的结果 比如：将1到100的数求累加和。 小球从高处落下，每次返回到原来的一半，求第十次小球落地时小球走过的路程。 var h = 100; var s = 0; for(var i=0;i<10;i++){ h = h/2; s += h; } s = s*2 +100; 累积：将一系
js实现 一些数学公式(待补充)
01-06
1、已知直线上两点求直线的一般式...这只是点绕原点的计算公式，计算向量时要先把起点假设为原点。顺时针θ不用变成负号，直接带进去就好了 而且， 比较适合 向量，因为它们可以平移评议。。。。然后只要判断旋转后，
CRUD-Expressjs：自动生成公式的合作伙伴关系公式
02-18
在自动生成公式方面，我们可以考虑设计一个中间件或者服务层，用于处理复杂的业务逻辑。例如，我们可以定义一个函数，根据合作伙伴的状态和类型自动计算出合作关系的公式，如分成比例或合作期限。这个函数可以被路由...
drawLaTex:显示LaTex公式，并生成base64的图片。
05-03
本来想使用MathJax来生成LaTex公式，后来发现两个问题： MathJax太大； 生成的公式不是图片，无法存放在其它环境。 LaTex 本项目使用MathJax来渲染LaTex公式。 MathJax的删减 git拿下来的MathJax足足有152M。 根据...
引入MathJax.js把图片公式转为一般文本公式
10-31
一些编辑器最后生成的公式都是图片的样式，我们复制粘贴不出来具体的样式。我们需要用这个插件来转化图片公式
js实现点击生成随机div
10-15
关于随机数生成，`random`函数实现了这个功能，它接受两个参数，分别表示随机数的最小值和最大值，然后通过`Math.random`生成一个0到1之间的随机数，然后通过公式`Math.floor(Math.random()*(max-min)+min)`计算出一...
js生成随机数方法和实例
10-20
理解这个基础是掌握JavaScript生成随机数的关键。以下是对不同随机数生成需求的详细解释： 1. **全闭区间全闭区间[n, m]** 要生成全闭区间[n, m]内的整数，常用公式是 `Math.floor(Math.random() * (m - n + 1)) +...
一篇搞定JS的位运算（公式+力扣真题）--- 持续更新
weixin_46726346的博客
01-13 1811
位操作（Bit Manipulation）是程序设计中对位模式或二进制数的一元和二元操作。在许多古老的微处理器上，位运算比加减运算略快，通常位运算比乘除法运算要快很多。在现代编程语言中，情况并非如此，很多编程语言的解释器都会基本的运算进行了优化，因此我们在实际开发中可以不必做一些编译器已经帮我们做好的优化，而就写出代码本身所要表现的意思。在对位运算的学习过程中，可以锻炼写代码的思路，同时在面试过程中，如果使用位运算来对问题进行解决，也会很加分。
js常用运算符和表达式
一步一个脚印，踏实努力，向着目标前进
06-15 991
用于对数字进行二进制位的操作，包括按位与（&）、按位或（|）、按位异或（^）、按位非（~）、左移（）等。用于将值赋给变量，包括等号（=）、加等于（+=）、减等于（-=）、乘等于（*=）、除等于（/=）等。用于执行基本的数学运算，包括加法（+）、减法（-）、乘法（*）、除法（/）、取余（%）等。==）、大于（>）、小于（=）、小于等于（
js数值计算公式是什么,js计算数学表达式
chatgpt001的博客
11-17 640
例如:每天需要完成8个小时，480分钟的工作时间, 求每时每刻的工作完成率问题，百分比后面保留两位小数(四舍五入)。思路:工作时间除以总时间，再乘以10000，执行四舍五入的方法，再除以100，就是得到完成率了。//总工作时长//已经工作时长//工作完成率S//输出: 20.83%
javascript里将函数名字符串转为函数并执行
热门推荐
左直拳的马桶_日用桶
12-09 1万+
javascript中，如何将函数名字符串转变为函数并执行？“用 eval ”，西蒙说。咋弄呢？类似地：var mess = "hello world!"; var func = "alert"; var f = eval(func + "(mess);");//hello world!可以写得复杂点：var frameRightSub = document.getElementById("fram
常用的正则表达式
wuqi5328的博客
07-12 622
数字 1. 数字：^[0-9]*$ 2. n位的数字：^\d{n}$ 3. 至少n位的数字：^\d{n,}$ 4. m-n位的数字：^\d{m,n}$ 5. 零和非零开头的数字：^(0|[1-9][0-9]*)$ 6. 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$ 7. 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$ 8. 正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$ 9. 有两位小数的正实数：^[
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 871
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
js生成随机完全平方公式题目
06-11
好的，以下是一种生成随机完全平方公式题目的方法： ```javascript function generateQuestion() { const a = Math.floor(Math.random() * 10) + 1; const b = Math.floor(Math.random() * 10) + 1; const c = a * b; return `求解 ${a}x² + ${2 * b}x + ${b * b} = ${c}`; } ``` 这个函数会生成一个类似于 "求解 3x² + 10x + 9 = 27" 的题目，其中 x 为未知数，a、b、c 都是随机生成的正整数。该题目的解为 x = 3。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值