需求产生的原因是:后端有一些数据是从旧平台直接迁移过来的,新平台需要根据迁移过来的数据,自动生产新的数据格式。

  操作符有如下几种,分项、支路和数字配合操作符可以自定义组合,例如 [000000000001]+<00001>,带[号的表示type是branch,带<表示type是sub。

 // 操作符列表
operatorList: [
'+',
'-',
'*',
'/',
'(',
')',
'inputNumber'
],

  举例:[000000000001]+<00001>

  解析为:
   [{"type":"branch","name":"1#","value":92501,"electricAddr":"000000000001"},{"type":"+"},{"type":"sub","name":"电电电","value":69640,"number":"00001"}]

  部分实现代码如下:

  data () {
return {
// 操作符列表
operatorList: [
'+',
'-',
'*',
'/',
'(',
')',
'inputNumber'
],
filterOperator: [], //操作符过滤和排序列表
}
method:{
//操作符排序和过滤
geOoperatorFilter (expStr) {
let arr = this.operatorList.map(n => {
return { index: expStr.indexOf(n), val: n };
});
arr = arr.filter(f => f.index > -1);
arr.sort(this.sortId);
this.filterOperator = arr.map(m => {
return m.val
});
// console.log('this.filterOperator :>> ', this.filterOperator);
},
sortId (a, b) {
return a.index - b.index;//由低到高
},
// true:数值型的,false:非数值型
myIsNaN (value) {
return typeof value === 'number' && !isNaN(value);
},
//[000000000001]+[11101110011]-<1002>*<c3110>
reveserExpress (expStr) {
this.geOoperatorFilter(expStr);
let arr = [];
this.analysisData(arr, expStr);
// console.log('arr :>> ', arr);
let jsonArr = [];
arr.forEach(n => {
if (n.includes('[')) {
jsonArr.push({ "type": "branch", "name": "", "value": '', "electricAddr": n.replace('[', '').replace(']', '') });
}
if (n.includes('<')) {
jsonArr.push({ "type": "sub", "name": "", "value": '', "number": n.replace('<', '').replace('>', '') });
}
if (this.filterOperator.includes(n)) {
jsonArr.push({ "type": n });
}
//如果是个数字
if (this.myIsNaN(n)) {
jsonArr.push({ "type": 'number', "value": n });
}
});
// console.log('jsonArr :>> ', jsonArr);
this.form.expressionJson = JSON.stringify(jsonArr);
},
//是否包含分隔符
containOperator (word) {
return this.filterOperator.some(f => word.includes(f));
},
analysisData (arr, expStr) {
// debugger;
this.filterOperator.forEach(n => {
if (expStr.includes(n)) {
// debugger;
let tempArr = expStr.split(n);
tempArr.forEach((t, index) => {
//不包含分隔符
if (!this.containOperator(t) && !arr.includes(t)) {
// debugger;
arr.push(t);
if (index < tempArr.length - 1) {
arr.push(n);
}
} else {
// debugger;
this.analysisData(arr, t);
}
})
}
})
}, }

  测试:

 let expStr = '[000000000001]-[11101110011]/<1002>+<c3110>';
this.reveserExpress(expStr);

  运行结果:

[{"type":"branch","name":"","value":"","electricAddr":"000000000001"},{"type":"-"},{"type":"branch","name":"","value":"","electricAddr":"11101110011"},
{"type":"/"},{"type":"sub","name":"","value":"","number":"1002"},{"type":"+"},{"type":"sub","name":"","value":"","number":"c3110"}]

  虽然很快实现了功能,可是写这样的代码总感觉好恶心,可又不知道该怎么办?好想打人,可是没有发泄对象,只好扇自己一巴掌!

  众里寻他千百度,猛一回头,卧艹,那人却在一个人过马路~

记录vue和js操作——尽管很快实现了功能,可总感觉到不爽的更多相关文章

  1. jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下.   复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...

  2. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

  3. vue+node.js+webpack开发微信公众号功能填坑——组件按需引入

    初次开发微信公众号,整体框架是经理搭建,小喽喽只是实现部分功能,整体页面效果 整个页面使用两个组件:布局 FlexBox,搜索框 Search,demo文档 http://vue.ydui.org/d ...

  4. vue.js操作元素属性

    vue动态操作div的class 看代码: <!doctype html> <html lang="en"> <head> <meta c ...

  5. 2. Vue语法--插值操作&动态绑定属性 详解

    目录 1. 设置vue模板 2. vue语法--插值操作 3. 动态绑定属性--v-bind 一. 设置vue模板 我们经常新建一个vue项目的时候, 会写如下的一段代码 <!DOCTYPE h ...

  6. JS操作select标签

    主要利用这个来实现省市区三级联动的 我利用的是ajax,每一次onchange事件都改变相对应的select中的option,数据全是ajax请求服务器查询数据库而来的,效果还可以,在本地测试的时候速 ...

  7. 记录vue中一些有意思的坑

    记录vue中一些有意思的坑 'message' handler took 401ms 在出现这个之前,我一直纠结于 是如何使用vue-router或者不使用它,通过类似的v-if来实现.结果却出现这个 ...

  8. 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. js操作history

    js操作history pushState pushState只会在当前history中添加一条记录,并不会刷新浏览器 history.pushState({}, "my title&quo ...

  10. Node.js 操作Mongodb

    Node.js 操作Mongodb1.简介官网英文文档  https://docs.mongodb.com/manual/  这里几乎什么都有了MongoDB is open-source docum ...

随机推荐

  1. [Cryptocurrency] (XMR) Monero GUI 连接远程节点 操作方式

    Monero 官网下载的钱包,在 高级设置 的节点里支持 "本地节点" 和 "远程节点". 本地节点就是同步区块链数据到本地电脑,安全性高,占用空间大. 远程节 ...

  2. K8s控制器---Statefulset(11)

    一.Statefulset概述 1.1 Statefulset控制器:概念和原理解读 StatefulSet 是为了管理有状态服务的问题而设计的 扩展: 有状态服务? StatefulSet 是有状态 ...

  3. QT使用外部库

    一.简述 当QT使用第三方库时,编译会报错,哪怕是使用linux下的软件库时都有可能报错,所以在使用的时候需要添加一下外部库的路径,这里我以mosquitto的库函数为例,主要的导入方式有两种. 二. ...

  4. 记录一个解决固定定位内容不能滚动的方法(vant组件tab必用的css样式)

    vant组件下边是循环出来的,在开发中这部分必定是个单独的组件,内容溢出时添加滚动的样式,当然这个需要写在外部引入的自定义的vant组件样式当中 .van-tabs__content{ width: ...

  5. 轻量级.net standard微信支付登录Nuget开源库

    我个人编写的库,在我个人网站,小程序等很多地方都在使用中,大家可以搜索小程序 什邡市宅猫君网络工作室 或者到我的网站 store.zhaimaojun.cn 去体验支付和登录效果. 本库主要实现了na ...

  6. 02. rails安装

    rails安装 ruby 1.8.6 对应的rails是2.3.2 Ruby 1.8.7 或 1.9.2 对应的rails 2.3.x ruby1.9.3,对应的rails是3.2.12, ruby2 ...

  7. Android 开发中脚本 提高效率工具

    在安卓开发中我们常常需要获取日志,通常我们可以通过adb logcat 命令获取日志.同样,我没有可以通过脚本获取.其实质也是通过adb命令实现,只是把命名写入bat文件中,在win系统中直接双击就可 ...

  8. [BZOJ4358]permu线段树+莫队

    先放代码 晚上补(争取) [BZOJ4358]permu 线段树+莫队做法 序列操作,多次询问,无修,标准的莫队. 在如何在不同区间内转移的问题上,我选择用线段树来维护(没听xfg讲回滚莫队不行啊) ...

  9. (二)Redis 数据类型与结构

    1.值的数据类型 Redis "快"取决于两方面,一方面,它是内存数据库,另一方面,则是高效的数据结构.Redis 键值对中值的数据类型,也就是数据的保存形式有5种:String( ...

  10. MegaCli64查看磁盘损坏,错误个数统计情况

    如下,两个命令,是磁盘濒临崩坏,比如存在扇区损坏之类的事情发生.咨询的浪潮热线,报sn.他们的临界值是500,我们监控脚本是200告警.Predictive Failure Count 这个的数字比M ...