前端代码CR小知识点汇总

1. 数据为空时：对象，可以传入 null；number 传入 undefined。
2. 颜色相关放到 scss/less/css 文件里，方便后续主题修改或其他统一修改
3. 表单校验或复杂逻辑 放到 try catch 里，避免产生无效报错
   • “最小范围” 包裹：只包裹 “可能抛出异常的代码段”，而非整个函数，避免捕获无关错误
   • “明确处理” 而非 “静默忽略”：捕获异常后，必须有具体动作（如提示用户、记录日志、使用默认值），不能只写 catch (err) {}（会导致问题隐藏）。
   • 核心：针对 “可能发生意外异常的代码段”（如数据转换、动态逻辑、依赖外部资源的操作），捕获后进行明确处理（提示用户、日志记录、降级策略）
4. 合理减少可选链（?.）的使用

   // 原始代码（过度依赖可选链）
   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），这种代码往往暗示数据结构设计不合理，应重构（如拆分对象、提前校验）。
5. 三目运算符最多使用到两层
6. JSX 的 Map函数返回Div 必须添加 key（无论是否出现增删场景），且禁止使用 index 索引当作 key 的值
7. 减少魔法数字的使用， 避免出现在代码中没有明确含义的数字。例如 value.length > 20
8. 常量Map统一管理
   • z-index 需要放到一个map里统一管理，避免层级冲突

     const Z_INDEX_MAP = {DRAWER: 100,FORM_FOOTER: 200
     }
     

   • 页面url的参数需要统一管理

     //url ?id=123&is_edit
     const URL_PARAMS_MAP = {ID:'id',IS_EDIT:"is_edit"
     }
     

   • 时间相关常量
   • 权限相关常量
   • 操作符相关常量
   • 步骤配置等
9. 解构赋值时右侧如果有可能为空要给默认值，防止报错

   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 || {}