JavaScript 高效编码完全指南

一、条件判断优化

1. 三元运算符进阶

// 基础用法
const status = isMember ? 'VIP' : 'Guest';

// 嵌套使用
const discount = isVIP ? 0.8 : isMember ? 0.9 : 1;

使用场景：

• 简单的条件赋值（如状态标记）
• 替代简单的 if-else 逻辑（建议最多两层嵌套）

方法详解：

• condition ? expr1 : expr2 结构返回表达式结果
• 嵌套时从右向左结合，可用括号明确优先级
• 与模板字符串结合可实现动态内容生成

2. 空值合并 + 可选链

const price = product?.inventory?.[0]?.price ?? 99;

使用场景：

• API 数据的安全访问（防止 Cannot read property 错误）
• 配置参数的默认值设置

方法详解：

• ?. 遇到 null/undefined 立即返回 undefined
• ?? 仅在左侧为 null/undefined 时返回右侧值
• 组合使用形成安全访问链，替代 && 级联判断

---

二、数据结构处理

3. 数组去重进阶

const uniqByID = [...new Map(arr.map(item => [item.id, item])).values()];

使用场景：

• 根据对象属性去重
• 合并重复数据的最后出现版本

方法详解：

1. map 将数组转为 [key, value] 格式
2. Map 对象自动覆盖重复键
3. values() 获取去重后的对象集合

4. 对象动态属性

const obj = { 
  [`${dynamicKey}_hash`]: md5('[e-mail]')
};

使用场景：

• 根据变量生成属性名
• 创建带后缀的关联属性

方法详解：

• 使用 [] 包裹表达式计算属性名
• 支持模板字符串生成复杂属性名

---

三、类型转换技巧

5. 快速类型转换

const num = +'123';      // 123 (Number)
const str = 456 + '';    // "456" (String)
const bool = !!'hello';  // true (Boolean)

使用场景：

• 表单输入值的类型转换
• 快速验证值的真实性

方法详解：

• + 运算符尝试转换为数字（失败返回 NaN）
• + '' 利用字符串拼接隐式转换
• !! 通过双重取反转为布尔值

---

四、函数与参数处理

6. 参数解构默认值

const createUser = ({ name = '匿名', age = 18 } = {}) => ({ /* ... */ });

使用场景：

• 处理可选配置对象
• 防止未传参导致的 Cannot destructure 错误

方法详解：

• 外层 = {} 确保参数为对象
• 内层属性默认值仅在 undefined 时生效
• 支持多级解构：{ data: { id } = {} }

---

五、ES6+ 新特性

7. 标签模板字符串

function currency(strings, ...values) {
  return strings.reduce((acc, str, i) => 
    acc + str + (values[i] ? `¥${values[i].toFixed(2)}` : ''), '');
}
console.log(currency`总价: ${25}`); // 总价: ¥25.00

使用场景：

• 国际化货币格式化
• 自定义字符串处理规则

方法详解：

• strings 接收静态文本部分数组
• ...values 接收所有插值表达式结果
• 返回处理后的完整字符串

---

六、性能优化

8. 位运算权限控制

const PERMISSION = {
  READ: 1 << 0,   // 0001
  WRITE: 1 << 1   // 0010
};
const hasPerm = (userPerm, required) => (userPerm & required) === required;

使用场景：

• 系统权限管理
• 功能开关控制

方法详解：

• << 左移运算符创建位掩码
• & 按位与运算检查权限
• | 按位或运算添加权限

---

七、浏览器 API 整合

9. Web Worker 优化

const worker = new Worker(URL.createObjectURL(
  new Blob([`self.onmessage = ${handleMessage.toString()}`])
));

使用场景：

• 复杂计算任务分流
• 大数据处理不阻塞主线程

方法详解：

• Blob 创建脚本二进制对象
• createObjectURL 生成临时 URL
• 避免单独 worker 文件的管理成本

---

综合对比表

技巧	传统写法	优化写法	节省字符	可读性
空值判断	`var = a		b`	var = a ?? b
安全访问	a && a.b && a.b.c	a?.b?.c	50%	✅✅
数组去重	filter+indexOf	[...new Set(arr)]	60%	✅

---

最佳实践原则

1. 渐进增强：在兼容性允许的范围内使用新特性
2. 防御性编程：关键数据使用 ?? 代替 ||
3. 复杂度控制：嵌套三元运算符不超过两层
4. 性能评估：大数据操作优先使用 Set/Map