解构赋值
基础用法
在 JavaScript 的 解构赋值中，左边的变量会从右边的结构中“按位取出并赋值”。对于数组，使用方括号并按顺序对应；对于对象，使用大括号并按属性名匹配。核心要点是结构与目标变量之间的映射关系，以及在赋值时对未匹配项的处理方式。
通过解构赋值，我们可以实现“快速提取”数据的效果，例如从返回的数组中拿到关键字段，或从对象中获得多个属性而无需逐条赋值。这是提升代码可读性和简洁度的重要手段，也是本次文章聚焦的基础部分。
// 数组解构基础
const numbers = [10, 20, 30];
const [a, b, c] = numbers; // a=10, b=20, c=30// 对象解构基础
const user = { id: 1, name: 'Alice', role: 'admin' };
const { name, id } = user; // name='Alice', id=1在对象中的应用
对象解构在实际开发中尤为常见，尤其是提取多属性、重命名、以及默认值的场景。通过使用 {name: alias} 的形式，可以在不修改原对象的前提下，给变量命名以提升可读性。
当对象嵌套时，解构也支持深层提取，例如从嵌套结构中直接获取城市或街道信息。嵌套解构让数据访问更直观，减少重复的属性访问代码。
const response = {status: 'ok',data: {user: {id: 42,profile: { email: 'user@example.com', city: 'Shenzhen' }}}
};// 基本解构
const { status, data: { user: { id } } } = response;// 重命名与默认值
const { data: { user: { profile: { city: cityName = '未知城市' } } } } = response;
console.log(cityName); // Shenzhen解构中的默认值与跳过
在解构时，若右侧结构中没有对应的属性或元素，可以通过给解构变量设置默认值来避免 undefined。对于数组解构，若某个位置没有值，可以使用 空位忽略的技巧或默认值。
默认值的设定让函数参数编解码更健壮，尤其是在接口变更或可选参数较多的场景中。通过解构结合默认值，可以实现更优雅的容错处理。
function greet({ name = '访客', time = '上午' } = {}) {return `Good ${time}, ${name}!`;
}
console.log(greet({ name: '张三', time: '下午' })); // Good 下午, 张三!
console.log(greet()); // Good 上午, 访客!扩展运算符
基础用法
扩展运算符分为两种用途：展开（spread）与收集（rest）。展开运算符用于将数组或对象拆分成独立的元素或属性，避免了显式循环拼接；REST 用于将不定数量的参数聚合成单一数组或对象的一部分。
在数组中，使用 展开运算符 可以实现数组合并、克隆、以及快速添加新元素的场景；在函数参数中，rest 参数 则允许接受任意数量的参数并以数组形式处理。
// 展开与合并
const a = [1, 2, 3];
const b = [4, 5, 6];
const merged = [...a, ...b]; // [1,2,3,4,5,6]// 克隆对象
const obj1 = { x: 1, y: 2 };
const clone = { ...obj1 }; // { x:1, y:2 }// 函数参数的 rest
function sum(...nums) {return nums.reduce((acc, val) => acc + val, 0);
}
console.log(sum(1,2,3,4)); // 10与解构的配合使用
扩展运算符常与解构一起使用，使数据处理更加灵活。例如，在合并对象时可以保留默认字段，同时覆盖某些属性；在数组解构后再用展开，创建一个带有新项的新数组。
通过把已有对象展开到一个新对象中，再对特定属性进行覆盖，是实现不可变数据结构的一种常见模式。此处的组合技巧是 不可变更新 的基础之一。
const defaults = { host: 'localhost', port: 8080, protocol: 'http' };
const override = { port: 3000, protocol: 'https' };const upgraded = { ...defaults, ...override }; // { host:'localhost', port:3000, protocol:'https' }// 数组合并与去重的示例
const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];
const combined = [...arr1, ...arr2]; // [1,2,3,3,4,5]
在实际开发中的应用场景
在前端框架（如 React、Vue）中，解构赋值和扩展运算符经常用于 组件属性的提取、默认参数、以及状态对象的不可变更新。通过这些特性，可以编写更具可读性、可维护性的代码，同时降低对原始数据的直接修改风险。
同时，在后台数据处理、API 响应解析、以及工具函数库的实现中，解构与扩展运算符提供了更高效的模式。例如，快速从 API 响应中提取需要字段，或将多个源数据合并成单一数据结构，均能提升开发效率。
// 使用解构提取请求头信息（示例）
function prepareRequest(headers = {}) {const { authorization = '', accept = 'application/json' } = headers;return { authorization, accept };
}// 使用扩展运算符合并查询参数
const defaults = { page: 1, limit: 20 };
const userParams = { page: 2, q: 'keyword' };
const finalParams = { ...defaults, ...userParams }; // { page:2, limit:20, q:'keyword' }