一、解构赋值

痛点：在处理嵌套的 JSON 或函数返回的多个值时往往需要写大量 obj.proparr代码冗长且易出错。解构赋值可以一次性把需要的数据提取到变量中，让代码更简洁、更易读。

. 数组解构

按位置匹配，适用于顺序已知的数组。话说回来，

const arr =;// 基本解构
const = arr;console.log，// 1 2 3
// 跳过元素
const = arr;console.log，按理说，// 3
// 默认值
const =;console.log，// 0 0
// 嵌套解构
const nested = ];const ] = nested;说起来，console.log;// 10 20 30

. 对象解构

按属性名匹配。顺序无关，特别适合从 API 返回的对象中挑选字段。其实，

const user = { name: 'Alice'。age: 25 }，// 基本解构
const { name,age } = user;console.log，按理说，// Alice 25
// 重命名
const { name: userName。age: userAge } = user;console.log，// Alice
// 嵌套解构
const person = {
再看name。'Bob',address: { city: 'Beijing' }
};const { address: { city } } = person;console.log，// Beijing

. 函数参数解构

直接在形参位置提取对象属性，省去手动取值的步骤。话说回来，

function greet {
console.log;}
greet，// Tom is 30 years old
// 配合默认值
function draw {
console.log;}
draw，// 0 0

. 常见用途场景

• 交换变量： =;
• 提取 JSON 数据：从后端返回的大对象中快速拿到需要的字段。
• 解析函数返回值：

function getInfo {
return { status: 'ok',data: };}
const { status,data } = getInfo;console.log，// ok

二、 运算符

痛点：复制数组/对象或合并数据时你可能会使用循环或 Object.assign写法繁琐且容易忘记深拷贝细节。运算符提供了更直观的“展开”语法。

. 数组

// 浅拷贝数组
const arr1 =;const arr2 =;console.log，//
// 合并数组
const arr3 = ];console.log，//
// 类数组转真数组
const nodeList = document.querySelectorAll;const divArray =;console.log);老实说，// true
// 与解构结合：获取剩余元素
const numbers =;const = numbers;console.log，//

. 对象

// 浅拷贝对象
const obj1 = { a:1,b:2 };不过，const obj2 = { ...obj1 };console.log，// {a:1,b:2}
// 合并对象
const merged = { ...obj1。
c:3,a:10 }，console.log;// {a:10,b:2,c:3}
// 不可变更新
const oldUser = { id:5。name:'Jane' };const newUser = { ...oldUser,age:28 };console.log，// {id:5,name:'Jane'。age:28}

. 函数调用

把数组展开为独立参数传递给函数。

const nums =;Math.max，// 相当于 Math.max => 12
function sum{
return a+b+c;}
sum，// =>6

. 注意事项

• 运算符执行的是浅拷贝嵌套对象仍共享同一引用，需要自行处理深拷贝。
• 对象 是 ES2018 引入的语法。与数组的展开行为不同，它是“枚举自身可枚举属性”。其实，

三、剩余参数

痛点：传统的 arguments 是类数组且不支持箭头函数。如果你想要一个真正的数组来使用 .map/.filter 等方法，就必须手动转换。剩余参数让收集不定数量的实参变得轻松自然。

. 函数剩余参数

// 替代 arguments，得到真数组
function logAll{
console.log;}
logAll，//
// 收集其余实参进领域务处理
function multiply{
return nums.map;话说回来，}
multiply;//

使用限制：

• 剩余参数必须是函数声明/表达式中的最终一个形参。
• 箭头函数没有自己的 arguments”，只能通过剩余参数获取所有实参。

. 解构中的剩余模式

// 数组剩余模式
const items =;const = items;console.log，//
// 对象剩余模式
const objA={ a:1。b:2,c:{x:9},d:4 };其实，const { a,b,...rest }=objA;老实说，console.log;// {c:{x:9},d:4}

至于*提示*。对象剩余属性一样是浅拷贝，只会收集自身可枚举属性，不会递归复制原型链上的属性。

四、三者对比与关键区别

<\/tr> <\/tr> <\/tr>

特性 / 用途	解构赋值	运算符	剩余参数
主要作用	把可迭代结构拆分成单独变量	把可迭代结构或对象展开为单独元素/属性	把函数实参或解构未匹配部分聚合成数组
语法位置	左侧赋值表达式或函数形参左侧	右侧表达式	函数形参列表最终一位 或 解构左侧
	const {x}=obj​ const =arr​	const newArr= ​  const newObj={...oldObj} ​	function fn{}​ const =arr​`
	分解	展开	聚集

<\/tr>

若干独立变量／常量

新创建的数组或对象

包含多余项的真数组

<\/tbody>\ <\/table\>

// 步骤一：用解构拿到需要的数据，同时收集其余字段 async function processUser{ const user ={ ...await fetchUser };// 保证是新对象 const { id:userId,...rest } = user;// 解构 + 剩余

// 步骤二：不可变地给使用者加上默认年龄。并展开已有字段
const updatedUser ={ ...rest,id:userId,age: };console.log，// 步骤三：把任意数量的额外标签传给日志函数 → 使用剩余参数
logChange;

}

function logChange{ console.info(User ${userId} changed fields:,changedFields.join);}

processUser;

This snippet demonstrates:

• # 解构赋值：{ id:userId,...rest } 把 ID 单独拿出，其它属性统一放进 rest.
• # 再看运算符，{ ...rest,id:userId。age: } 实现不可变更新，同时覆盖/补全字段.
• # 剩余参数：logChange 能灵活接受任意数量的改动字段.
• # 最终得到一个 纯粹的数据快照既避免了直接修改原始响应，又保持代码简洁易读.
<\/ul>

。

---