JavaScript中的对象解构方法怎么应用
发布时间：2023-08-02 10:42:14 所属栏目：教程 来源：网络
导读： 这篇文章主要介绍“JavaScript中的对象解构方法怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JavaScript中的对
|
这篇文章主要介绍“JavaScript中的对象解构方法怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JavaScript中的对象解构方法怎么使用”文章能帮助大家解决问题。 基础解构 const fullName = { firstName: "Quintion", lastName: "Tang", }; const { firstName, lastName } = fullName; // 解构语法 console.log(firstName); // Quintion console.log(lastName); // Tang 正如上面的代码片段中看到的那样，在解构语法中，分解了 firstName 对象属性并将其分配给表达式左侧定义的变量。在上述场景中，对象的属性名称应与左侧表达式中定义的变量匹配。 如果定义其他变量名称，则获取不到想要的值，如： const fullName = { firstName: "Quintion", lastName: "Tang", }; const { firstName, trueName } = fullName; // 解构语法 console.log(firstName); // Quintion console.log(trueName); // undefined 由于在 fullName 中没有属性 trueName ，所以它被初始化为 undefined。 别名解构 如果需要把对象属性赋值给属性名不一致的变量名，可以如下代码来实现： const fullName = { firstName: "Quintion", lastName: "Tang", }; const { firstName: trueName, lastName } = fullName; // 解构语法 console.log(trueName); // Quintion console.log(lastName); // Tang 默认值解构 在上面代码中有看到，对象中不存在特定属性的解构，一般会赋值为 undefined ，如果不希望是 undefined ，可以为其设置一个默认值，如下： const fullName = { firstName: "Quintion", lastName: "Tang", }; const { firstName: trueName, lastName, age = 18 } = fullName; // 解构语法 console.log(trueName); // Quintion console.log(lastName); // Tang console.log(age); // 18 下面来看下存在 age 属性下的结果： const fullName = { firstName: "Quintion", lastName: "Tang", age: 30, }; const { firstName: trueName, lastName, age = 18 } = fullName; // 解构语法 console.log(trueName); // Quintion console.log(lastName); // Tang console.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 运算符 (...) 将变量的其余部属性分配给了一个单独的对象。 （编辑：广西网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
