解构赋值和扩展运算符提升了JavaScript的代码简洁性与可读性。1. 解构赋值支持从数组或对象中按模式提取值，实现变量快速赋值、默认值设置、变量交换及嵌套属性获取；2. 扩展运算符（...）能展开可迭代对象，用于数组合并、复制、函数参数传递及对象合并、浅拷贝和属性覆盖；3. 二者常用于API数据处理、状态管理与函数传参，需注意扩展运算符仅支持浅拷贝、属性顺序影响覆盖结果等细节。
ES6（ECMAScript 2015）引入了许多提升开发效率的新特性，其中解构赋值和扩展运算符尤为实用。它们让数据的提取与合并变得更简洁直观，减少了冗余代码。
解构赋值：从数组和对象中提取数据
解构赋值允许我们按照一定的模式，从数组或对象中快速提取值并赋给变量，语法清晰且易于理解。
数组解构通过数组结构来匹配变量名，按顺序提取元素：
-
基本用法：
const [a, b] = [1, 2];—— a 得到 1，b 得到 2 -
跳过元素：
const [, second,] = ['apple', 'banana', 'cherry'];—— 只取第二个元素 -
默认值：
const [name = 'guest'] = [];—— 若无值则使用默认 -
交换变量：
[x, y] = [y, x];—— 不借助临时变量完成交换
根据属性名提取对象中的值，顺序无关：
立即学习“Java免费学习笔记（深入）”；
Destoon B2B网站
下载
Destoon B2B网站管理系统是一套完善的B2B(电子商务)行业门户解决方案。系统基于PHP+MySQL开发，采用B/S架构，模板与程序分离，源码开放。模型化的开发思路，可扩展或删除任何功能；创新的缓存技术与数据库设计，可负载千万级别数据容量及访问。 系统特性1、跨平台。支持Linux/Unix/Windows服务器，支持Apache/IIS/Zeus等2、跨浏览器。基于最新Web标准构建，在
-
基本语法：
const { age, name } = { name: 'Tom', age: 25 }; -
重命名变量：
const { name: userName } = user;—— 将 name 赋值给 userName -
嵌套解构：
const { info: { city } } = data;—— 提取深层属性 -
默认值设置：
const { role = 'user' } = {};—— 防止 undefined
扩展运算符：展开可迭代对象
扩展运算符（...）能将数组、字符串、类数组对象等展开为独立元素，常用于合并、复制或函数调用。
数组中的应用-
合并数组：
const newArr = [...arr1, ...arr2]; -
复制数组：
const copy = [...original];—— 实现浅拷贝 -
替代 concat：
[...arr, 'new']比 arr.concat('new') 更简洁
-
合并对象：
const merged = { ...obj1, ...obj2 }; -
添加/覆盖属性：
const updated = { ...user, age: 30 }; -
浅拷贝对象：
const clone = { ...original };
结合剩余参数（rest parameters），可以灵活处理不定数量的参数：
-
收集参数：
function sum(...nums) { return nums.reduce(...); } -
传递数组作为参数：
Math.max(...[1, 2, 3])等价于 Math.max(1, 2, 3)
基本上就这些。解构和扩展运算符极大提升了 JavaScript 的表达力，让代码更干净、易读。掌握它们在日常开发中非常实用，尤其是在处理 API 数据、状态管理或函数传参时。不复杂但容易忽略细节，比如深拷贝需递归、对象扩展属性顺序影响覆盖结果等。
