解构赋值和扩展运算符是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'] = []; 可用于函数返回多个值的场景2. 对象解构
根据属性名提取对象中的值：
立即学习“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)2. 对象扩展合并对象：const merged = { ...obj1, ...obj2 }; 添加/覆盖属性：const updated = { ...obj, name: 'Bob' }; 实现对象浅拷贝：const clone = { ...original };3. 剩余参数（Rest Parameters）
在函数参数中使用…收集剩余参数为数组：
function sum(...nums) { return nums.reduce((a,b) => a+b); }
结合使用场景
两者经常一起使用，提升代码表达力。
从对象中提取部分字段，其余保留：const { id, ...rest } = user; —— id单独处理，rest包含其他属性 函数中解构参数并使用剩余操作符灵活接收额外字段 在React等框架中广泛用于props传递和状态管理
基本上就这些。掌握解构赋值和扩展运算符，能让JavaScript代码更现代、简洁，减少冗余操作。不复杂但容易忽略细节，比如深浅拷贝问题或解构失败时的undefined处理。
以上就是JavaScript解构赋值与扩展运算符的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1533509.html
微信扫一扫 
支付宝扫一扫 
