函数参数解构可直接提取对象属性,支持默认值、重命名和嵌套解构,但需为整个参数设默认空对象以避免undefined报错。

直接在函数参数位置写解构语法,就能跳过接收整个对象再手动取属性的步骤,让调用更直观、默认值更清晰、字段选择更自由。
基础用法:参数里直接解构
把原本接收一个对象的参数,改成在形参括号里直接写出要取的属性名:
- 传统写法:
function getUser(user) { console.log(user.name, user.age); } - 解构写法:
function getUser({ name, age }) { console.log(name, age); } - 调用时传对象即可:
getUser({ name: '王五', age: 30 });
设默认值:解构时顺手赋初值
每个解构字段都能带默认值,但必须给整个参数加默认空对象,否则传 undefined 会报错:
function createPost({ title = '无标题', content = '', tags = [] } = {}) { return { title, content, tags }; }createPost({ title: 'Hello' }); // { title: 'Hello', content: '', tags: [] }createPost(); // 不传任何参数也能正常运行
应对复杂结构:重命名和嵌套解构
当字段名冲突或数据是多层嵌套时,可以组合使用:
- 重命名:
{ userName: name, userEmail: email }把对象里的userName赋给变量name - 嵌套解构:
{ profile: { avatar, bio } }直接从profile对象里取avatar和bio - 混合写法:
function render({ id, title, author: { name: authorName = '佚名' }, stats: { views = 0 } = {} } = {}) { ... }
注意事项:几个关键细节不能漏
解构看着简单,实际容易踩坑:
- 必须给整个参数设默认值
= {},否则fn(undefined)或不传参直接报错 - 解构只读对象自身可枚举属性,不会从原型链上取值
- 不能在解构中用计算属性名,比如
{ [key]: val }是无效语法 - 如果还想保留原始对象,可以额外加一个参数,或用剩余属性
{ a, b, ...rest }











