什么是JavaScript解构赋值_数组和对象解构有哪些技巧

JavaScript解构赋值是从数组或对象中提取值并赋给变量的简洁语法，支持跳过、默认值、剩余元素、重命名、嵌套及函数参数解构，提升代码可读性与健壮性。

JavaScript解构赋值是一种从数组或对象中提取值并赋给变量的简洁语法，它让代码更清晰、更少冗余，尤其在处理函数返回值、配置项、API响应等场景时非常实用。

数组解构：按位置取值，支持跳过、默认值和剩余元素

数组解构依据元素索引顺序匹配，左侧用方括号，右侧是可迭代对象（如数组）。

• 基础用法：const [a, b] = [1, 2]; → a=1，b=2
• 跳过某项：const [, , c] = [1, 2, 3]; → c=3（忽略前两个）
• 设置默认值：const [x = 10, y = 20] = [5]; → x=5，y=20（y未提供，取默认）
• 获取剩余元素：const [first, ...rest] = [1, 2, 3, 4]; → first=1，rest=[2,3,4]
• 交换变量无需临时变量：[a, b] = [b, a];

对象解构：按属性名取值，支持重命名、默认值和嵌套解构

对象解构依据属性名匹配，左侧用花括号，右侧是对象。属性名必须一致，否则得到undefined（除非设默认值）。

• 基础用法：const { name, age } = { name: 'Alice', age: 30 };
• 重命名变量：const { name: fullName, age: years } = user; → 把name赋给fullName
• 设置默认值：const { city = 'Beijing' } = user; → 若user无city，city='Beijing'
• 嵌套解构：const { profile: { email, address: { zip } } } = data; → 直接取深层字段
• 解构函数参数：function greet({ name = 'Guest', level = 'user' }) { ... } → 调用时传对象即可

实用技巧与注意事项

解构不只是语法糖，用对了能显著提升可读性和健壮性。

标签： javascript java ai 可迭代对象 代码可读性