文档章节

ECMAScript2017 新特性(ES8)

爱敲代码的程序员
 爱敲代码的程序员
发布于 02/11 16:35
字数 1832
阅读 731
收藏 13

什么是 ES8

ES8 是 ECMA-262 标准第 8 版的简称,从 ES6 开始每年发布一个版本,以年份作为名称,因此又称 ECMAScript 2017,简称 ES2017。

每年一个版本

两个版本之间间隔时间太久(从 ES5 到 ES6 经历了 6 年)会有以下两个问题:

  • 有很多早已讨论完毕的特性需要等到标准的大版本发布才能进入标准

  • 有一些特性本身比较复杂,需要较长的时间去讨论。但如果推迟到下一个版本,又必须等待很长的时间才能发布

从 ES6 开始新版本发布会更频繁,每年发布一个版本,把这一年内讨论完毕的特性纳入标准。

 

TC39 流程

TC39(Technical Committee 39)是一个推动 JavaScript 发展的委员会。它的成员由各个主流浏览器厂商的代表构成。会议的每一项决议必须大部分人赞同,并且没有人强烈反对才可以通过。因为,对成员来说,同意就意味着有责任去实现它。每个 ECMAScript 特性都会经历 stage 0 到 stage 4 的每一个阶段。在 TC39 proposals 这个 github 仓库可以看到每个特性的进度。

Stage 0: strawman

一种推进 ECMAScript 发展的自由形式,任何 TC39 成员,或者注册为 TC39 贡献者的会员,都可以提交。

Stage 1: proposal

该阶段产生一个正式的提案。

  1. 确定一个带头人来负责该提案,带头人或者联合带头人必须是 TC39 的成员。

  2. 描述清楚要解决的问题,解决方案中必须包含例子,API 以及关于相关的语义和算法。

  3. 潜在问题也应该指出来,例如与其他特性的关系,实现它所面临的挑战。

  4. polyfill 和 demo 也是必要的。

Stage 2: draft

草案是规范的第一个版本,与最终标准中包含的特性不会有太大差别。草案之后,原则上只接受增量修改。

  1. 草案中包含新增特性语法和语义的,尽可能的完善的形式说明,允许包含一些待办事项或者占位符。

  2. 必须包含 2 个实验性的具体实现,其中一个可以是用转译器实现的,例如 Babel。

Stage 3: candidate

候选阶段,获得具体实现和用户的反馈。此后,只有在实现和使用过程中出现了重大问题才会修改。

  1. 规范文档必须是完整的,评审人和 ECMAScript 的编辑要在规范上签字。

  2. 至少要有两个符合规范的具体实现。

Stage 4: finished

已经准备就绪,该特性会出现在年度发布的规范之中。

  1. 通过 Test 262 的验收测试。

  2. 有 2 个通过测试的实现,以获取使用过程中的重要实践经验。

  3. ECMAScript 的编辑必须规范上的签字。

新特性

1. String padding

新增了 String.prototype.padStart 和 String.prototype.padEnd 两个函数,用于在字符串开头或结尾添加填充字符串。函数的声明如下:

String.prototype.padStart( maxLength [ , fillString ] )

String.prototype.padEnd( maxLength [ , fillString ] )

其中第一个参数是目标长度;第二个参数是填充字符串,默认是空格。示例:

'es8'.padStart(2);          // 'es8'

'es8'.padStart(5);          // '  es8'

'es8'.padStart(6, 'woof');  // 'wooes8'

'es8'.padStart(14, 'wow');  // 'wowwowwowwoes8'

'es8'.padStart(7, '0');     // '0000es8'


'es8'.padEnd(2);          // 'es8'

'es8'.padEnd(5);          // 'es8  '

'es8'.padEnd(6, 'woof');  // 'es8woo'

'es8'.padEnd(14, 'wow');  // 'es8wowwowwowwo'

'es8'.padEnd(7, '6');     // 'es86666'

典型的应用场景

使用 padStart 进行时间格式化。

'8:00'.padStart(5, '0');  // '08:00'

'18:00'.padStart(5, '0');  // '18:00'

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"

'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

使用 padStart 给命令行输出信息对齐。

Commands:


 run       Start a front service

 start     Start a background service

 stop      Stop current background service

 restart   Restart current background service

 help      Display help information

