JavaScript ES6 实用特性：解构、展开与可选链

ES6（ECMAScript 2015）带来的这批语法糖，如今已是写业务代码的默认姿势。但多数人对展开运算符、可选链的边界条件并不清楚。本文挑出解构赋值、展开运算符、可选链与空值合并这四个最常用的特性，用可直接运行的例子讲清写法与容易踩的坑。

一、解构赋值：一次取出多个值

1. 对象解构与重命名

对象解构按属性名取值，与书写顺序无关。需要改名时写 const { name: userName } = user，冒号左侧是原属性名、右侧才是新变量名。嵌套对象可以继续往深处解构，不存在的属性会得到 undefined，用默认值兜底最省事。

2. 数组解构与函数参数

数组解构按位置取值，用逗号跳过不需要的元素，...rest 收集剩余项。它最实用的场景是交换变量与接收函数返回值，不必再声明临时变量；函数形参也可以直接解构。

const user = { name: '老涂', profile: { city: '杭州' } };
const { name: userName, role = 'guest', profile: { city } } = user;
let a = 1, b = 2; [a, b] = [b, a];
const [first, , ...rest] = [10, 20, 30, 40];
console.log(userName, role, city, a, b, first, rest);

二、展开运算符：合并与复制

1. 数组的展开与浅拷贝

展开运算符 ... 把可迭代对象摊开，[...arr] 得到新数组，[...a, ...b] 直接完成拼接，比 concat 更直观。要注意它只做浅拷贝，元素为对象时新旧数组仍指向同一引用，改一个会影响另一个。

2. 对象的合并与覆盖顺序

对象展开是配置合并的标准写法，后面的键覆盖前面的同名键，{ ...defaults, ...options } 就是最常见的形式。用它给函数参数补默认值，比 Object.assign 更简洁，也不会修改原对象。

const defaults = { theme: 'light', pageSize: 10 };
const options = { pageSize: 20 };
const merged = [...[1, 2], ...[3, 4]];
console.log({ ...defaults, ...options }, merged);

三、可选链与空值合并：安全访问深层属性

1. 可选链的短路机制

深层取值时，中间任一环节为 null 或 undefined 都会抛错。可选链 ?. 遇到空值就短路返回 undefined，不再继续往下读。它可用于属性访问、方法调用和数组下标，三种场景写法略有差别。

2. 空值合并的取值规则

?? 只在左侧为 null 或 undefined 时取右侧，这一点与 || 有本质区别：数字 0、空字符串、false 用 || 会被当假值替换掉，用 ?? 则原样保留。接口返回计数为 0 时，两种写法结果完全不同。

const res = { data: { list: [{ id: 1 }] } };
console.log(res?.data?.list?.[0]?.id, res?.data?.total?.toString()); // 1 undefined
const count = 0; console.log(count || 10, count ?? 10); // 10 0

关键配置提示

• 解构的默认值只在属性严格等于 undefined 时生效，传入 null 不会触发，需要单独判断。
• 可选链与空值合并不能与 &&、|| 不加括号混写，编译器会直接报语法错误。
• 展开运算符复制对象只到第一层，嵌套对象仍是共享引用，深层拷贝要另想办法。