在JavaScript中解构对象和数组gydF4y2Ba
分享gydF4y2Ba
在JavaScript中，解构赋值允许您从数组或对象中提取单个项，并使用简写语法将它们放入变量中。gydF4y2Ba
在处理复杂数据时，解构可以简化代码，因为它允许您轻松地只提取所需的值、赋值默认值、忽略值以及使用gydF4y2Ba休息gydF4y2Ba属性来处理剩余的元素或属性。gydF4y2Ba
它通常用于处理api响应、函数式编程以及React和其他框架和库等场景。gydF4y2Ba
举个简单的例子，解构可以让你的代码看起来更干净，更容易阅读:gydF4y2Ba
//从这里:gydF4y2Ba常量gydF4y2Ba作者gydF4y2Ba＝gydF4y2Ba文章gydF4y2Ba．gydF4y2Ba作者gydF4y2Ba；gydF4y2Ba常量gydF4y2Ba标题gydF4y2Ba＝gydF4y2Ba文章gydF4y2Ba．gydF4y2Ba标题gydF4y2Ba；gydF4y2Ba常量gydF4y2Ba主题gydF4y2Ba＝gydF4y2Ba文章gydF4y2Ba．gydF4y2Ba主题gydF4y2Ba；gydF4y2Ba//对这个:gydF4y2Ba常量gydF4y2Ba｛gydF4y2Ba作者gydF4y2Ba，gydF4y2Ba标题gydF4y2Ba，gydF4y2Ba主题gydF4y2Ba｝gydF4y2Ba＝gydF4y2Ba文章gydF4y2Ba；gydF4y2Ba如何使用解构赋值gydF4y2Ba
解构数组gydF4y2Ba
假设我们有一个数组:gydF4y2Ba
常量gydF4y2BamyArraygydF4y2Ba＝gydF4y2Ba［gydF4y2Ba“一个”gydF4y2Ba，gydF4y2Ba“b”gydF4y2Ba，gydF4y2Ba“c”gydF4y2Ba］gydF4y2Ba；gydF4y2Ba解构提供了一种更简单、更不容易出错的方法来提取每个元素:gydF4y2Ba
常量gydF4y2Ba［gydF4y2Ba一个gydF4y2Ba，gydF4y2Ba两个gydF4y2Ba，gydF4y2Ba三个gydF4y2Ba］gydF4y2Ba＝gydF4y2BamyArraygydF4y2Ba；gydF4y2Ba// 1 = 'a'， 2 = 'b'， 3 = 'c'gydF4y2Ba你可以通过在赋值时省略值名来忽略某些值。gydF4y2Ba
常量gydF4y2Ba［gydF4y2Ba一个gydF4y2Ba，gydF4y2Ba，gydF4y2Ba三个gydF4y2Ba］gydF4y2Ba＝gydF4y2BamyArraygydF4y2Ba；gydF4y2Ba// 1 = 'a'， 3 = 'c'gydF4y2Ba或者使用rest操作符(gydF4y2Ba.．.gydF4y2Ba)以提取余下的元素:gydF4y2Ba
常量gydF4y2Ba［gydF4y2Ba一个gydF4y2Ba，gydF4y2Ba.．.gydF4y2Ba两个gydF4y2Ba］gydF4y2Ba＝gydF4y2BamyArraygydF4y2Ba；gydF4y2Ba// 1 = 'a'， 2 = ['b， 'c']gydF4y2Ba解构的对象gydF4y2Ba
解构也适用于对象:gydF4y2Ba
常量gydF4y2BamyObjectgydF4y2Ba＝gydF4y2Ba｛gydF4y2Ba一个gydF4y2Ba：gydF4y2Ba“一个”gydF4y2Ba，gydF4y2Ba两个gydF4y2Ba：gydF4y2Ba“b”gydF4y2Ba，gydF4y2Ba三个gydF4y2Ba：gydF4y2Ba“c”gydF4y2Ba｝gydF4y2Ba；gydF4y2Ba// ES6析构示例gydF4y2Ba常量gydF4y2Ba｛gydF4y2Ba一个gydF4y2Ba，gydF4y2Ba两个gydF4y2Ba，gydF4y2Ba三个gydF4y2Ba｝gydF4y2Ba＝gydF4y2BamyObjectgydF4y2Ba；gydF4y2Ba// 1 = 'a'， 2 = 'b'， 3 = 'c'gydF4y2Ba在本例中，变量名gydF4y2Ba一个gydF4y2Ba，gydF4y2Ba两个gydF4y2Ba而且gydF4y2Ba三个gydF4y2Ba匹配对象属性名。我们还可以将属性赋给任何名称的变量，例如:gydF4y2Ba
常量gydF4y2BamyObjectgydF4y2Ba＝gydF4y2Ba｛gydF4y2Ba一个gydF4y2Ba：gydF4y2Ba“一个”gydF4y2Ba，gydF4y2Ba两个gydF4y2Ba：gydF4y2Ba“b”gydF4y2Ba，gydF4y2Ba三个gydF4y2Ba：gydF4y2Ba“c”gydF4y2Ba｝gydF4y2Ba；gydF4y2Ba// ES6析构示例gydF4y2Ba常量gydF4y2Ba｛gydF4y2Ba一个gydF4y2Ba：gydF4y2Ba第一个gydF4y2Ba，gydF4y2Ba两个gydF4y2Ba：gydF4y2Ba第二个gydF4y2Ba，gydF4y2Ba三个gydF4y2Ba：gydF4y2Ba第三gydF4y2Ba｝gydF4y2Ba＝gydF4y2BamyObjectgydF4y2Ba；gydF4y2Ba//第一个= 'a'，第二个= 'b'，第三个= 'c'gydF4y2Ba解构嵌套对象gydF4y2Ba
更复杂的嵌套对象也可以被引用。gydF4y2Ba
常量gydF4y2Ba元gydF4y2Ba＝gydF4y2Ba｛gydF4y2Ba标题gydF4y2Ba：gydF4y2Ba“解构作业”gydF4y2Ba，gydF4y2Ba作者gydF4y2Ba：gydF4y2Ba［gydF4y2Ba｛gydF4y2BafirstnamegydF4y2Ba：gydF4y2Ba“克雷格”gydF4y2Ba，gydF4y2Ba姓gydF4y2Ba：gydF4y2Ba“盾牌”gydF4y2Ba｝gydF4y2Ba］gydF4y2Ba，gydF4y2Ba出版商gydF4y2Ba：gydF4y2Ba｛gydF4y2Ba的名字gydF4y2Ba：gydF4y2Ba“必威西盟体育网页登录SitePoint”gydF4y2Ba，gydF4y2BaurlgydF4y2Ba：gydF4y2Ba“https://www.必威西盟体育网页登录sitepoint.com/”gydF4y2Ba｝gydF4y2Ba｝gydF4y2Ba；gydF4y2Ba常量gydF4y2Ba｛gydF4y2Ba标题gydF4y2Ba：gydF4y2Ba医生gydF4y2Ba，gydF4y2Ba作者gydF4y2Ba：gydF4y2Ba［gydF4y2Ba｛gydF4y2BafirstnamegydF4y2Ba：gydF4y2Ba的名字gydF4y2Ba｝gydF4y2Ba］gydF4y2Ba，gydF4y2Ba出版商gydF4y2Ba：gydF4y2Ba｛gydF4y2BaurlgydF4y2Ba：gydF4y2Ba网络gydF4y2Ba｝gydF4y2Ba｝gydF4y2Ba＝gydF4y2Ba元gydF4y2Ba；gydF4y2Ba/* doc = 'Destructuring Assignment' name = 'Craig' web = 'https://www.必威西盟体育网页登录sitepoint.com/' */gydF4y2Ba这看起来有点复杂，但请记住，在所有解构赋值中:gydF4y2Ba
- 作业的左边是gydF4y2Ba解构的目标gydF4y2Ba-定义被赋值变量的模式gydF4y2Ba
- 作业的右边是gydF4y2Ba解构源gydF4y2Ba-保存被提取数据的数组或对象。gydF4y2Ba
警告gydF4y2Ba
还有其他一些注意事项。首先，你不能用花括号开始语句，因为它看起来像一个代码块。gydF4y2Ba
//失败gydF4y2Ba｛gydF4y2Ba一个gydF4y2Ba，gydF4y2BabgydF4y2Ba，gydF4y2BacgydF4y2Ba｝gydF4y2Ba＝gydF4y2BamyObjectgydF4y2Ba；gydF4y2Ba你必须声明变量，例如。gydF4y2Ba
// this worksgydF4y2Ba常量gydF4y2Ba｛gydF4y2Ba一个gydF4y2Ba，gydF4y2BabgydF4y2Ba，gydF4y2BacgydF4y2Ba｝gydF4y2Ba＝gydF4y2BamyObjectgydF4y2Ba；gydF4y2Ba如果变量已经声明，则使用括号。gydF4y2Ba
// this worksgydF4y2Ba（gydF4y2Ba｛gydF4y2Ba一个gydF4y2Ba，gydF4y2BabgydF4y2Ba，gydF4y2BacgydF4y2Ba｝gydF4y2Ba＝gydF4y2BamyObjectgydF4y2Ba）gydF4y2Ba；gydF4y2Ba你还应该警惕混合声明和未声明的变量，例如。gydF4y2Ba
//失败gydF4y2Ba让gydF4y2Ba一个gydF4y2Ba；gydF4y2Ba让gydF4y2Ba｛gydF4y2Ba一个gydF4y2Ba，gydF4y2BabgydF4y2Ba，gydF4y2BacgydF4y2Ba｝gydF4y2Ba＝gydF4y2BamyObjectgydF4y2Ba；gydF4y2Ba// this worksgydF4y2Ba让gydF4y2Ba一个gydF4y2Ba，gydF4y2BabgydF4y2Ba，gydF4y2BacgydF4y2Ba；gydF4y2Ba（gydF4y2Ba｛gydF4y2Ba一个gydF4y2Ba，gydF4y2BabgydF4y2Ba，gydF4y2BacgydF4y2Ba｝gydF4y2Ba＝gydF4y2BamyObjectgydF4y2Ba）gydF4y2Ba；gydF4y2Ba这就是解构的基础。那么什么时候它会有用呢?很高兴你这么问gydF4y2Ba
解构用例gydF4y2Ba
简单的声明gydF4y2Ba
变量可以在不显式定义每个值的情况下声明，例如:gydF4y2Ba
/ / ES5gydF4y2BavargydF4y2Ba一个gydF4y2Ba＝gydF4y2Ba“一个”gydF4y2Ba，gydF4y2BabgydF4y2Ba＝gydF4y2Ba“两个”gydF4y2Ba，gydF4y2BacgydF4y2Ba＝gydF4y2Ba“三”gydF4y2Ba；gydF4y2Ba/ / ES6gydF4y2Ba常量gydF4y2Ba［gydF4y2Ba一个gydF4y2Ba，gydF4y2BabgydF4y2Ba，gydF4y2BacgydF4y2Ba］gydF4y2Ba＝gydF4y2Ba［gydF4y2Ba“一个”gydF4y2Ba，gydF4y2Ba“两个”gydF4y2Ba，gydF4y2Ba“三”gydF4y2Ba］gydF4y2Ba；gydF4y2Ba不可否认，解构版更长。它更容易阅读，尽管项目越多情况可能就不是这样了。gydF4y2Ba
可变值交换gydF4y2Ba
交换值需要一个临时的第三个变量，但是使用析构要简单得多:gydF4y2Ba
vargydF4y2Ba一个gydF4y2Ba＝gydF4y2Ba1gydF4y2Ba，gydF4y2BabgydF4y2Ba＝gydF4y2Ba2gydF4y2Ba；gydF4y2Ba/ /交换gydF4y2Ba让gydF4y2Ba临时gydF4y2Ba＝gydF4y2Ba一个gydF4y2Ba；gydF4y2Ba一个gydF4y2Ba＝gydF4y2BabgydF4y2Ba；gydF4y2BabgydF4y2Ba＝gydF4y2Ba临时gydF4y2Ba；gydF4y2Ba// a = 2, b = 1gydF4y2Ba//替换析构赋值gydF4y2Ba［gydF4y2Ba一个gydF4y2Ba，gydF4y2BabgydF4y2Ba］gydF4y2Ba＝gydF4y2Ba［gydF4y2BabgydF4y2Ba，gydF4y2Ba一个gydF4y2Ba］gydF4y2Ba；gydF4y2Ba// a = 1, b = 2gydF4y2Ba你不受限于两个变量;任何数量的项目都可以重新安排，例如。gydF4y2Ba
//向左旋转gydF4y2Ba［gydF4y2BabgydF4y2Ba，gydF4y2BacgydF4y2Ba，gydF4y2BadgydF4y2Ba，gydF4y2BaegydF4y2Ba，gydF4y2Ba一个gydF4y2Ba］gydF4y2Ba＝gydF4y2Ba［gydF4y2Ba一个gydF4y2Ba，gydF4y2BabgydF4y2Ba，gydF4y2BacgydF4y2Ba，gydF4y2BadgydF4y2Ba，gydF4y2BaegydF4y2Ba］gydF4y2Ba；gydF4y2Ba默认函数参数gydF4y2Ba
假设我们有一个函数gydF4y2BaprettyPrint ()gydF4y2Ba输出gydF4y2Ba元gydF4y2Ba对象:gydF4y2Ba
vargydF4y2Ba元gydF4y2Ba＝gydF4y2Ba｛gydF4y2Ba标题gydF4y2Ba：gydF4y2Ba“解构作业”gydF4y2Ba，gydF4y2Ba作者gydF4y2Ba：gydF4y2Ba［gydF4y2Ba｛gydF4y2BafirstnamegydF4y2Ba：gydF4y2Ba“克雷格”gydF4y2Ba，gydF4y2Ba姓gydF4y2Ba：gydF4y2Ba“盾牌”gydF4y2Ba｝gydF4y2Ba］gydF4y2Ba，gydF4y2Ba出版商gydF4y2Ba：gydF4y2Ba｛gydF4y2Ba的名字gydF4y2Ba：gydF4y2Ba“必威西盟体育网页登录SitePoint”gydF4y2Ba，gydF4y2BaurlgydF4y2Ba：gydF4y2Ba“https://www.必威西盟体育网页登录sitepoint.com/”gydF4y2Ba｝gydF4y2Ba｝gydF4y2Ba；gydF4y2BaprettyPrintgydF4y2Ba（gydF4y2Ba元gydF4y2Ba）gydF4y2Ba；gydF4y2Ba在没有解构的情况下，有必要解析这个对象以确保适当的默认值可用，例如。gydF4y2Ba
//默认值gydF4y2Ba函数gydF4y2BaprettyPrintgydF4y2Ba（gydF4y2Ba参数gydF4y2Ba）gydF4y2Ba｛gydF4y2Ba参数gydF4y2Ba＝gydF4y2Ba参数gydF4y2Ba||gydF4y2Ba｛gydF4y2Ba｝gydF4y2Ba；gydF4y2Ba常量gydF4y2BapubTitlegydF4y2Ba＝gydF4y2Ba参数gydF4y2Ba．gydF4y2Ba标题gydF4y2Ba||gydF4y2Ba无标题的gydF4y2Ba，gydF4y2BapubNamegydF4y2Ba＝gydF4y2Ba（gydF4y2Ba参数gydF4y2Ba．gydF4y2Ba出版商gydF4y2Ba＆gydF4y2BaampgydF4y2Ba；gydF4y2Ba＆gydF4y2BaampgydF4y2Ba；gydF4y2Ba参数gydF4y2Ba．gydF4y2Ba出版商gydF4y2Ba．gydF4y2Ba的名字gydF4y2Ba）gydF4y2Ba||gydF4y2Ba“没有出版商”gydF4y2Ba；gydF4y2Ba返回gydF4y2BapubTitlegydF4y2Ba+gydF4y2Ba”、“gydF4y2Ba+gydF4y2BapubNamegydF4y2Ba；gydF4y2Ba｝gydF4y2Ba现在，我们可以为任何参数赋一个默认值，例如:gydF4y2Ba
// ES6默认值gydF4y2Ba函数gydF4y2BaprettyPrintgydF4y2Ba（gydF4y2Ba参数gydF4y2Ba＝gydF4y2Ba｛gydF4y2Ba｝gydF4y2Ba）gydF4y2Ba｛gydF4y2Ba但是我们可以使用解构来提取值并在必要时赋值:gydF4y2Ba
// ES6解构的默认值gydF4y2Ba函数gydF4y2BaprettyPrintgydF4y2Ba（gydF4y2Ba｛gydF4y2Ba标题gydF4y2Ba：gydF4y2BapubTitlegydF4y2Ba＝gydF4y2Ba无标题的gydF4y2Ba，gydF4y2Ba出版商gydF4y2Ba：gydF4y2Ba｛gydF4y2Ba的名字gydF4y2Ba：gydF4y2BapubNamegydF4y2Ba＝gydF4y2Ba“没有出版商”gydF4y2Ba｝gydF4y2Ba｝gydF4y2Ba＝gydF4y2Ba｛gydF4y2Ba｝gydF4y2Ba）gydF4y2Ba｛gydF4y2Ba返回gydF4y2BapubTitlegydF4y2Ba+gydF4y2Ba”、“gydF4y2Ba+gydF4y2BapubNamegydF4y2Ba；gydF4y2Ba｝gydF4y2Ba我不认为这更容易阅读，但它明显更短。gydF4y2Ba
从一个函数返回多个值gydF4y2Ba
函数只能返回一个值，但可以是复杂对象或多维数组。解构赋值使这更实用，例如:gydF4y2Ba
函数gydF4y2BafgydF4y2Ba（gydF4y2Ba）gydF4y2Ba｛gydF4y2Ba返回gydF4y2Ba［gydF4y2Ba1gydF4y2Ba，gydF4y2Ba2gydF4y2Ba，gydF4y2Ba3.gydF4y2Ba］gydF4y2Ba；gydF4y2Ba｝gydF4y2Ba常量gydF4y2Ba［gydF4y2Ba一个gydF4y2Ba，gydF4y2BabgydF4y2Ba，gydF4y2BacgydF4y2Ba］gydF4y2Ba＝gydF4y2BafgydF4y2Ba（gydF4y2Ba）gydF4y2Ba；gydF4y2Ba// a = 1, b = 2, c = 3gydF4y2Ba的迭代gydF4y2Ba
考虑一个图书信息数组:gydF4y2Ba
常量gydF4y2Ba书gydF4y2Ba＝gydF4y2Ba［gydF4y2Ba｛gydF4y2Ba标题gydF4y2Ba：gydF4y2Ba“全栈JavaScript”gydF4y2Ba，gydF4y2Ba作者gydF4y2Ba：gydF4y2Ba科林·伊里克和亚当·布雷茨gydF4y2Ba，gydF4y2BaurlgydF4y2Ba：gydF4y2Ba“https://www.必威西盟体育网页登录sitepoint.com/store/full-stack-javascript-development-mean/”gydF4y2Ba｝gydF4y2Ba，gydF4y2Ba｛gydF4y2Ba标题gydF4y2Ba：gydF4y2Ba“JavaScript:新手到忍者”gydF4y2Ba，gydF4y2Ba作者gydF4y2Ba：gydF4y2Ba“达伦·琼斯”gydF4y2Ba，gydF4y2BaurlgydF4y2Ba：gydF4y2Ba“https://www.必威西盟体育网页登录sitepoint.com/store/leaern-javascript-novice-to-ninja/”gydF4y2Ba｝gydF4y2Ba，gydF4y2Ba｛gydF4y2Ba标题gydF4y2Ba：gydF4y2Ba“快速开始CSS”gydF4y2Ba，gydF4y2Ba作者gydF4y2Ba：gydF4y2Ba“路易Lazaris”gydF4y2Ba，gydF4y2BaurlgydF4y2Ba：gydF4y2Ba“https://www.必威西盟体育网页登录sitepoint.com/store/jump-start-css/”gydF4y2Ba｝gydF4y2Ba，gydF4y2Ba］gydF4y2Ba；gydF4y2Ba的ES6gydF4y2Ba的gydF4y2Ba类似于gydF4y2Ba工党gydF4y2Ba，除了它提取每个值而不是索引/键，例如。gydF4y2Ba
为gydF4y2Ba（gydF4y2Ba常量gydF4y2BabgydF4y2Ba的gydF4y2Ba书gydF4y2Ba）gydF4y2Ba｛gydF4y2Ba控制台gydF4y2Ba．gydF4y2Ba日志gydF4y2Ba（gydF4y2BabgydF4y2Ba．gydF4y2Ba标题gydF4y2Ba+gydF4y2BabygydF4y2Ba+gydF4y2BabgydF4y2Ba．gydF4y2Ba作者gydF4y2Ba+gydF4y2Ba“:”gydF4y2Ba+gydF4y2BabgydF4y2Ba．gydF4y2BaurlgydF4y2Ba）gydF4y2Ba；gydF4y2Ba｝gydF4y2Ba解构赋值提供了进一步的增强，例如:gydF4y2Ba
为gydF4y2Ba（gydF4y2Ba常量gydF4y2Ba｛gydF4y2Ba标题gydF4y2Ba，gydF4y2Ba作者gydF4y2Ba，gydF4y2BaurlgydF4y2Ba｝gydF4y2Ba的gydF4y2Ba书gydF4y2Ba）gydF4y2Ba｛gydF4y2Ba控制台gydF4y2Ba．gydF4y2Ba日志gydF4y2Ba（gydF4y2Ba标题gydF4y2Ba+gydF4y2BabygydF4y2Ba+gydF4y2Ba作者gydF4y2Ba+gydF4y2Ba“:”gydF4y2Ba+gydF4y2BaurlgydF4y2Ba）gydF4y2Ba；gydF4y2Ba｝gydF4y2Ba正则表达式处理gydF4y2Ba
正则表达式函数，如gydF4y2Ba匹配gydF4y2Ba返回一个匹配项的数组，它可以形成析构赋值的源:gydF4y2Ba
常量gydF4y2Ba［gydF4y2Ba一个gydF4y2Ba，gydF4y2BabgydF4y2Ba，gydF4y2BacgydF4y2Ba，gydF4y2BadgydF4y2Ba］gydF4y2Ba＝gydF4y2Ba“一二三”gydF4y2Ba．gydF4y2Ba匹配gydF4y2Ba（gydF4y2Ba/gydF4y2Ba\ w +gydF4y2Ba/gydF4y2BaggydF4y2Ba）gydF4y2Ba；gydF4y2Ba// a = ' 1 '， b = ' 2 '， c = ' 3 '， d = undefinedgydF4y2Ba进一步的阅读gydF4y2Ba
