JavaScriptES6新特性_解构与扩展运算符

解构赋值和扩展运算符提升了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免费学习笔记（深入）”；

Writecream

AI作家和文案内容生成器

63

查看详情

• 基本语法：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 数据、状态管理或函数传参时。不复杂但容易忽略细节，比如深拷贝需递归、对象扩展属性顺序影响覆盖结果等。

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