基于MQTT通讯UNIapp程序解析JSON数据

1、解析函数无法解析{"ligh":0010}不规范的JSON数

//解析函数无法解析{"ligh":0010}不规范的JSON数据

if (e.method === 'receive') {//e 是 MQTT 事件对象,e.method 表示事件类型。当接收到 MQTT 消息时,method 的值是 'receive'

try {//try 语句开始一个错误处理块。如果块内的代码出现错误,会跳转到 catch 块,防止程序崩溃。

const data = typeof e.data === 'string'//检查 e.data 的数据类型是否是字符串,

? JSON.parse(e.data)//是字符串,使用 JSON.parse() 将其解析为 JavaScript 对象

: e.data//如果不是字符串(可能已经是对象),直接使用原值

if (data.ligh !== undefined) this.ligh = Number(data.ligh)//符串 "0010" → 数字 10(自动去掉前导0)

if (data.mode !== undefined) this.mode = Number(data.mode)

} catch (err) {//如果 try 块中的代码出现错误(比如 JSON 格式错误),会跳转到这里

console.error('JSON 解析失败', err)

}

}

2、修改:这个方案能稳定处理 {"ligh":0010} 这种格式,并且有很好的兼容性

if (e.method === 'receive') {

console.log('收到数据:', e.data)

// 将数据转为字符串处理

const rawData = String(e.data)

// 专用解析函数

const parseHardwareFormat = (str) => {

const result = {}

// 匹配 ligh:0010 或 "ligh":0010

const lighMatch = str.match(/ligh["]?\s*[:=]\s*0*(\d+)/i)// (只支持整数)

if (lighMatch) {

result.ligh = parseInt(lighMatch[1], 10)

}

// 匹配 mode:1 或 "mode":1

const modeMatch = str.match(/mode["]?\s*[:=]\s*0*(\d)/i)// (只支持整数)

if (modeMatch) {

result.mode = parseInt(modeMatch[1], 10)

}

return result

}

// 解析数据

const data = parseHardwareFormat(rawData)

console.log('解析结果:', data)

// 更新到组件

if (data.ligh !== undefined) this.ligh = data.ligh

if (data.mode !== undefined) this.mode = data.mode

}

程序解析:

const lighMatch = str.match(/ligh["]?\s*[:=]\s*0*(\d+)/i)解释下

1. //i

  • /:正则表达式的开始和结束分隔符

  • /i:忽略大小写标志,ligh 可以匹配 lighLIGHLigh

2. ligh

  • 匹配字面字符串 "ligh"

  • 因为 /i 标志,也匹配 LIGHLigh

3. ["]?

  • ["]:匹配一个双引号字符 "

  • ?:表示前面的字符可选(0次或1次)

  • 作用:匹配可能有引号也可能没有的情况

  • 示例:

    • "ligh" ✓(有引号)

    • ligh ✓(没有引号)

4. \s*

  • \s:匹配任意空白字符(空格、制表符、换行等)

  • *:表示前面的字符出现0次或多次

  • 作用:匹配键值对之间的空白

  • 示例:

    • ligh:0010 ✓(没有空格)

    • ligh :0010 ✓(有空格)

    • ligh :0010 ✓(多个空格)

5. [:=]

  • [:=]:字符集合,匹配 :=

  • 作用:匹配分隔符

  • 示例:

    • ligh:0010 ✓(使用冒号)

    • ligh=0010 ✓(使用等号)

6. \s*

  • 再次匹配可能的空白字符

  • 示例:

    • ligh: 0010 ✓(分隔符后有空格)

    • ligh:0010 ✓(没有空格)

7. 0*

  • 0:匹配数字0

  • *:0次或多次

  • 作用:匹配前导零

  • 示例:

    • 0010 → 匹配 00

    • 10 → 匹配空(没有前导0)

    • 0 → 匹配 0

8. (\d+)

  • \d:匹配数字(0-9)

  • +:1次或多次

  • ():捕获分组,提取匹配的内容

  • 作用:捕获实际的数值部分(去掉前导0后的数字)

  • 示例:

    • 0010 → 捕获 10

    • 4100 → 捕获 4100

    • 0 → 捕获 0

测试结果:

复制代码
"{"ligh":0010}" → 匹配组: "10" → 数值: 10
"{ligh:0020}" → 匹配组: "20" → 数值: 20
""ligh":0030" → 匹配组: "30" → 数值: 30
"ligh=0040" → 匹配组: "40" → 数值: 40
"ligh : 0050" → 匹配组: "50" → 数值: 50
"LIGH:0060" → 匹配组: "60" → 数值: 60
""LIGH" = 0070" → 匹配组: "70" → 数值: 70
"ligh:0" → 匹配组: "0" → 数值: 0
"ligh:100" → 匹配组: "100" → 数值: 100

3、如果要增加解析{"ligh":0.12}在这种浮点数呢

//支持不规则JSON整数与浮点数

if (e.method === 'receive') {

console.log('收到数据:', e.data)

// 将数据转为字符串处理

const rawData = String(e.data)

// 专用解析函数

const parseHardwareFormat = (str) => {

const result = {}

// 匹配 ligh:0010 或 "ligh":00.10

const lighMatch = str.match(/ligh["]?\s*[:=]\s*(\d*\.?\d+)/i)// (支持整数和小数)

if (lighMatch) {

// 使用 parseFloat 自动处理整数和小数

this.ligh = parseFloat(lighMatch[1])

console.log('光照值:', this.ligh)

}

// 匹配 mode:1 或 "mode":1

// mode 通常用整数

const modeMatch = rawData.match(/mode["]?\s*[:=]\s*(\d+)/i)

if (modeMatch) {

this.mode = parseInt(modeMatch[1], 10)

}

return result

}

// 解析数据

const data = parseHardwareFormat(rawData)

console.log('解析结果:', data)

// 更新到组件

if (data.ligh !== undefined) this.ligh = data.ligh

if (data.mode !== undefined) this.mode = data.mode

}

相关推荐
华玥作者21 小时前
[特殊字符] VitePress 对接 Algolia AI 问答(DocSearch + AI Search)完整实战(下)
前端·人工智能·ai
Mr Xu_21 小时前
告别冗长 switch-case:Vue 项目中基于映射表的优雅路由数据匹配方案
前端·javascript·vue.js
前端摸鱼匠21 小时前
Vue 3 的toRefs保持响应性:讲解toRefs在解构响应式对象时的作用
前端·javascript·vue.js·前端框架·ecmascript
lang2015092821 小时前
JSR-340 :高性能Web开发新标准
java·前端·servlet
缘空如是1 天前
基础工具包之JSON 工厂类
java·json·json切换
好家伙VCC1 天前
### WebRTC技术:实时通信的革新与实现####webRTC(Web Real-TimeComm
java·前端·python·webrtc
未来之窗软件服务1 天前
未来之窗昭和仙君(六十五)Vue与跨地区多部门开发—东方仙盟练气
前端·javascript·vue.js·仙盟创梦ide·东方仙盟·昭和仙君
嘿起屁儿整1 天前
面试点(网络层面)
前端·网络
VT.馒头1 天前
【力扣】2721. 并行执行异步函数
前端·javascript·算法·leetcode·typescript
phltxy1 天前
Vue 核心特性实战指南:指令、样式绑定、计算属性与侦听器
前端·javascript·vue.js