第二大脑

主题

2026-08-24
493
2m

概念卡片：JavaScript 现代语法 ​

一句话机制：ES2020+ 的可选链 ?.（安全访问深层属性）和空值合并 ??（只在 null/undefined 时兜底）是高频语法糖；配合数组高阶函数（map/filter/reduce）和真假值判断，能显著减少防御性样板代码。

可选链 ?.（安全访问） ​

js
// 传统：层层判空
let city
if (user && user.profile && user.profile.address) city = user.profile.address.city

// 可选链：任一环是 null/undefined 就短路返回 undefined，不抛错
const city = user?.profile?.address?.city

// 函数调用 + 数组元素
user?.getName?.()   // user 为 null 时不调用
arr?.[index]        // arr 为 null 时不取元素

注意：?. 只拦 null/undefined，不拦 0/''/false。

空值合并 ??（只兜 null/undefined） ​

js
leftExpr ?? rightExpr   // 仅当 leftExpr 是 null/undefined 才取 rightExpr

const name = null;      console.log(name ?? '默认')  // 默认
const age = 25;         console.log(age ?? 18)       // 25

?? vs || 的关键区别：

js
const count = 0
console.log(count || 10)   // 10  ← || 把 0 当假值
console.log(count ?? 10)   // 0   ← ?? 只认 null/undefined

数组高阶函数 ​

js
[1,2,3].map(x => x * 2)      // [2,4,6]  返回新数组
[1,2,3,4].filter(x => x > 2) // [3,4]    过滤
[1,2,3].reduce((a,b) => a+b, 0) // 6     累积成单值

真假值（falsy 只有 6 个） ​

false 0 '' null undefined NaN —— 其余都是 truthy。

不变量（必须成立的约束） ​

  • ?. 只能读、不能写在赋值左侧（a?.b = 1 非法）。
  • 0 ?? 默认 → 保留 0；0 || 默认 → 走默认值。
  • map/filter 返回新数组、不改原数组；forEach 只遍历无返回。

踩坑案例 ​

  • 现象：count || 10 在 count = 0 时得到 10，而非预期的 0。 原因：|| 把所有 falsy（含 0）当假。解决：改用 count ?? 10，只在 null/undefined 兜底。

常见误解 ​

  • 把 || 当空值合并用 → 数字 0、空串 '' 会被误判为「空」走默认值，应改用 ??。
  • 以为 ?. 能拦截所有 falsy → 它只拦 null/undefined，0、'' 照常返回。

关联 ​

  • 总览：React技术栈总览
  • 源：B40-资源/语雀-Java开发/前端技术/✅JavaScript（可选链/空值合并/数组高阶函数/真假值 4 篇）
最近更新