JavaScript对象结构技巧

1、对象结构

关于JavaScript，我们得到了一种从对象中提取属性的非常有用的方法

注意：解构也适用于数组

在ES2015之前，我们访问对象属性的方法

 const user = {
     name:'王涵宇',
     age:20,
 }
 //访问属性
 var name = user.name
 var age = user.age

简单而好用的结构方法

 const user = {
     name:'王涵宇',
     age:20,
 }
 //访问属性
 const {name,age} = user
 console.log(name)  //王涵宇
 console.log(age)   //20

2、解构并保留一个休息对象永久链接

假设有一个包含多个字段的对象，你想提取其中一个字段并跟踪剩余的任何内容，我们可以通过使用内置的扩展运算符

 const user = {
     name:'王涵宇',
     age:20,
     username:'Ustinian',
 }
 const {name,...rest} = user
 console.log(name)  //王涵宇
 console.log(rest)  //{age: 20, username: 'Ustinian'}

3、解构嵌套对象属性永久链接

很多时候，你的对象具有很多层，我们可以通过解构，可以针对嵌套属性

 const user = {
     name:'王涵宇',
     age:20,
     username:'Ustinian',
     address:{
         country:'China',
         post:430000,
     }
 }
 const {
     address:{country}
 } = user
 console.log(country)    //China
 console.log(address)

问：如果我们想要提取这个地址和国家会发生什么？

console.log(address)    //ReferenceError: address is not defined

解决方法：我们可以在解构中传递这样一个引用

 const {
     address:{country},
     address,
 } = user
 console.log(country)    //China
 console.log(address)    //{country: 'China', post: 430000}

3、用不同的名字解构永久链接

也许您想以不同的名称来解构某些属性

以上面示例为例，我们可以自己name一个名称

 const {
     address:{country},
     address:ariaAddress
 } = user
 console.log(ariaAddress)        //{country: 'China', post: 430000}

这是创建直接使用变量的好方法

4、解构潜在的空值永久链接

让我们重新获取我们的用户对象，年龄属性已经解构，但这是一个可选参数，一些用户选择不设置年龄，我们也可以使用默认值。

 const user = {
     name:'王涵宇',
 }
 const {age} = user
 console.log(age)    //undefined

如果我们设置一个默认值，可以用一个值来结构ta

 /*
     以上面实例为例
 */
 const {age = 33} = user
 console.log(age)    //33

5、在循环内解构永久链接

注：以上示例均基于平面对象，在实际开发中，您将用于一组用户

 const users = [ //这里得是数组，换成对象不可以
     {
         name:'王涵宇',
         age:20,
     },
     {
         name:'Ustinian',
         age:21,
     },
 ];
 for(let {name,age} of users){
     console.log(`User: ${name} is ${age} years old !`)
 }

我们可以遍历这些项目并在循环内解构它们

 for(let {name,age} of users){
     console.log(`User: ${name} is ${age} years old !`)
 }
 /*
 User: 王涵宇 is 20 years old !
 User: Ustinian is 21 years old !
 */

6、在函数中解构永久链接

假设有一个返回对象的函数

 const getObject = ()=>{
     return {
         id:1,
         name:'Ustinian',
     }
 }

如果我们默认调用它，它将会如下所示

 const o = getObject()
 console.log(o)  //{id: 1, name: 'Ustinian'}

如果我们想要获取某个指定属性

 const {id,name} = getObject()
 console.log(id,name)    //1 'Ustinian'