前端未使用变量检查技能

技能描述

在修改前端页面时，需要检查是否有声明但未使用的变量，避免ESLint警告和代码质量问题。

常见场景

1. 解构赋值中的未使用变量

问题: 在函数参数解构或对象解构时，声明了变量但未实际使用
示例: function({ usedVar, unusedVar }) 中只使用了 usedVar
解决方案: 只解构需要使用的变量，如 function({ usedVar })

2. 函数参数中的未使用变量

问题: 函数定义了参数但未在函数体内使用
示例: function(param1, param2) 中只使用了 param1
解决方案: 移除未使用的参数或添加下划线前缀表示故意未使用

3. 循环中的未使用索引

问题: 在 forEach, map 等循环中声明了索引参数但未使用
示例: arr.forEach((item, index) => {...}) 中未使用 index
解决方案: 如果不需要索引，使用 (item) => 或使用下划线 (item, _) =>

4. 事件处理函数中的未使用参数

问题: 事件处理函数接收了多个参数但只使用部分参数
示例: handleEvent({ column, prop, order }) 只使用了 prop 和 order
解决方案: 只解构需要的参数

检查清单

在修改前端页面时，请检查以下内容：

函数参数中是否有未使用的变量
解构赋值中是否有未使用的属性
事件处理函数参数是否全部使用
循环函数中的索引/键参数是否使用
声明的局部变量是否都已使用
从API或props中解构的变量是否都已使用

ESLint警告处理

常见ESLint警告：

'variable' is defined but never used
'parameter' is defined but never used
Expected to return a value in function

修复技巧

移除未使用变量: 直接从解构或参数列表中移除
使用下划线前缀: 对于故意不使用的参数，使用 _ 前缀
重构函数签名: 简化函数参数以匹配实际使用需求
注释说明: 对于暂时未使用的变量添加注释说明未来用途

测试验证

修改完成后，执行以下验证：

检查浏览器控制台是否有ESLint相关警告
运行项目的lint命令（如 npm run lint）
确认功能正常工作且无新增警告