解构是一个概念，分解其中一种数据类型并将其单独的属性分配给变量，在文章《javascript 解构赋值 5 个常见场景和实例》中介绍过，今天再来复习一下。
基础解构
const fullName = { firstName: "Quintion", lastName: "Tang",};const { firstName, lastName } = fullName; // 解构语法console.log(firstName); // Quintionconsole.log(lastName); // Tang
正如上面的代码片段中看到的那样，在解构语法中，分解了 firstName 对象属性并将其分配给表达式左侧定义的变量。在上述场景中，对象的属性名称应与左侧表达式中定义的变量匹配。 如果定义其他变量名称，则获取不到想要的值，如：
const fullName = { firstName: "Quintion", lastName: "Tang",};const { firstName, trueName } = fullName; // 解构语法console.log(firstName); // Quintionconsole.log(trueName); // undefined
由于在 fullName 中没有属性 trueName ，所以它被初始化为 undefined。
别名解构
如果需要把对象属性赋值给属性名不一致的变量名，可以如下代码来实现：
const fullName = { firstName: "Quintion", lastName: "Tang",};const { firstName: trueName, lastName } = fullName; // 解构语法console.log(trueName); // Quintionconsole.log(lastName); // Tang
默认值解构
在上面代码中有看到，对象中不存在特定属性的解构，一般会赋值为 undefined ，如果不希望是 undefined ，可以为其设置一个默认值，如下：
立即学习“Java免费学习笔记（深入）”；
即构数智人
即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。
36 查看详情 
const fullName = { firstName: "Quintion", lastName: "Tang",};const { firstName: trueName, lastName, age = 18 } = fullName; // 解构语法console.log(trueName); // Quintionconsole.log(lastName); // Tangconsole.log(age); // 18
下面来看下存在 age 属性下的结果：
const fullName = { firstName: "Quintion", lastName: "Tang", age: 30,};const { firstName: trueName, lastName, age = 18 } = fullName; // 解构语法console.log(trueName); // Quintionconsole.log(lastName); // Tangconsole.log(age); // 30
REST解构
如果想从一个对象中解构一个属性，剩下的属性结构为另一个变量，如下：
const fullName = { firstName: "Quintion", lastName: "Tang", age: 30,};const { age, ...username } = fullName; // 解构语法console.log(username); // { firstName: 'Quintion', lastName: 'Tang' }console.log(age); // 30
在上面的代码片段中，将 username 属性分配给了一个变量，并使用了 rest 运算符 (...) 将变量的其余部属性分配给了一个单独的对象。
推荐学习：《JavaScript视频教程》
以上就是一起再看JavaScript中的对象解构的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/542888.html
微信扫一扫 
支付宝扫一扫 
