es2017有什么新特性？

发表于 | 分类于 | | 阅读次数:

ECMAScript的版本现在已经进行到2017了，前端社区这几年的蓬勃发展让JS这个本来有着很多缺陷的浏览器脚本语言成为现在应用广泛，特性完备的新时代“主流语言”。我们一边在感叹技术发展太快感到疲惫的同时，又为前端世界越来越好感到高兴。本文我们来看一下ES2017有哪些新特性！

什么是ECMAScript

ECMAScript是javascript的子集，在网景公司最初引用javascript作为浏览器监本语言之后，不同浏览器厂商发明了与javascript类似的脚本语言，比如ActionScript, JScript。但是这样很明显对开发者很不友好，阻碍了前端乃至web世界的发展，为了标准化，网景公司将javascript提交给了欧洲计算机制造商协会（European Computer Manufacturers Association）进行标准化的工作，并编号为ECMA-262，所以因为这样的历史原因，现在我们讨论的就是ECMAScript。

在ECMA中有两种组织，分别是Technical Committees和Technical Groups，负责不同领域的标准化工作，其中负责ECMAScript的是TC39。

在每个版本的推出过程中，有时候会因为某些特性推迟时间过长导致整个版本的推出时间延迟，比如es5和se6之间隔了六年。为了避免这个问题，TC39将计划标准化的feature划分几个级别，表示它现在所处的状态。

他们分别是：

  • stage-0 strawman 稻草人。组织成员或者注册开发者提交的建议，说实话不太理解外国人的命名…..
  • stage-1 proposal 提案。筛选出来的正式提案。在这个阶段的feature就表明TC39愿意花时间去做这个事情。
  • stage-2 draft 草案。TC39已经做了一些工作，需要未来的实现。
  • stage-3 candidate 候选。到这个阶段的feature差不多已经做完了，就差一下修修补补的工作了。
  • stage-4 finished　结束。所有的标准化已经完成了，马上就会发布在下一个版本的标准当中。

通过采用这样的方法，TC39计划每年发布一个新版本，这为ECMAScript的蓬勃发展提供了保证。

新特性

es2017相对于2016来说更新了较大一部分feature。下面我们来分别聊一下。

异步函数

异步函数是这次更新的额一个重要部分，js作为一个以异步为卖点的语言竟然到现在才支持异步函数也是神奇。异步函数的用法很简单，只需要在声明的前面加一个async关键字即可。

1
2
3
4
5
6
7
async function foo () {}

const foo = async function () {}

const obj = { async function () {} }

const foo = async () => {}

值得注意的是，所有异步函数返回的额都是一个Promise对象。因此我们可以按照处理Promise的代码来处理异步函数。（关于编写异步的Javascript代码我另外写了一篇文章）。

###　对象遍历

新增了Object.values 和 Object.entries两个方法，新增的两个方法使得遍历对象更加方便，之前我们对象的方法通常是用Object.keys, for…in, for…of。三种方法都不是很直接，因为我们通常更关心的是每个对象的value，而不是key。新增的方法很好的弥补了这个缺陷。

第一个方法输入一个对象，输出一个包含对象所有值的数组。

1
2
3
4
5
6
7
const obj = {
    name: "zhuhaihao",
    age : "22"
}

const values = Object.values(obj)
// ["zhuhaihao", 22]

第二个方法输入一个对象,输出一个元素为键值数组的二维数组。我们可以这么使用：

1
2
3
4
5
6
7
8
9
10
11
const obj = {
    name: "zhuhaihao",
    age : "22"
}

for (let [k, v] of Object.entries(obj)) {
    console.log(`${JSON.stringify(k)}:${JSON.stringify(v)}`)
}

// "name": "zhuhaihao"
// "age": "22"

函数参数列表中允许逗号

在对象和数组中，这个语法特性早已被实现，不过说实话，这个特性对我来说并没有什么用处。

1
2
3
4
5
function foo(a, b,) {
  console.log(`${a} and ${b}`);
}

foo("zhuhaihao", "shanzi");

字符串填充

新增了两个字符串填充方法：String.padStart() 和 String.padEnd()，分别在字符串的左边和右边填充字符。

1
2
3
4
5
6
7
8
9
10
11
// String.prototype.padStart(maxLength, fillString="")
'zhu'.padStart(10)              // "       zhu"
'zhu'.padStart(10, 'h')         // "hhhhhhhzhu"
'zhu'.padStart(10, 'zhuhaihao') // "zhuhaihzhu"
'zhu'.padStart(1)               // "zhu"

// String.prototype.padEnd(maxLength, fillString="")
'zhu'.padEnd(10)                // "zhu       "
'zhu'.padEnd(10, 'h')           // "zhuhhhhhhh"
'zhu'.padEnd(10, 'zhuhaihao')   // "zhuzhuhaih"
'zhu'.padEnd(1)                 // "zhu"

还有两个新增特性分别是Object.getOwnPropertyDescriptors()和Shared Memory, Atomics。自己平时还接触不到使用场景，这里就不做探讨了～

感谢阅读～

有钱的捧个钱场，没钱的捧个人场