javascript解构赋值按结构匹配自动提取并命名,数组按位置、对象按属性名,支持跳过、默认值、重命名、嵌套及函数参数解构。

JavaScript 中用解构赋值语法声明变量,核心是“按结构匹配、自动提取、直接命名”,不用再写重复的点号或下标访问。
数组解构:按位置取值,跳过不需要的项
左边用方括号写变量名,顺序对应右边数组元素的位置。空位可留空(跳过),也可用默认值兜底:
- let [a, , c] = [1, 2, 3]; → a 是 1,c 是 3(中间的 2 被跳过)
- let [x = 10, y = 20] = [5]; → x 是 5,y 是默认值 20
- let [first, ...rest] = ['a', 'b', 'c']; → first 是 'a',rest 是 ['b', 'c']
对象解构:按属性名取值,支持重命名和默认值
左边用花括号,变量名默认与属性名一致;想换名字就写 原名: 新名,冒号后是目标变量名:
- let { name, age } = { name: 'Alice', age: 30 }; → 直接得到 name 和 age 变量
- let { title: bookTitle, price: cost } = { title: 'JS Guide', price: 49.9 }; → 变量叫 bookTitle、cost
- let { id = 1, tags = [] } = { id: 5 }; → id 是 5,tags 取默认空数组
嵌套结构也能一层解构到底
对象或数组里有子对象、子数组,解构时可直接展开写,避免链式访问:
- let { user: { profile: { city, hobbies } } } = { user: { profile: { city: 'Beijing', hobbies: ['coding'] } } };
- let [,, [x, y]] = [1, 2, [10, 20]]; → x 是 10,y 是 20
函数参数也支持解构,让调用更清晰
把解构写在形参位置,传入对象或数组时自动拆开,还能设默认值:
-
function greet({ name = 'Guest', level = 'user' }) { console.log(`Hello ${name}, ${level}`); }
→ greet({ name: 'Tom' }); 输出 "Hello Tom, user" -
function sum([a, b, c = 0]) { return a + b + c; }
→ sum([1, 2]); 返回 3
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











