解构-重要知识点

一、对象解构

解构-重要知识点

在此代码中, node.type 的值被存储到 type 本地变量中, node.name 的值则存储到name 变量中。此语法相同于简写的属性初始化器。 type 与 name 标识符既声明了本地变量,也读取了对象的相应属性值。

以上对象解构示例都用于变量声明。不过,也可以在赋值的时候使用解构。例如,你可能想
在变量声明之后改变它们的值,如下所示:

解构-重要知识点

在本例中, type 与 name 属性在声明时被初始化,而两个同名变量也被声明并初始化为不同的值。接下来一行使用了解构表达式,通过读取 node 对象来更改这两个变量的值。注意你必须用圆括号包裹解构赋值语句,这是因为暴露的花括号会被解析为代码块语句,而块语句不允许在赋值操作符(即等号)左侧出现。圆括号标示了里面的花括号并不是块语句、而应该被解释为表达式,从而允许完成赋值操作。

二、解构赋值表达式的值为表达式右侧(在 = 之后)的值

解构-重要知识点

outputInfo() 函数被使用一个解构赋值表达式进行了调用。该表达式计算结果为 node ,因为这就是表达式右侧的值。对 type 与 name 的赋值正常进行,同时 node 也被传入了outputInfo() 函数。

当解构赋值表达式的右侧( = 后面的表达式)的计算结果为 null 或 undefined 时,会抛出错误。因为任何读取 null 或 undefined 的企图都会导致“运行时”错误(runtime error )。

三、默认值

当你使用解构赋值语句时,如果所指定的本地变量在对象中没有找到同名属性,那么该变量会被赋值为 undefined 。例 

解构-重要知识点

你可以选择性地定义一个默认值,以便在指定属性不存在时使用该值。若要这么做,需要在属性名后面添加一个等号并指定默认值,就像这样:

解构-重要知识点

在此例中,变量 value 被指定了一个默认值 true ,只有在 node 的对应属性缺失、或对应的属性值为 undefined 的情况下,该默认值才会被使用。 

四、重新指定变量名

ES6 有一个扩展语法,允许你在给本地变量赋值时使用一个不同的名称,而且该语法看上去就像是使用对象字面量的非简写的属性初始化。

解构-重要知识点

你也可以给变量别名添加默认值,依然是在本地变量名称后添加等号与默认值,例如: 

解构-重要知识点

五、嵌套的对象解构 

使用类似于对象字面量的语法,可以深入到嵌套的对象结构中去提取你想要的数据。

解构-重要知识点

本例中的解构模式使用了花括号,表示应当下行到 node 对象的 loc 属性内部去寻找start 属性。记住上一节介绍过的,每当有一个冒号在解构模式中出现,就意味着冒号之前的标识符代表需要检查的位置,而冒号右侧则是赋值的目标。当冒号右侧存在花括号时,表示目标被嵌套在对象的更深一层中。

六、数组解构

解构-重要知识点

你也可以在解构模式中忽略一些项,并且只给感兴趣的项提供变量名。例如,若只想获取数组中的第三个元素,那么不必给前两项提供变量名。以下展示了这种方式:

解构-重要知识点

七、数组解构赋值

你可以在赋值表达式中使用数组解构,但是与对象解构不同,不必将表达式包含在圆括号内,例如:

解构-重要知识点

数组解构赋值有一个非常独特的用例,能轻易地互换两个变量的值。

解构-重要知识点

八、数组结构默认值

解构-重要知识点

九、数组嵌套的解构

与解构嵌套的对象相似,可以用类似的方式来解构嵌套的数组。在整个解构模式中插入另一个数组模式,解构操作就会下行到嵌套的数组中

解构-重要知识点

十、数组解构剩余项

相比函数的剩余参数,数组解构有个类似的、名为剩余项( rest items )的概念,它使用 ... 语法来将剩余的项目赋值给一个指定的变量,此处有个范例:

解构-重要知识点

十一、剩余项的另一个有用的功能是克隆数组

方便地克隆数组在 JS 中是个明显被遗漏的功能。在 ES5 中开发者往往使用的是一个简单的
方式,也就是用 concat() 方法来克隆数组,例如:

解构-重要知识点 

尽管 concat() 方法的本意是合并两个数组,但不使用任何参数来调用此方法,就会获得原数组的一个克隆品。而在 ES6 中,你可以使用剩余项的语法来达到同样效果。实现如下:

解构-重要知识点

剩余项必须是数组解构模式中最后的部分,之后不能再有逗号,否则就是语法错误。

十二、混合解构 

对象与数组解构能被用在一起,以创建更复杂的解构表达式。在对象与数组混合而成的结构中,这么做便能准确提取其中你想要的信息片段。例如:

解构-重要知识点

十三、参数解构-解构还有一个特别有用的场景,即在传递函数参数 

参数解构提供了更清楚地标明函数期望输入的替代方案。它使用对象或数组解构的模式替代了具名参数。要看到其实际效果,请查看下例中重写版本的 setCookie() 函数:

解构-重要知识点

此函数的行为类似上例,但此时第三个参数使用了解构来抽取必要的数据。现在对于setCookie() 函数的使用者来说,解构参数之外的参数明显是必需的;而可选项目存在于额外的参数组中,这同样是非常明确的;同时,若使用了第三个参数,其中应当包含什么值当然也是极其明确的。解构参数在没有传递值的情况下类似于常规参数,它们会被设为undefined 。 

参数解构拥有此前你在本章已经学过的其他解构方式的所有能力。你可以在其中使用默认参数、混合解构,或使用与属性不同的变量名

 十四、函数解构的参数是必需的

参数解构有一个怪异点:默认情况下调用函数时未给参数解构传值会抛出错误。例如,用以下方式调用上例中的 setCookie() 函数就会出错:

解构-重要知识点

没有传递结构参数时,相当于第三个参数是undefined,既然在赋值右侧的值为 null 或 undefined 时,解构会抛出错误,那么未向 setCookie()函数传递第三个参数就同样会出错。

若你让解构的参数作为必选参数,那么上述行为并不会令人困扰。但若你要求它是可选的,可以给解构的参数提供默认值来处理这种行为,就像这样:

解构-重要知识点

 十五、参数解构的默认值

你可以为参数解构提供可解构的默认值,就像在解构赋值时所做的那样,只需在其中每个参数后面添加等号并指定默认值即可。

解构-重要知识点

备注:文章内容来源于《深入理解ES6翻译完整版》