感谢 left-pad 事件 为此特性的贡献

2. Object.values & Object.entries

这两个静态方法是对原有的 Object.keys() 方法的补充。

const obj = {

 x: 'xxx',

 y: 1

};

Object.keys(obj); // ['x', 'y']

2.1 Object.values

静态方法 Object.values() 获取对象的所有可遍历属性的值,返回一个数组。示例如下:

// 基本用法

const obj = {

 x: 'xxx',

 y: 1

};

Object.values(obj); // ['xxx', 1]


// 数组可以看做键为下标的对象

// ['e', 's', '8'] -> { 0: 'e', 1: 's', 2: '8' }

const obj = ['e', 's', '8'];

Object.values(obj); // ['e', 's', '8']


// 字符串可以看做键为下标的对象

// 'es8' -> { 0: 'e', 1: 's', 2: '8' }

Object.values('es8'); // ['e', 's', '8']


// 如果是纯 number 型的键值,则返回值顺序根据键值从小到大排列

const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };

Object.values(obj); // ['yyy', 'zzz', 'xxx']

2.2 Object.entries

静态方法 Object.entries 获取对象的虽有可遍历属性的键值对,以 [key, value] 数组的形式返回,顺序和 Object.values() 一致。

// 基本用法

const obj = {

 x: 'xxx',

 y: 1

};

Object.entries(obj); // [['x', 'xxx'], ['y', 1]]


// 数组可以看做键为下标的对象

// ['e', 's', '8'] -> { 0: 'e', 1: 's', 2: '8' }

const obj = ['e', 's', '8'];

Object.entries(obj); // [['0', 'e'], ['1', 's'], ['2', '8']]


// 字符串可以看做键为下标的对象

// 'es8' -> { 0: 'e', 1: 's', 2: '8' }

Object.entries('es8'); // [['0', 'e'], ['1', 's'], ['2', '8']]


// 如果是纯 number 型的键值,则返回值顺序根据键值从小到大排列

const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };

Object.entries(obj); // [['1', 'yyy'], ['3', 'zzz'], ['10': 'xxx']]

知识点展开: for...in 和 for...of 循环

上述的 Object.keys()Object.values()Object.entries() 通常用来遍历一个对象,除了这三个方法外,常用的还有 for...in 和 for...of + Object.keys() 循环

使用 for...in 遍历

const obj = {

 x: 'xxx',

 y: 1

};

for (let key in obj) {

 console.log(key);

}

使用 for...of + Object.keys() 遍历

const obj = {

 x: 'xxx',

 y: 1

};

for (let key of Object.keys(obj)) {

 console.log(key);

}

上述例子中两种遍历方式等价。但在更复杂的情况下,这两种方式的结果会不一样。 for...in 循环会遍历对象的可枚举属性,包括原型链上继承的属性,而 Object.keys() 不会遍历继承的属性。下面是一个继承的例子,Human 继承自 Animal。

function Animal() {

 this.legs = 4;

}

function Human(name) {

 this.name = name;

}

Human.prototype = new Animal();

let human = new Human('es8');

使用 for...in 遍历

for (let key in human) {

 console.log(key);

}

// 'name', 'legs'

使用 for...of + Object.keys() 遍历

for (let key of Object.keys(human)) {

 console.log(key);

}

// 'name'

3. Object.getOwnPropertyDescriptors

静态方法 Object.getOwnPropertyDescriptors 用于获取对象的属性描述符,该属性必须是对象自己定义而不是继承自原型链。结果中包含的键可能有 configurable、enumerable、writable、get、set 以及 value。

const obj = { es8: 'hello es8' };

Object.getOwnPropertyDescriptor(obj, 'es8');

// {

//   configurable: true,

//   enumerable: true,

//   value: "hello es8"

//   writable: true

// }

4. Trailing commas in function

ES8 标准中允许函数参数列表与调用中的尾部逗号,该特性允许我们在定义或者调用函数时添加尾部逗号。

function es8(var1, var2, var3,) {

 // do something

}

es8(10, 20, 30,);

思考:在上述例子中,函数内部的 arguments.length 是 3 还是 4 ?

5. Async functions

为解决异步调用引入的 async 函数,由于 Babel 和 Nodejs 很早就支持 async 和 await 关键字,这个特性应该是最众望所归、最应用广泛的 ES8 特性了。

