JavaScript解构赋值支持嵌套结构、默认值、变量重命名、剩余操作符、函数参数解构及动态键，提升代码灵活性与可读性。
JavaScript中的解构赋值不只是简单地从数组或对象中提取值，它还支持多种高级模式，让数据提取更灵活、代码更简洁。下面介绍几种常见的高级用法。
当对象或数组包含深层嵌套的数据时，可以直接在解构中匹配结构。
对象嵌套：
const user = { name: 'Alice', info: { age: 28, location: { city: 'Beijing', country: 'China' } } }; const { info: { location: { city } } } = user; console.log(city); // 输出: Beijing数组嵌套：
立即学习“Java免费学习笔记（深入）”；
const data = [1, [2, 3], 4]; const [first, [second, third]] = data; console.log(second); // 输出: 2如果解构的属性不存在，可以设置默认值防止 undefined。
const { name = 'Anonymous', age = 18 } = {}; console.log(name); // 输出: Anonymous const [x = 10, y = 20] = [5]; console.log(y); // 输出: 20默认值也适用于嵌套解构，增强容错性。
当希望将解构出的属性赋给不同名称的变量时，可以用冒号指定新名。
const obj = { a: 1, b: 2 }; const { a: firstValue, b: secondValue } = obj; console.log(firstValue); // 输出: 1这在处理API返回字段与本地变量名冲突时特别有用。
使用 ... 可以捕获剩余的元素或属性。
数组剩余：
const [head, ...tail] = [1, 2, 3, 4]; console.log(tail); // 输出: [2, 3, 4]对象剩余：
const { name, ...rest } = { name: 'Tom', age: 25, city: 'Shanghai' }; console.log(rest); // 输出: { age: 25, city: 'Shanghai' }注意：剩余部分必须是最后一个，否则会报错。
函数定义时可以直接对传入的对象或数组参数进行解构。
function displayUser({ name, age = 18 }) { console.log(`${name}, ${age}岁`); } displayUser({ name: 'Bob' }); // 输出: Bob, 18岁也可以结合默认参数：
function drawChart({ size = 'big', coords = [] } = {}) { console.log(size, coords); } drawChart(); // 使用默认对象和默认值标准解构不直接支持动态键，但可以结合计算属性名实现部分灵活性。
const key = 'email'; const userData = { email: 'a@b.com', name: 'Jane' }; const { [key]: value } = userData; console.log(value); // 输出: a@b.com这种写法适合需要根据变量名提取属性的场景。
基本上就这些。掌握这些高级模式后，能写出更清晰、更具表达力的JavaScript代码。关键在于理解结构匹配的逻辑，而不是死记语法。
以上就是JavaScript中的解构赋值有哪些高级模式？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
820
