关于 JavaScript，我们得到了一种从对象中提取属性的非常有用的方法。
解构辅助也可以使用于数组,但是大多是还是对对象使用
假设我们有一个用户对象并且想要提取各个变量的属性。
const user = {
name: 'Chris',
age: 33,
};
在 ES2015 之前，我们必须像这样显式地分配这些变量：
let name = user.name;
这仍然适用于现代 JavaScript。但是，它可以进行优化。我们可以省略name属性的双重使用绑定并像这样解构属性。
const { name, age } = user;
console.log(name);
// Chris
console.log(age);
// 33
我们不必重复命名变量，可以直接将它们分配给它们的变量。
解构并保留一个rest对象
假设您有一个具有多个字段的对象。您希望提取其中一个字段，并跟踪剩余的内容。
您可能认为我们需要对所有剩下的属性赋值，但这是通过使用spread操作符内置的。
const user = {
name: 'Chris',
age: 33,
username: 'DailyDevTips',
};
const { name, ...rest } = user;
console.log(name);
// Chris
console.log(rest);
// { age: 33, username: 'DailyDevTips' }
分解嵌套的对象属性
通常，你的对象会有多个层。通过解构，我们还可以针对嵌套属性。
const user = {
name: 'Chris',
age: 33,
username: 'DailyDevTips',
address: {
country: 'South Africa',
postalCode: '7700',
},
};
让我们以上面的例子为例。我们怎么能一口气把这个国家抽走?
const {
address: { country },
} = user;
console.log(country);
// South Africa
但是如果我们想提取整个地址对象和国家，会发生什么呢?
在上面的例子中，如果我们试图记录地址，它会说:ReferenceError: address未定义。
然而，我们可以像这样简单地在解构中传递另一个引用:
const {
address: { country },
address,
} = user;
console.log(address);
// { country: 'South Africa', postalCode: '7700' }
console.log(country);
// South Africa
使用不同的名称进行解构
也许您想在不同的名称下解构某些属性。
让我们以上面的例子为例，声明我们希望接收名为shippingAddress的地址对象。
我们可以使用分号:分隔符来处理新名称。
const { address: shippingAddress } = user;
console.log(shippingAddress);
// { country: 'South Africa', postalCode: '7700' }
这是创建可以直接使用的变量的好方法。
解构可能为空的值
让我们重新获取我们的用户对象，我们已经解构了age，但我忘了说这是一个可选参数。
有些用户可能选择不设置它。在这种情况下，我们可以使用默认值。
注意:这对于age属性来说有点奇怪，所以将其作为一个示例
const user = {
name: 'Chris',
age: 33,
};
const { age } = user;
console.log(age);
// 33
这很好，但让我们看看没有age属性的用户。
const user = {
name: 'Yaatree',
};
const { age } = user;
console.log(age);
// undefined
如果想设置默认年龄，可以用一个值来解构它。
const { age = 25 } = user;
console.log(age);
// 25
在循环中解构
上述所有示例都基于平面对象，但大多数情况下，您将拥有一个用户数组。
const users = [
{
name: 'Chris',
age: 33,
},
{
name: 'Yaatree',
age: 2,
},
];
我们可以循环遍历这些项，并在循环中解构它们。
for (let { name, age } of users) {
console.log(`User: ${name} is ${age} years old 🎉`);
}
// 'User: Chris is 33 years old 🎉'
// 'User: Yaatree is 2 years old 🎉'
动态名称解构
当我们只知道要在运行时分解的变量时，会发生什么?
假设用户单击一个按钮，该按钮允许他们从对象中提取一个随机属性。
该处理程序将具有以下属性。
const getProperty = 'name';
// 我们怎么从用户那里得到这个呢?
要使用它，我们可以使用方括号注释。
const { [getProperty]: returnValue } = user;
console.log(returnValue);
// Chris
从函数中解构
假如我们有一个返回对象的函数
const getProduct = () => {
return {
id: 1,
name: 'Macbook',
};
};
如果我们调用他
const product = getProduct();
console.log(product);
// { id: 1, name: 'Macbook' }
但是我们只要id我们可以这样做
const { id } = getProduct();
console.log(id);
// 1
