ES6（ES2015）的发布，为JavaScript处理对象属性提供了更方便快捷的方式。这种机制称为Destructuring（也称为解构赋值）。但是你真的知道怎么用吗？你真的了解解构赋值在各种场景下的用法吗？使用解构从对象中获取值对象解构的最基本用途是从对象中检索属性键的值。例如，我们定义一个对象，它有两个属性：name和ageconstUser={name:'forthefront-end',age:18}传统上，我们会使用点（.）符号或下标（[]）符号来表示从对象中检索值。下面的代码片段显示了使用点符号从对象中检索值的示例，以检索对象的值id和名称。在employee之前，我们想获取对象中某个属性的值，通常使用.或者[]。constname=User['name'];constage=User.age;当然这两种方法在目前的情况下是没有问题的，但是当User的属性比较多的时候，我们不得不不停的复制粘贴，导致很多Duplicatecode。通过结构赋值，我们可以快速获取值。例如我们使用对象的键名来创建变量并将对象的值赋给同一个键。这样一来，不管属性有多少，我们只需要给属性名赋值，也减少了很多重复代码。const{姓名，年龄}=用户；使用解构获取嵌套对象的值在上面的例子中，User只是一个简单的单层对象，我们在日常开发中也会遇到嵌套对象，那么使用struct赋值，我们如何获取嵌套对象中的值.接下来，我们重新定义User对象，并为该对象添加一个联系人属性，其中包含User的电话。constUser={name:'Front-end',age:'18',contact:{phone:'110',}}如果我们当时来回使用phone的值，需要两次。constphone=用户.contact.phone;如果使用解构赋值：写法如下：const{contact:{phone}}=Userconsole.log(phone)//输出10，不管嵌套多少层，只要按照这个写法，它肯定会得到一个特定的值。使用对象解构来定义新变量及其默认值。当然，在日常的开发过程中，我们可能会遇到很多极端的情况。例如，从后端传来的对象中可能缺少某些字段。constUser={name:'从事前端',}或者属性没有具体值：constUser={name:'从事前端',age:''}当我们使用解构赋值时：不管是否有年龄属性，将创建年龄变量。const{姓名，年龄}=雇员；当User.age没有具体值时，我们可以使用const{name,age=18}=employee;给年龄一个默认值。新变量仍然存在，等待。解构部分展示了更多魔法！我如何创建一个全新的变量并分配一个使用对象的属性值计算的值？听起来很复杂？这是一个例子，当我们要输出User属性的组合值时，我们应该怎么做呢？const{name,age,detail=`${name}今年${age}`}=User;console.log(detail);//输出：前端18年使用JavaScript对象解构别名在JavaScript对象解构中，可以将解构变量命名为alias。减少变量名冲突的机会非常方便。constUser={name:'forfront-end',age:''}假设我们要使用解构赋值来获取age属性的值，但是代码中已经有变量age了，我们需要定义一个别名在此时的结构。const{age:userAge}=User;console.log(userAge);//做前端如果使用age会报错安慰。日志（年龄）；*使用对象解构来处理动态名称属性我们经常将API响应数据作为JavaScript对象来处理。这些对象可能包含动态数据，因此作为客户端我们甚至可能事先不知道属性键名。constUser={name:'商头的夏',age:''}当我们将key作为参数传递时，我们可以写一个函数返回User对象的属性值。这里我们用[]接受参数，js会根据这个key对从对象中取出来！functiongetPropertyValue(key){const{[key]:returnValue}=User;returnreturnValue;}constcontact=getPropertyValue('contact');constname=getPropertyValue('name');console.log(contact,name);//空前端解构对象解构赋值和参数传入函数参数和返回值使用对象解构将属性值作为参数传递给函数。constUser={name:'Frontend',age:18}name现在让我们创建一个简单的函数，它使用和属性值创建消息部门以登录到浏览器控制台。functionconsoleLogUser({name,age}){console.log(`${name}今年${age}`);}直接将值作为函数参数传递，并在内部使用。consoleLogUser（用户）；//半夏今年搞前端18析构对象返回值对象析构函数还有一个用法。如果函数返回一个对象，您可以将值直接解构为一个变量。让我们创建一个返回对象的函数。functiongetUser(){return{'name':'Front-end','age':18}}const{age}=getUser();console.log(age);//18在循环中使用对象解构最后（但并非最不重要）要讨论的用法是循环解构。让我们考虑一组员工对象。我们想遍历数组，想使用每个员工对象的属性值。constUser=[{'name':'爱分享','age':16},{'name':'前端','age':18},{'name':'代码输入','年龄'：20}];您可以使用for-of循??环迭代User对象，然后使用对象解构赋值语法来检索详细信息。for(let{name,age}ofemployees){console.log(`${name}今年是${age}岁!!!`);}关键字：前端训练
