# 前端未使用变量检查技能

## 技能描述
在修改前端页面时，需要检查是否有声明但未使用的变量，避免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`

## 修复技巧

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

## 测试验证

修改完成后，执行以下验证：
- 检查浏览器控制台是否有ESLint相关警告
- 运行项目的lint命令（如 `npm run lint`）
- 确认功能正常工作且无新增警告