JavaScript ES6 解构赋值语法详解：数组、对象与嵌套用法
本文详细解析 JavaScript ES6 引入的解构赋值语法。内容涵盖数组与对象的基本解构、嵌套结构处理、REST 模式应用，以及利用索引访问数组特定值和属性。同时介绍如何为解构变量设置默认值，帮助开发者高效提取数据并简化代码逻辑。
前言
ES6 标准引入了“解构赋值语法”，该机制允许将数组或对象中的值提取并赋值给不同的变量。尽管初看可能略显复杂，但其实际学习曲线平缓且易于掌握。
解构赋值是 JavaScript 中的一种表达式。ES6 规范允许依据特定模式，从数组和对象中提取值，并对变量进行赋值，这一过程被称为解构。通过解构赋值，可以从对象或数组中取出属性或值，并将其赋值给其他变量。
在 ES6 解构赋值功能出现之前，为变量赋值时只能直接指定具体的值。
例如：
let a = 1;
let b = 2;
let c = 3;
let d = 4;
let e = 5;
数组解构操作十分直观。只需为数组中的每个值声明对应的变量即可。如果希望处理的变量数量少于数组索引数量（例如仅需处理前几个值），可以跳过某些索引，或者使用 REST 模式将剩余的所有值收集到新数组中。
const nums = [ 3, 6, 9, 12, 15 ];
const [
k, // k = 3
l, // l = 6
, // Skip a value (12)
...n // n = [12, 15]
] = nums;
对象解构
对象解构与数组解构原理相似，主要区别在于可以按名称引用对象中的每个 key，从而自动创建同名变量。此外，还可以将键解构为新的变量名，仅提取所需的 key，并利用 rest 模式将剩余的 key 解构为新对象。
const obj = { a: 1, b: 2, c: 3, d: 4 };
const {
a, // a = 1
c: d, // d = 3
...rest // rest = { b: 2, d: 4 }
} = obj;
嵌套解构
嵌套对象和数组遵循相同的解构规则。其区别在于，可以直接将嵌套的 key 或值解构为变量，而无需先将父对象存储在单独的变量中。
const nested = { a: { b: 1, c: 2 }, d: [1, 2]};
const {
a: {
b: f, // f = 1
...g // g = { c: 2 }
},
...h // h = { d: [1, 2]}
} = nested;
高级解构
由于数组的行为与对象类似，可以通过使用索引作为对象解构分配中的 key，利用解构赋值语法从数组中获取特定值。借助此方法，还可以访问数组的其他属性（例如数组的 length）。此外，如果解构后的值为 undefined，还可以为解构过程中的变量定义默认值。
const arr = [ 5, 'b', 4, 'd', 'e', 'f', 2 ];
const {
6: x, // x = 2
0: y, // y = 5
2: z, // z = 4
length: count, // count = 7
name = 'array', // name = 'array' (not present in arr)
...restData // restData = { '1': 'b', '3': 'd', '4': 'e', '5': 'f' }
} = arr;
总结
本文介绍了 JavaScript 中的解构赋值语法。如需了解更多相关 JS 解构赋值内容，请搜索本站历史文章或继续阅读后续相关文章，感谢大家的支持！
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58