ES8 走马观花-阿里云开发者社区

开发者社区> meikidd> 正文

ES8 走马观花

简介: 距离上一篇《ES6 走马观花》已经快两年时间了,上个月底 ES8 正式发布,再写一篇姊妹篇。
+关注继续查看

距离上一篇《ES6 走马观花》已经快两年时间了,上个月底 ES8 正式发布,再写一篇姊妹篇,介绍 ES8。

什么是 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.padStartString.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...infor...of 循环

上述的 Object.keys(), Object.values(), Object.entries() 通常用来遍历一个对象,除了这三个方法外,常用的还有 for...infor...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 函数再做介绍了,社区里有很多优秀的文章,大家自行搜索吧。

6. Shared memory and atomics

SharedArrayBuffer 和 Atomics 是 JavaScript 为多线程能力增加的特性,暂时使用的场景不多,更多信息可以参考这个知乎的讨论: hax 的回答 —— JavaScript 如果拥有多线程能力会怎样?,还有这篇文章对 Shared memory and atomics 介绍得很详细 《ES proposal: Shared memory and atomics》

参考文献

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9951 0
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26758 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
11565 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13700 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9130 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7312 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4437 0
+关注
3
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载