reduce替代循环累加更简洁，需设初始值防错；?.和??安全访问嵌套属性，注意??与||区别；解构赋值简化取值，嵌套时设默认空对象；模板字符串提升插值可读性。
用 reduce 替代手写循环累加逻辑
当你要把数组里每个元素按规则合并成一个值（比如求和、拼接字符串、扁平化嵌套结构），reduce 是最直接的替代方案，比 for 或 forEach + 外部变量更紧凑、意图更清晰。
常见错误是忘记设置初始值（initialValue），导致第一次执行时 accumulator 取数组第一个元素、currentValue 取第二个——这在空数组或单元素数组下极易出错或返回 undefined。
- 数值累加必须显式传
0：[1, 2, 3].reduce((a, c) => a + c, 0) - 对象合并推荐用
{}初始值，并用展开语法避免污染原对象：arr.reduce((acc, item) => ({ ...acc, ...item }), {}) - 字符串拼接注意分隔符：想加逗号就别漏掉
acc ? acc + ', ' + c : c，或者统一用join()更安全
用可选链 ?. 和空值合并 ?? 替代层层 if 判断
处理深层嵌套对象（如 user.profile.address.city）时，传统写法要反复检查中间层级是否存在，代码又长又脆弱。现代 JS 的 ?. 和 ?? 能让逻辑一气呵成。
容易踩的坑是混淆 ?? 和 ||：前者只在值为 null 或 undefined 时生效；后者对 0、''、false 也触发默认值，常导致意外覆盖。
- 安全取值：
user?.profile?.address?.city ?? '未知城市' - 不能用于赋值或
delete操作，obj?.prop = 1会报语法错误 - 函数调用前加
?.时，若左侧为null/undefined，整条表达式直接返回undefined，不会报错
用解构赋值替代冗长的属性访问
从对象或数组中提取多个字段时，解构能省去重复写 obj.xxx，尤其适合函数参数接收和 API 响应解析。
注意默认值只在属性值为 undefined 时生效，null 不会触发；另外嵌套解构时，如果某层不存在，整个解构会失败（除非该层也设默认值）。
- 基础解构：
const { name, age, city = '北京' } = user; - 重命名 + 默认值：
const { email: userEmail = 'no@domain.com' } = user; - 嵌套安全写法：
const { profile: { avatar = '/default.png' } = {} } = user;—— 这里profile = {}是关键，防止user.profile为undefined导致报错
用模板字符串替代 + 拼接和 replace 组合
涉及变量插入、多行文本、条件片段时，` 包裹的模板字符串比一堆 + 和 .replace() 更易读、更少出错。
性能上现代引擎已优化得足够好，不用刻意回避；但要注意反引号内不能直接写未声明变量，也不能省略 ${} 符号——写成 `Hello $name` 不会插值，而是字面量输出。
- 简单插值：
`欢迎 ${user.name}，你有 ${count} 条未读消息` - 内联表达式：
`状态：${isActive ? '在线' : '离线'}` - 多行保留缩进：
`<div class="card"> <h3>${title}</h3> <p>${desc}</p> </div>`（注意缩进会原样输出）
