【ES6】ES6的重要的13种新特性之表达式结构

解决问题:使用对象字面量和数组来模拟函数多返回值

解决方法:模式匹配

1.使用语法

ES2015中用更简洁的语法来使用对象字面量和数组来实现函数对返回值。

①使用对象作为返回载体(带有标签的多返回值)

1
2
3
4
5
6
7
8
function getState(){
return{
error: null,
loginrf: true,
user:{/*...*/}
}
}
const{error,logined,user}= getState();

②使用数组作为返回载体

数组需要让被赋予的变量/常量名按照数组的顺序获取值。

跳开数组中某些元素,可以空开一个元素。

可以不定项得获取后续的元素,用…语句来实现。

1

2.使用场景

①Promise与模式匹配

②Swap(变量值交换)

2

3.高级用法

①解构别名

在使用对象作为多返回值载体的函数中,我们需要获取其中的某个返回值,但却不想使用其中的属性名作为新的变量名/常量名,可以使用别名来获得相应的返回值。

只需要在原来的返回值名称后加上“: 别名”。

3

②无法匹配的缺省值

在模式匹配中存在无法匹配的值(载体对象中不存在相应的值或目标参数所对应下标超出了载体数组的下表范围),默认情况下会获得undefined。

如果不希望得到undefined,ES2015允许为参数赋予一个默认值。

4

③深层匹配

可以通过嵌套解构表达式来获取深层内容,而且可以在对象中嵌套数组来获取对象中的数组的某元素。

别名和缺省值也可以使用在深层匹配中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
"title":"123",
"items": [
{
"title": "image"
"media":{
"m":"xxxxx"
}
}
]}
const data = sourceData.items.map(
({title,media:{m:image}}) => ({
title,image
})
)

5

6
7
8

④配合其他新特性

for-of循环配合const,Array.entries()等特性,可以写出更好的代码。

9

附代码地址:https://github.com/JoseyDon/ES6-demo