成为VIP
简介
JavaScript对象可用于存储数据以及之后数据的检索。我们通常将数据（信息）存储在键值对中。键值对也称为对象属性。
下面的employee对象有三个属性：id、name和dept作为键，以及007、’James’和’Spy’作为值。
const employee = {
id: 007,
name: 'James',
dept: 'Spy'
}
自ES6（ECMAScript 2015）起，JavaScript提供了一种以更具创新性方式处理对象属性的机制。该机制就是解构（也称为解构赋值）。与其说特性，它更像是一种添加到编程语言中的新语法。
本文将介绍作为web开发人员必须了解的对象解构的最重要用法，以成为更能干和更高效的开发人员。
使用解构从对象中检索值
对象解构最基本的用法是从对象中检索属性键的值。
const employee = {
id: 007,
name: 'James',
dept: 'Spy'
}
我们习惯于使用点(.)操作符或下标([])从对象中检索值。
下面的代码片段为使用点(.)操作符从employee对象中检索id和name值的示例。
const id = employee.id;
const name = employee.name;
毫无疑问，这运行良好。但是，当你面对许多属性值时，那么敲这些代码（或复制粘贴编辑）就很麻烦了。这就是解构赋值语法能成为救星的地方。
要从对象中解构值，你可以使用像这样的语法，
const { id, name } = employee;
我们使用对象的键名来创建变量js循环对象，并将对象的值分配给相同的键。上面的代码片段检索了id和name的值而无需多行分别输入。
即使你有20个值要检索，也只需用逗号指定这些键名即可。工作量大大减少！！！
使用解构从嵌套对象中检索值
实际的数据对象可能不像上面举例的employee对象那么简单。对象的键可以由另一个对象作为值并形成嵌套对象。现在让我们看看如何从嵌套对象中检索键值。
employee对象中dept键的值是一个对象。属性address的值是另一个对象。刚好可以作为嵌套对象的示例。
const employee = {
id: 007,
name: 'James',
dept: {
id: 'D001',
name: 'Spy',
address: {
street: '30 Wellington Square',
city: 'Chelsea'
}
}
}
先以传统方式检索address属性的值。
const address = employee.dept.address;
这样是可以工作的，以下是输出结果：
{
"street": "30 Wellington Square",
"city": "Chelsea"
}
继续检索street属性的值：
const street = employee.dept.address.street;
显而易见，键入内容变多了，现在的输出是，
30 Wellington Square
有了解构，事情就简单了。
你可以使用其原有键定义键名。要检索address的值js循环对象，我们可以从其原有键dept开始。dept是没有父级的顶级键。
所以语法是这样的，
const { dept: { address } } = employee;
console.log(address);
对于street属性，
const { dept: { address: { street } } } = employee;
console.log(street);
使用对象解构定义新变量
可能存在检索对象值时不确定对象是否具有特定键的情况。另外，你可能想要创建具有默认值的新变量，以防对象中的键不可用。
以此employee对象为例，
const employee = {
id: 007,
name: 'James',
dept: 'Spy'
}
现在假设我们正在尝试检索对象中不存在的age属性的值。传统的一种方法是，
const age = employee.age ? employee.age : 25;
如果可以找到age属性，则访问它的值并将其分配给变量，否则，分配默认值25。
那么，我们如何使用我们目前所学的对象解构语法来实现呢？
很简单！
const { name, age=25 } = employee;
console.log(age);
如你所见，我们可以通过指定键名和默认值来轻松完成此操作。与我们刚刚了解的传统方式具有相似的影响。
那么，如何创建一个全新的变量并分配使用对象属性值计算的值呢？听起来很复杂？
请看这个例子，
const {name, dept, message = `${name} is ${dept}`} = employee;
console.log(message);
我们创建了一个message变量并分配了使用employee对象的name和dept属性值计算的值。强吧！
输出是：
James is Spy
如何使用JavaScript对象解构别名？
在JavaScript对象解构中，你可以给解构变量一个别名。这对减少变量名冲突会非常方便。
const employee = {
id: 007,
name: 'James',
dept: 'Spy'
}
假设源代码有一个名为dept的现有变量。所以如果我们在解构中使用相同的变量名，就会出现命名冲突。
与此相反，你可以使用别名来创建具有此新名称的变量。例如，在这种情况下使用别名department。
const { dept: department } = employee;
console.log(department); //Spy
请注意，我们使用了别名进行解构，而不是使用仍未定义的实际键名。
console.log(dept);
输出：
使用对象解构处理动态name属性
我们经常将API响应数据作为JavaScript对象处理。这些对象可能包含动态数据，因此作为客户端，我们甚至可能事先不知道属性键名称。
通过一个例子来理解（还是employee对象）
const employee = {
id: 007,
name: 'James',
dept: 'Spy'
}
当我们将键作为参数传递时，可以编写返回employee对象属性值的函数吗？可以，这意味着不在函数中硬编码键名，它得是动态的函数。
下面是展示我们如何调用该函数的代码片段。
const id = getPropertyValue('id');
const name = getPropertyValue('name');
console.log(id, name); // 7 'James'
现在我们来定义。
function getPropertyValue(key) {
const { [key]: returnValue } = employee;
return returnValue;
}
注意解构赋值中key周围的方括号（[..]）。计算传递给函数的键，从对象中检索值。是不是很酷？
在函数参数和返回值中解构对象
如果你想探索现代基于JavaScript的框架/库，如React、Vue、Svelte、Angular等，你必须学习这种用法。使用对象解构将属性值作为参数传递给函数。
employee对象，
const employee = {
id: 007,
name: 'James',
dept: 'Spy'
}
现在创建一个简单的函数，该函数使用name和dept属性值创建一条消息以登录到浏览器控制台。
function logEmployee({name, dept}) {
console.log(`${name} is ${dept}`);
}
特别简单。不需要将整个对象作为参数，只要选择所需的属性值即可。你可以直接将值作为函数参数传递并在函数内部使用。
现在调用该函数，
logEmployee(employee); // James is Spy
对象解构函数还有另一种用法。如果函数返回对象，则可以将值直接解构为变量。创建一个返回对象的函数：
function getUser() {
return {
'name': 'Alex',
'age': 45
}
}
现在，如果你有兴趣检索age属性的值，你可以这样做，
const { age } = getUser();
console.log(age); // 45
确实可以节省大量额外敲代码的时间。
在循环中使用对象解构
我们要讨论的最后一个（但并非最不重要的）用法是循环中的解构。考虑一个employee对象数组。我们要遍历数组并使用每个employee对象的属性值。
const employees= [
{
'name': 'Alex',
'address': '15th Park Avenue',
'age': 43
},
{
'name': 'John',
'address': 'USA',
'age': 33
},
{
'name': 'Ravi',
'address': 'Bangalore',
'age': 16
}
];
你可以使用for-of循环遍历employees对象，然后使用对象解构赋值语法来检索详细信息。让我们在浏览器控制台中记录每个employee的name和age。
for(let {name, age} of employees) {
console.log(`${name} is ${age} years old!!!`);
}
输出：
非常整洁。我真是太喜欢对象解构了。
总结
时间就是金钱。你节省的越多，生产的产品就越多。对象解构语法可以为我们节省时间。不要犹豫，赶紧投入实践吧。
很高兴能与大家分享我在对象解构方面的经验。感谢大家的阅读。
（文本完）
限时特惠：本站每日持续更新海量设计资源，一年会员只需29.9元，全站资源免费下载
站长微信：ziyuanshu688
htebazile
