一次跨端数据类型兼容问题的排查与解决（判断类型）

        在前端开发中，"PC 端正常，移动端报错" 的问题总是让人头疼。最近我就遇到了一个典型案例：同一套代码在电脑上运行顺畅，到了手机测试机上却突然报错，最终排查发现竟是数据类型在不同终端不一致导致的。

目录

问题现象：诡异的跨端差异

解决方案

代码解析：层层递进的兼容处理

---

问题现象：诡异的跨端差异

        项目中有一个【删除】事件。在 PC 端测试时，一切正常，删除操作顺畅无报错。但当在手机测试机上运行时，却出现了报错，导致删除功能无法正常使用。

        通过控制台打印日志排查，发现问题出在row.batchPropertyList这个数据上。在 PC 端，它是一个数组类型，而在手机端测试时，它竟然是一个对象类型！

       浏览器运行--参数如图1 ，但是手机端就报错（如图2）,手机端打印如图3。

解决方案

针对这个问题，我对删除事件进行了优化，添加了数据类型判断和转换逻辑：

handleRowDelete(row) {
	console.log('row', row);
	if (row.batchPropertyList) {
		if (typeof row.batchPropertyList === 'object') {
			row.batchPropertyList = Object.values(row.batchPropertyList)
			let tempBatch = row.batchPropertyList
			if (tempBatch.length > 0) {
				tempBatch.forEach((item) => {
				if (typeof item.labels === 'object') {
					item.labels = Object.values(item.labels)
				}
			})
		}
	}
	if (!Array.isArray(row.batchPropertyList) && typeof row.batchPropertyList === 'string') {// 不是数组是串
	console.log('batchPropertyList-is=string')
	const trimmedA = row.batchPropertyList.trim();
	if (trimmedA === '' || trimmedA === '[]') {
		row.batchPropertyList = [];
	} else {
		try {
           // 尝试JSON解析
          let result = JSON.parse(row.batchPropertyList);
          row.batchPropertyList = result;
         } catch (error) {
            // 解析失败时兜底为数组
            console.error('解析batchPropertyList失败', error);
            row.batchPropertyList = [];
          }
	}
   }
  }
}

代码解析：层层递进的兼容处理

1.  第一层判断--处理对象类型：通过Object.values统一转为数组结构

2. 第二层判断--处理字符串：

• 使用trim去除字符串首尾空格，再判断是否为空或'[]'，若是则直接转为空数组

• 解决 “数据以 JSON 字符串形式返回” 的情况，将其解析为真正的数组