Async 函数主要是从 ES6 的 generator 和 yield 进化而来,另外还得益于 TJ 大神的 co 模块 的广泛应用,使得 JavaScript 的异步流程控制在 Async 函数进入标准之前就已经在社区经过了广泛的实践和讨论。这里就不对 Async 函数再做介绍了,社区里有很多优秀的文章,大家自行搜索吧。

© 著作权归作者所有

共有 人打赏支持
爱敲代码的程序员
粉丝 75
博文 42
码字总数 82530
作品 0
海淀
程序员
加载中

评论(3)

玖伍贰柒
玖伍贰柒
php里很多方便的数组函数终于也在es里实现了
人觉非常君
人觉非常君
我刚开始学e6呀������
认命不如拼命
认命不如拼命
尼玛 一年要学一次的节奏
es6/es7/es8常用新特性总结(超实用)

  本文标题有误导性,因为我其实想写node8的新特性,说实话一下子从node v1.x跳跃到node 8.x+ 真有点受宠若惊的感觉。一直觉得node 数组、 对象、序列等的处理没有python方便,因为需要借助...

zhoujie0111
06/16
0
0
3分钟换电、4.4秒加速、44.8万起,蔚来首款量产车ES8还有哪些看点?

如果说2018必将点燃汽车业新闯入者的一次酣战,那么眼下,各家的战鼓已经在争鸣了。 在这个对新造车企业颇为特殊的一年到来的前一个月,我们陆续看到了几家选手在不完全统计下的一些动作: ...

思佳
2017/12/16
0
0
ES6、ES7、ES8特性一锅炖(ES6、ES7、ES8学习指南)

概述 ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMAScript-262。 ECMAScript 标准建立在一些原有的技术上,最为著名的是 JavaScript...

JiaPengHui
09/15
0
0
李斌准备好了,蔚来 ES8 也准备好了,你准备好为梦想买单了吗?

从去年 5 月 13 日第一辆 ES8 试制样车在南京工厂下线,至今已过去一年时间,这期间,蔚来(NIO)团队对这款他们寄予厚望的车型进行了十几次版本迭代。在目前这个时间节点,创始人李斌终于敢...

张伟
05/22
0
0
蔚来ES8看上去令人心动,但依旧需要耐心等待

编者注:本文作者是微博大V@春卷 的原创文章,科技新报已经获得转载授权,并做了不改原意的修改。以下为正文: 我之所以对于蔚来ES8关注,不仅是因为它是第一辆真正上市的国产“新势力品牌”...

Technews科技新报
2017/12/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

八种排序算法的时间复杂度复杂度

1、稳定性 归并排序、冒泡排序、插入排序。基数排序是稳定的 选择排序、快速排序、希尔排序、堆排序是不稳定的 2、时间复杂度 最基础的四个算法:冒泡、选择、插入、快排中,快排的时间复杂度...

陈刚生
17分钟前
1
0
大数据学习系列 Hadoop+Spark+Zookeeper+HBase+Hive集群搭建 图文详解

目录 引言 目录 一、环境选择 1,集群机器安装图 2,配置说明 3,下载地址 二、集群的相关配置 1,主机名更改以及主机和IP做相关映射 2,ssh免登录 3,防火墙关闭 4,时间配置 5,快捷键设置...

董黎明
30分钟前
1
1
六元一个的私有博客系统,了解一下?

神说要有光,于是便有了光 写代码的,偶尔都想装点逼,想要自己写点博客。刚开始还能在各大社区写,比如说CSDN,开源中国,博客园什么的。但是越写就会越觉得,那些博客平台都不是自己想要的...

耒耒耒耒耒
35分钟前
1
0
maven环境隔离

一.maven项目环境根据实际情况进行隔离: 开发环境 dev 测试环境 beta 线上环境 prod 二.pom 配置: build节点 <build> <resources> <resource> <directory>src/......

imbiao
36分钟前
1
0
webrtc收包流程源码分析

版本: webrtc M59 收包流程: AsyncUDPSocket::OnReadEvent AllocationSequence::OnReadPacket HandleIncomingPacket UDPPort::OnReadPacket Connection::OnReadPacket P2PTransportChannel......

bill_shen
38分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部