JavaScript解构赋值与扩展运算符

解构赋值和扩展运算符是ES6重要特性，前者用于从数组或对象中提取值赋给变量，支持默认值、重命名和嵌套结构，常用于函数参数；后者通过...展开可迭代对象，实现数组合并、对象扩展及函数参数传递，并能结合剩余参数收集多余项。两者提升代码简洁性与灵活性，广泛应用于现代JS开发。

JavaScript中的解构赋值和扩展运算符是ES6引入的两个非常实用的特性，它们让数据操作更简洁、直观。下面分别介绍它们的用法和常见场景。

解构赋值（Destructuring Assignment）

解构赋值允许你从数组或对象中提取值，并将它们赋给变量，语法清晰，减少了重复代码。

按顺序从数组中提取元素：

• 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' } = {};

常用于函数参数中，使接口更清晰：

一览运营宝

一览“运营宝”是一款搭载AIGC的视频创作赋能及变现工具，由深耕视频行业18年的一览科技研发推出。

41

查看详情

扩展运算符（Spread Operator）

使用三个点（...）将可迭代对象（如数组、字符串、对象）展开为独立元素，用途广泛。

• 合并数组：const newArr = [...arr1, ...arr2];
• 浅拷贝数组：const copy = [...arr];
• 在函数调用中展开参数：Math.max(...numbers)

• 合并对象：const merged = { ...obj1, ...obj2 };
• 添加/覆盖属性：const updated = { ...obj, name: 'Bob' };
• 实现对象浅拷贝：const clone = { ...original };

在函数参数中使用...收集剩余参数为数组：

结合使用场景

两者经常一起使用，提升代码表达力。

• 从对象中提取部分字段，其余保留：
  const { id, ...rest } = user; —— id单独处理，rest包含其他属性
• 函数中解构参数并使用剩余操作符灵活接收额外字段
• 在React等框架中广泛用于props传递和状态管理

基本上就这些。掌握解构赋值和扩展运算符，能让JavaScript代码更现代、简洁，减少冗余操作。不复杂但容易忽略细节，比如深浅拷贝问题或解构失败时的undefined处理。

以上就是JavaScript解构赋值与扩展运算符的详细内容，更多请关注php中文网其它相关文章！