文章目录1. 通俗比喻快递盒取件2. 代码对比传统写法 vs 解构赋值传统写法不断用点 . 访问对象解构写法一行搞定3. 函数参数里的解构正是你代码里的用法没有解构时使用解构后你代码里的写法对象解构Object Destructuring本质上就是一个语法快捷方式“从一个对象里直接把想要的属性掏出来变成独立的变量使用。”1. 通俗比喻快递盒取件假设你收到了一个快递包裹一个对象里面装了手机、充电器和说明书。没有解构时老办法你每次用手机都要说“快递盒里的手机”用充电器要说“快递盒里的充电器”。有了解构新办法你打开盒子把手机和充电器直接拿出来放在桌上以后直接喊“手机”、“充电器”。2. 代码对比传统写法 vs 解构赋值假设有一个用户对象constuser{name:小明,age:18,city:北京};传统写法不断用点.访问constnameuser.name;constageuser.age;console.log(name);// 小明console.log(age);// 18对象解构写法一行搞定const{name,age}user;console.log(name);// 小明console.log(age);// 18原理{ name, age }里的名字必须和user对象里的属性名一模一样。JS 看到后就会自动去user里面找同名字段并赋值给新声明的变量。3. 函数参数里的解构正是你代码里的用法调用函数时如果别人传进来一个包含很多字段的大对象你可以直接在参数括号里把它“拆开”。没有解构时// 参数接收整个对象 inputexecute:async(input){// 每次用都得写 input.xxxconsttodosinput.todos;constprogressMessageinput.progressMessage;console.log(todos,progressMessage);}使用解构后你代码里的写法// 直接在参数位置把 todos 和 progressMessage 从传入的对象里抠出来execute:async({todos,progressMessage}){// 内部直接当成独立变量使用console.log(todos,progressMessage);}当外部调用时// 外部调用传入的是一个对象execute({todos:[写代码,买咖啡],progressMessage:正在进行中...,otherField:其他多余数据// 哪怕有别的字段解构也只会挑你需要的拿});省去了中间冗长的input.todos、input.progressMessage让代码更加干净直观。