解构赋值和扩展运算符是ES6重要特性，前者用于从数组或对象中提取值赋给变量，支持默认值、重命名和嵌套结构，常用于函数参数；后者通过...展开可迭代对象，实现数组合并、对象扩展及函数参数传递，并能结合剩余参数收集多余项。两者提升代码简洁性与灵活性，广泛应用于现代JS开发。
JavaScript中的解构赋值和扩展运算符是ES6引入的两个非常实用的特性，它们让数据操作更简洁、直观。下面分别介绍它们的用法和常见场景。
解构赋值（Destructuring Assignment）
解构赋值允许你从数组或对象中提取值，并将它们赋给变量，语法清晰，减少了重复代码。
1. 数组解构按顺序从数组中提取元素：
const [a, b] = [1, 2]; // a = 1, b = 2- 可以跳过某些元素：
const [x, , z] = [1, 2, 3]; // x=1, z=3 - 支持默认值：
const [name = 'guest'] = []; - 可用于函数返回多个值的场景
根据属性名提取对象中的值：
立即学习“Java免费学习笔记（深入）”；
const { name, age } = { name: 'Alice', age: 25 };- 可重命名变量：
const { name: userName } = obj; - 支持嵌套解构：
const { user: { name } } = data; - 也能设置默认值：
const { role = 'user' } = {};
常用于函数参数中，使接口更清晰：
function connect({ host, port = 80 }) { ... }
扩展运算符（Spread Operator）
使用三个点（...）将可迭代对象（如数组、字符串、对象）展开为独立元素，用途广泛。
1. 数组合并与复制- 合并数组：
const newArr = [...arr1, ...arr2]; - 浅拷贝数组：
const copy = [...arr]; - 在函数调用中展开参数：
Math.max(...numbers)
- 合并对象：
const merged = { ...obj1, ...obj2 }; - 添加/覆盖属性：
const updated = { ...obj, name: 'Bob' }; - 实现对象浅拷贝：
const clone = { ...original };
在函数参数中使用...收集剩余参数为数组：
function sum(...nums) { return nums.reduce((a,b) => a+b); }
结合使用场景
两者经常一起使用，提升代码表达力。
- 从对象中提取部分字段，其余保留：
const { id, ...rest } = user;—— id单独处理，rest包含其他属性 - 函数中解构参数并使用剩余操作符灵活接收额外字段
- 在React等框架中广泛用于props传递和状态管理
基本上就这些。掌握解构赋值和扩展运算符，能让JavaScript代码更现代、简洁，减少冗余操作。不复杂但容易忽略细节，比如深浅拷贝问题或解构失败时的undefined处理。
