前端代码CR小知识点汇总

数据为空时：对象，可以传入 null；number 传入 undefined。
颜色相关放到 scss/less/css 文件里，方便后续主题修改或其他统一修改
表单校验或复杂逻辑放到 try catch 里，避免产生无效报错
- "最小范围" 包裹：只包裹 "可能抛出异常的代码段"，而非整个函数，避免捕获无关错误
- "明确处理" 而非 "静默忽略"：捕获异常后，必须有具体动作（如提示用户、记录日志、使用默认值），不能只写 catch (err) {}（会导致问题隐藏）。
- 核心：针对 "可能发生意外异常的代码段"（如数据转换、动态逻辑、依赖外部资源的操作），捕获后进行明确处理（提示用户、日志记录、降级策略）
合理减少可选链（?.）的使用
js 复制代码
```
// 原始代码（过度依赖可选链）
const fetchUser = async () => {
  const res = await api.getUser();
  const username = res?.data?.user?.profile?.name; // 冗余，且掩盖数据结构问题
  const age = res?.data?.user?.age ?? 0;
};
```
- 明确 "必须存在" 与 "可能缺失"：只对 "设计上允许缺失" 的属性用可选链，对 "必须存在" 的属性通过校验 / 类型约束确保存在，主动暴露异常。
- 控制可选链长度：避免连续 3 个以上的可选链（如a?.b?.c?.d），这种代码往往暗示数据结构设计不合理，应重构（如拆分对象、提前校验）。
三目运算符最多使用到两层
JSX 的 Map函数返回Div 必须添加 key（无论是否出现增删场景），且禁止使用 index 索引当作 key 的值
减少魔法数字的使用，避免出现在代码中没有明确含义的数字。例如 value.length > 20
常量Map统一管理
- z-index 需要放到一个map里统一管理，避免层级冲突
  js 复制代码
```
const Z_INDEX_MAP = {
	DRAWER: 100,
	FORM_FOOTER: 200
}
```
- 页面url的参数需要统一管理
  js 复制代码
```
//url ?id=123&is_edit
const URL_PARAMS_MAP = {
	ID:'id',
	IS_EDIT:"is_edit"
}
```
- 时间相关常量
- 权限相关常量
- 操作符相关常量
- 步骤配置等

解构赋值时右侧如果有可能为空要给默认值，防止报错

js 复制代码

const obj = { value: null };
// 错误写法：obj.value 是 null，无法解构
const { a, b } = obj.value; 
// 直接抛出错误：TypeError: Cannot destructure property 'a' of 'obj.value' as it is null.
-----解决-----
// 仅当 obj.value 是 null/undefined 时，才用 {} 兜底
const { a, b } = obj.value ?? {}; // 或者obj.value || {}