记录vue和js操作——尽管很快实现了功能,可总感觉到不爽
需求产生的原因是:后端有一些数据是从旧平台直接迁移过来的,新平台需要根据迁移过来的数据,自动生产新的数据格式。


操作符有如下几种,分项、支路和数字配合操作符可以自定义组合,例如 [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操作——尽管很快实现了功能,可总感觉到不爽的更多相关文章
- jquery.cookie.js 操作cookie实现记住密码功能的实现代码
jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下. 复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...
- vue+node.js+webpack开发微信公众号功能填坑——v -for循环
页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...
- vue+node.js+webpack开发微信公众号功能填坑——组件按需引入
初次开发微信公众号,整体框架是经理搭建,小喽喽只是实现部分功能,整体页面效果 整个页面使用两个组件:布局 FlexBox,搜索框 Search,demo文档 http://vue.ydui.org/d ...
- vue.js操作元素属性
vue动态操作div的class 看代码: <!doctype html> <html lang="en"> <head> <meta c ...
- 2. Vue语法--插值操作&动态绑定属性 详解
目录 1. 设置vue模板 2. vue语法--插值操作 3. 动态绑定属性--v-bind 一. 设置vue模板 我们经常新建一个vue项目的时候, 会写如下的一段代码 <!DOCTYPE h ...
- JS操作select标签
主要利用这个来实现省市区三级联动的 我利用的是ajax,每一次onchange事件都改变相对应的select中的option,数据全是ajax请求服务器查询数据库而来的,效果还可以,在本地测试的时候速 ...
- 记录vue中一些有意思的坑
记录vue中一些有意思的坑 'message' handler took 401ms 在出现这个之前,我一直纠结于 是如何使用vue-router或者不使用它,通过类似的v-if来实现.结果却出现这个 ...
- 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js操作history
js操作history pushState pushState只会在当前history中添加一条记录,并不会刷新浏览器 history.pushState({}, "my title&quo ...
- Node.js 操作Mongodb
Node.js 操作Mongodb1.简介官网英文文档 https://docs.mongodb.com/manual/ 这里几乎什么都有了MongoDB is open-source docum ...
随机推荐
- [FAQ] IDE: Goland 注释符后面添加空行
如图所示,Code Style 对应语言 Go 勾选上注释空行的选项. Refer:Goland官网 Goland下载 Link:https://www.cnblogs.com/farwish/p/1 ...
- 11个Python循环技巧
本文分享自华为云社区<Python中的循环技巧指南>,作者:柠檬味拥抱. 当我们处理数据时,有时候需要创建多个列表以存储不同类型或不同条件下的数据.在Python中,我们可以利用循环来快速 ...
- Fast Möbius Transform 学习笔记 | FMT
小 Tips:在计算机语言中 \(\cap\) = & / and, \(\cup\) = | / or First. 定义 定义长度为 \(2^n\) 的序列的 and 卷积 \(A = B ...
- 01 Xpath简明教程(十分钟入门)
目录 Xpath简明教程(十分钟入门) Xpath表达式 Xpath节点 节点关系 Xpath基本语法 1) 基本语法使用 2) xpath通配符 3) 多路径匹配 Xpath内建函数 Xpath简明 ...
- go 操作 Excel
文档地址: https://xuri.me/excelize/zh-hans/ package main import ( "fmt" "github.com/xuri/ ...
- laravel-cms学习笔记
学习地址: https://www.houdunren.com/edu/video/12045 laravel 文档地址: https://gitee.com/houdunren/code/blob/ ...
- C#.Net筑基-模式匹配汇总
01.模式匹配概述 从C#7开始支持的 模式匹配 语法(糖,挺甜),可非常灵活的对数据进行条件匹配和提取,经过多个版本的完善,已经非常强大了. C# 支持多种模式,包括声明.类型.常量.关系.属性.列 ...
- JDK源码阅读-------自学笔记(二十一)(java.util.ArrayList详细版集合类)
一.前景提要 本人经历了IT行业的多种类型企业,外包/创业小公司/中型公司,一步步成长起来,现在可以给大家透露下为什么进大企业在IT行业是重要的: 在外包公司,你要做的就是对接别人写好的接口,然后按照 ...
- linux sort命令的重要用法:按分隔符/字母/数字/月份进行排序
1.指定分隔符,以某一列进行排序并输出 #-t 指定一个分隔符 #-k 后面跟数字,指定按第几列进行排序 #-r 反序排序(升序变成降序) #按":"做分隔符,以第3列,也就是用户 ...
- QGIS开发笔记(二):Windows安装版二次开发环境搭建(上):安装OSGeo4W运行依赖其Qt的基础环境Demo
前言 使用QGis的目的是进行二次开发,或者说是融入我们的应用(无人车.无人船.无人机),本片描述搭建QGis二次基础开发环境,由于实在是太长了,进行了分篇: 上半部分:主要是安装好后,使用QtC ...