写点什么

再谈 JavaScript 中的对象解构

作者:devpoint
  • 2022 年 5 月 12 日
  • 本文字数:1085 字

    阅读完需:约 4 分钟

再谈JavaScript 中的对象解构

解构是一个概念,分解其中一种数据类型并将其单独的属性分配给变量,在文章《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 ,可以为其设置一个默认值,如下:


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 运算符 (...) 将变量的其余部属性分配给了一个单独的对象。

发布于: 刚刚阅读数: 4
用户头像

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发,用技术创造价值!

评论

发布
暂无评论
再谈JavaScript 中的对象解构_JavaScript_devpoint_InfoQ写作社区