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'